谷歌浏览器Vue devtools安装教程
第一步:在github上下载工具,网址:
https://github.com/vuejs/vue-devtools
第二步:安装工具依赖(使用npm安装)
在vue-devtools-dev文件夹(下载的文件根目录)下,打开命令提示行或在文件夹下shift+鼠标右键打开powershell;
输入命令npm install 安装依赖,命令默认去找package.json中所需的依赖安装;
未安装依赖前:
安装依赖后会多一个文件夹node_modules;
第三步:修改manifest.json文件
第四步.安装完成后同在该目录下(文件所在的目录)
shift+鼠标右键进入当前目录打开powershell
输入npm run build
第五步:在谷歌浏览器地址栏中输入
chrome://extensions/
选择工具包下的shells>chrome文件夹(建议将文件放到安全地磁盘,路径或文件损坏会导致工具无法使用)
第六步:测试工具
—>重启浏览器
—>进入开发者工具
—>在调试工具栏选择vue
—>出现下图,表示安装成功(数据不必在意);但页面没有vue数据时,不会显示插件
打开vue项目, 打开f12, 选择vue就可以使用了.
vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试 ：