保姆式教学安装与配置Chrome的Vue调试工具vue-devtools

1. 下载资源包（zip的压缩包）
   git下载地址，点击即可访问
   

2. 将压缩包解压到当前文件夹
   

3. 进入vue-devtools-dev目录，在地址栏中输入cmd，打开命令框，当前的路径就是在vue-devtools-dev目录中
   

4. 在命令框中输入安装命令，回车运行

npm install

如图所示：

5. 进入vue-devtools-dev的packages目录下的shell-chrome子目录中，打开mainfest.json文件

6. 将persistent的值改为true
   
7. 在命令框中先安装webpack和webpack-cli，如果安装过了，就可以跳过此步

注意：webpack 和 webpack-cli 安装最新版本可能会有冲突，会导致下一步失败！！！
如下图所示:
可以尝试安装以下版本，亲测，没有冲突：

    "webpack": "^4.19.0",
    "webpack-cli": "^3.1.0",

8. 回到命令框，在vue-devtools-dev目录下，进行编译：

npm run build

编译成功

9. 打开Chrome浏览器
单击右上角“…” —— 更多工具——扩展程序

10. 在打开的“扩展程序”页面中，打开开发者模式

11. 单击“加载已解压的扩展程序”，在打开的资源界面中选择打开packages目录下的shell-chrome文件夹
如图，则载入成功

12. 配置vue-devtools
点击“详情”按钮
打开允许访问文件网址
至此vue-devtools就安装与配置好了
如果出现：本地vue-devtools 报错： Error: Unknown option ‘–hide-modules’，则是webpack与webpack-cli版本冲突，重新安装再编译即可
如果出现：无法为内容脚本加载JavaScript"build/hook.js"。无法加载清单。则是persistent的值修改没有成功，按照博客配置步骤重新配置一遍即可