下载插件

  去到vue官网,找到devtools工具的入口。
vue调试插件vue-devtools及使用
  切换到master分支,(默认dev,后面npm run build打包会报错);然后下载文件。
vue调试插件vue-devtools及使用
  解压刚刚下载的压缩包,执行npm install命令,安装依赖;然后再npm run build对文件进行打包。
  最后会生成如下路径目录的文件,build文件夹是会在执行npm run build命令之后才会出现的。
vue调试插件vue-devtools及使用

安装插件

  打开chrome浏览器,右上角三个点的按钮,打开“更多工具”=》“扩展程序”;或者直接在chrome浏览器地址栏输入chrome://extensions/ 打开扩展程序页面。
  直接把shells文件夹下的整个chrome文件夹拖到扩展程序页面。
vue调试插件vue-devtools及使用

使用

  安装完毕,下面就是使用,需重启chrome浏览器,打开vue项目,F12可以在控制台看到多了一个Vue,说明插件安装成功,可以正常使用。
vue调试插件vue-devtools及使用

相关文章: