Vue Devtools 插件
Vue Devtools 是 Vue 官方发布的浏览器插件,可以安装在 Chrome 和 Firefox 等浏览器上,直接内嵌在开发者工具中。主要用于调试 Vue 项目。
正常下载安装操作如下,但应对不同的 node,vue,chrome 版本,会出现各种各样的问题。为了简单起见,直接找 .crx 格式插件安装文件。如果不想处理各种莫名其妙的问题,请直接查看 .crx 快捷安装这一节。
github 标准安装
以 5.1.1 版本为例,说明通过 github 安装插件步骤。实际版本安装过程中会遇到各种问题,有兴趣的可以操作研究一下。
下载
Github下载地址:https://github.com/vuejs/vue-devtools/tree/v5.1.1
安装
-
解压缩
解压下载的文件,在这里解压到【D:\个人相关\CSDN\Vue\Vue Devtools\devtools-5.1.1】下。 -
安装依赖
在命令行中切换到解压好的 vue-devtools-5.1.1 目录,使用 npm install 命令进行依赖安装。 -
打包
完后执行 npm run build,编译打包成功后会在项目路径的 shells 文件夹下生成 chrome 文件夹。此文件夹就是用来放入 chrome 的扩展程序。 -
扩展 Chrome 插件
打开 Chrome 浏览器–>选择更多工具–>扩展程序–>打开开发者模式,点击“加载已解压的扩展程序”,选择 devtools-5.1.1 > shells > chrome 放入。如果看不到“加载已解压的扩展程序…”按钮,先勾选“开发者模式”。
.crx 快捷安装
去网上找 6.5.1.crx 插件包(最新版的 6.6.1 有问题),直接添加到扩展 Chrome 插件中就行,插件设置全部打开,设置之后重启浏览器。访问通过 vue 编写的页面右上角 Vue 插件图标高亮,f12 打开开发者工具在 vue 栏可以调式 vue 页面。