11vue学习——在chrome扩展程序中安装vue-devtools插件

11vue学习——在chrome扩展程序中安装vue-devtools插件

前言

做前端开发的IT工程师应该比较熟悉这款工具，可以边侧边栏窗格中的页面，边检查代码。由于vue是数据驱动的，所以这就存在在开发调试中查看DOM结构并不能解析出什么。但是借助vue-devtools插件，我们就可以很容易的对数据结构进行解析和调试。我们今天就来了解一下。

步骤

1. 到 https://github.com/vuejs/vue-devtools 下载vue-devtools插件

将压缩包下载到你自定义的路径（例如我是下载到 G:\software\VSCode 的）之后，将文件解压

2. 打开cmd 进入到你放置插件的路径下

（1）执行 npm install

执行成功之后会出现下面的界面

（2）执行 npm run build

执行成功之后会出现下面的界面

3. 修改该文件夹下 的 shells 文件夹 里面的 chrome 文件夹里面的 manifest.json 文件

将persistent 的值修改为 true

4. 打开chrome浏览器的扩展程序

将 shells 文件夹 下 chrome 拖入扩展程序中

5. 完成界面

当你打开包含vue代码的网页时，控制台出现以下界面的时候你就大功告成了》