Vue系列教程（06）- Vue调试神器（vue-devtools）

1. 引言

通过前面的章节，我们已经了解了Vue的开发要素以及前端的基础知识了，有兴趣的同学可以参阅下：

• 《Vue系列教程（01）- 前端发展史》
• 《Vue系列教程（02）- Vue环境搭建、项目创建及运行》
• 《Vue系列教程（03）- Vue开发利器VsCode》
• 《Vue系列教程（04）- VsCode断点调试》
• 《Vue系列教程（05）- 基础知识快速补充（html、css、js）》

在写第一个Vue程序之前，需要先安装好Vue的调试神器vue-devtools。

打包好的插件已上传到百度网盘，如果时间赶的童鞋，可以忽略本文章，直接下载插件：

• 链接:https://pan.baidu.com/s/1hch6a6jm2FPN1Vjd1GxoNw

• 密码:lz6h

2. 下载

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

这里直接在控制台使用git下载，命令如下：

①.首先进入下载地址

$ cd /要下载的目录地址

②.克隆项目

$ git clone https://github.com/vuejs/vue-devtools

3. 安装

① 进入项目目录

$ cd vue-devtools/

② 切换到hide-inspect-button-outside-chrome-devtools-context分支

#切换到master
$ git checkout hide-inspect-button-outside-chrome-devtools-context

② 安装（比较久需等待,如果是其它分支则会报错）

$ npm install
$ npm run build

# 安装过程可能会出现
# npm ERR! code ELIFECYCLE
# npm ERR! errno 1
# npm ERR! vue-devtools@5.1.1 build: `cd shells/chrome && cross-env NODE_ENV=production webpack -- progress --hide-modules`
# npm ERR! Exit status 1
# npm ERR!
# npm ERR! Failed at the vue-devtools@5.1.1 build script.
# npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
# npm WARN Local package.json exists, but node_modules missing, did you mean to install?
# 这是没有生成node_modules这个文件,清空下缓存再重新安装就行
$ npm cache verify

4. 配置插件

① 配置插件,修改persistent为true

$ vim ./shells/chrome/manifest.json
  "background": {
    "scripts": [
      "build/background.js"
    ],
    "persistent": true
  },

5. 添加插件

在Chrome浏览器添加插件工具: 加载已解压的扩展程序： 然后选择chrom文件夹： 安装成功：

6. 使用

跑一个vue程序，并在浏览器打开控制台，可以看到Vue扩展程序：