1.下载vue-devtools

下载地址:vue-devtools
或使用git下载

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

2.安装工具

$ cd ./vue-devtools/

#切换到master
$ git checkout master
#安装,比较久需等待,如果是dev分支则会报错
$ 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

# build成功
# Hash: c8f35c7c1931e5faf950
# Version: webpack 3.12.0
# Time: 7430ms
#                Asset       Size  Chunks                    Chunk Names
#          devtools.js     878 kB       0  [emitted]  [big]  devtools
#           backend.js    34.7 kB       1  [emitted]         backend
#              hook.js    2.34 kB       2  [emitted]         hook
#          detector.js    3.61 kB       3  [emitted]         detector
#             proxy.js  878 bytes       4  [emitted]         proxy
# devtools-background.js    1.78 kB       5  [emitted]         devtools-background
#        background.js    2.21 kB       6  [emitted]         background

#配置插件,修改persistent为true
$ vim ./shells/chrome/manifest.json
  "background": {
    "scripts": [
      "build/background.js"
    ],
    "persistent": true
  },

3.工具使用

添加插件工具

选择chrome目录

添加成功