谷歌浏览器安装 vue 调试插件 vue devtools,对于调试 vue 项目非常方便,本文介绍如何安装
1、在 github 下载 vue devtools
这里可以使用 git 克隆
git clone https://github.com/vuejs/vue-devtools
或者直接到网站下载
vue devtools 插件地址:https://github.com/vuejs/vue-devtools
下载完成后,将其解压到自定义文件夹下
2、修改 manifest.json 文件配置
扫描二维码关注公众号,回复:
9568544 查看本文章
进入项目的 \vue-devtools-dev\shells\chrome 目录,找到 manifest.json 文件,将 persistent 修改为 true
修改完成
3、编译代码
修改完成 manifest.json 文件配置后,进入项目根目录按 shift 键同时鼠标右键,或用 cmd 窗口命令进入项目根目录
执行命令 npm install 或 cnpm install(如果使用淘宝 NPM 镜像)安装依赖
npm install
或
cnpm install
依赖安装完成后,执行命令 npm build 或 cnpm build(如果使用淘宝 NPM 镜像)编译代码
npm build
或
cnpm build
编译完成
4、扩展 Chrome 浏览器插件
打开谷歌浏览器,选择 更多工具 > 拓展程序
点击 加载已解压的扩展程序
找到项目中的 \vue-devtools-dev\shells\chrome 目录,进行添加
添加完成,会多出 vue.js devtools
5、测试
打开 vue 编写的 web 页面
进行调试
安装完成