ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
## 一、Vue Devtools Vue Devtools是一个在浏览器上调试vue应用的神器,能提高不少我们在浏览器上开发调试vue程序的效率。(本质上是浏览器的一个插件,目前有chrome和firefox版本); ## 二、安装 chrome商店可以直接安装,也可以下载编译后的版本手动安装; ![](https://img.kancloud.cn/f6/ea/f6ea4393b01b6e6d84d74c4b1202a9f3_1355x693.png) ![](https://img.kancloud.cn/83/81/8381aa5f8c1643163c2ce6dc4f8df3b1_1361x691.png) ![](https://img.kancloud.cn/de/0d/de0d2761c15e92c791662044f60ef35d_1366x640.png) ## 三、使用 安装之后,就是在原F12工具功能栏之后,增加了一个vue栏目; ![](https://img.kancloud.cn/b0/85/b0858672cef5e76ac0e399fc48891372_1366x736.png) 也是用F12打开调试工具就可以进行vue项目的调试了; vue专有窗口调试: ![](https://img.kancloud.cn/fc/05/fc05c124337ecf8733fb43943b3c9d8c_1366x736.png) 普通F12调试: ![](https://img.kancloud.cn/59/a0/59a004602f1ab8efd422e456f478a277_1366x736.png) 设置调试窗口的位置: ![](https://img.kancloud.cn/3e/5d/3e5d84bf017675212f35b6ff84015cea_1366x736.png) >[danger] 需要注意,项目一般通过transform-remove-console实现打包之后的生产环境清除console,自动会忽略掉 console 输出,所以,一般是开发环境打开F12调试,看到效果,而不是打包好之后来调试; ``` if (IS_PROD) { plugins.push('transform-remove-console') } ```