Vue调试神器之Vue.js devTools

Posted 2021-01-23 darkerxi

Vue项目中使用Vue.js devTools这款调试神器，可以极大程度的提高我们的开发效率。

安装

1、打开Chrome网上应用商店安装插件（自墙）,直接搜索devTools安装即可。贵宾传送阵，请戳这里→Chrome网上应用商店

2、从github上下载到本地。贵宾传送阵，请戳这里→vue-devtools

1)、进入到/vue-devtools目录下(npm install或者cnpm install)安装项目所需依赖。

2)、安装完依赖后(npm run build或者cnpm run build)编译项目。

3)、编译完项目后，在/vue-devtools/shell/chrome/manifest.json中修改persistent参数false为true。

4)、在chrome扩展程序页面，打开“开发者模式”，点击“加载已解压的扩展程序”按钮，选择你本地的.../vue-devtools/shell/chrome文件夹, 添加完成后，勾选允许文件地址是否访问。

安装完成后devTools的图标会出现在浏览器的菜单栏中。

以上两种安装方式告一段落。下面让我们在vue项目中体验一下这款调试神器吧。

使用

运行Vue项目，在Chrome浏览器中展示项目（浏览器菜单栏中的devTools图标会亮起），按F12打开开发者工具，在开发者工具的菜单栏最后面会看到Vue，选中它就可以尽情的使用了。

当然这样一顿行云流水的操作下来，有些人会一次成功，而有些人则不会成功，浏览器菜单中的devTools图标亮滴鸭批，但是就是在开发者工具的菜单栏最后面看不到Vue。嗯~~~，怎么肥事小老弟？

请查看项目的index.html中，对vue.js的引用。你肯定使用了压缩版的vue.min.js，使用vue.min.js默认为生产环境，会导致devTools不显示，改为vue.js即可。