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

文章目录

• • 
    
• ​​1. 引言​​
• ​​2. 下载​​
• ​​3. 安装​​
• ​​4. 配置插件​​
• ​​5. 添加插件​​
• ​​6. 使用​​
  • 
    

1. 引言

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

在写第一个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扩展程序：