通过npm安装vue-devtools(vue的chrome调试工具)

1. 下载chrome的扩展程序包

  github地址:https://github.com/vuejs/vue-devtools

2. 下载完成后,解压到先关文件夹下。进入vue-devtools文件夹,开始安装项目所需依赖包

  命令:npm install (如果有国内镜像环境,直接cnpm install就好了)

  下载成功出现如下状态:

  通过npm安装vue-devtools(vue的chrome调试工具)_第1张图片

 

3. 开始编译项目文件:

  命令: npm run build

  通过npm安装vue-devtools(vue的chrome调试工具)_第2张图片

4. 在vue-devtools文件夹下:shells>chrome>manifest.json,将配置里的persistent的值修改为true;

通过npm安装vue-devtools(vue的chrome调试工具)_第3张图片

5. 打开chrome,进入扩展程序管理界面(chrome://extensions/),加载已解压的扩展程序。选择vue-devtools>shells>chrome。加载完成就会出现以下的Vue.js devtools扩展程序。然后重启浏览器,再打开vue项目页面就可以在chrome的Devtools(就是console的那一栏,一般都排在最后面的。)找到Vue面板了。

通过npm安装vue-devtools(vue的chrome调试工具)_第4张图片

 

 

转载于:https://www.cnblogs.com/matthewkuo24/p/9361797.html

你可能感兴趣的:(通过npm安装vue-devtools(vue的chrome调试工具))