3. VUE调试工具

3.1 调试工具安装

1. 到GitHub下载工具安装压缩包，解压到响应的文件夹。
   
   
2. 到解压的vue-devtools文件目录下安装依赖包。
   
3. 修改manifest.json文件，该文件在vue-devtools文件的 \packages\shell-chrome 下。
   
   把 "persistent": false 改为 "persistent": true 。

  "background": {
    "scripts": [
      "build/background.js"
    ],
    "persistent": false
  }

4. 编译代码 npm run build。结果报错：'webpack' 不是内部或外部命令，也不是可运行的程序 或批处理文件，哭泣泣。
   
   按照网上建议全局安装webpack，npm install webpack -g
   
   重新编译，中间要求安装webpack-cli，选择yes，之后还是出现了报错：
   
   接着我按着报错信息去搜索了Error: Cannot find module 'webpack-cli/package.json’这个问题，尝试了npm install webpack-cli -g、npm run build，还是报错：
   
   又看到了另一种解释，看到了大佬分析出了原因：

The error was due to you installing webpack globally and trying to install the webpack-cli locally. I face the same problem.，大佬还给出了解决办法：npm rm -g webpack-cli And in the project npm i -D webpack-cli，That did it for me。

按照大佬的提示照做尝试了命令：npm rm -g webpack-cli 、npm i -D webpack-cli 、npm run build ，还是报错：Error: Cannot find module ‘webpack-cli/package.json’


我在想我是不是输错命令了，于是重新尝试了 npm i -g webpack-cli （原来的命令是npm i -D webpack-cli ）、npm run build，接着报错：

看了以下，全局安装webpack-cli，重新编译会报错：[webpack-cli] Unknown argument: --hide-modules，不全局安装而是采用如下命令安装 npm i -D webpack-cli ，重新编译会报错：Error: Cannot find module ‘webpack-cli/package.json’

删除了全局和非全局的，重新试了以下，还是不行。

a week later …

花了几天的时候学了一下git，采用https://www.cnblogs.com/chenhuichao/p/11039427.html链接的方法试了一下，还是不行。于是，我觉得可能是我前面的一些操作导致多下载了一些npm包，于是我把node卸载了，并且还把C盘下的用户目录下的AppData目录下的Roaming目录下的npm文件和npm-cache文件统统删除。之后重新安装了node。

接着我在D盘新建了vue-devtools文件夹，在该文件夹中打开了 git命令行程序，即 Git Bash Here。注意下图的vue-devtools文件夹中的vue-devtools文件夹和.git仓库文件是后来进行 git操作后得到的，一开始D盘下的vue-devtools文件夹中没有任何内容。

打开 git命令行程序后，输入初始化 git仓库 命令 git init，之后就变成如下摸样：

之后到github下载vue-devtools安装包，这里我采用了git 的克隆方式，也就是在git命令行程序中输入如下图命令，然后 enter 键，等待安装包下载完成。

下载完成后，我的文件目录成了这个样子（也就是前面提到的），多了vue-devtools文件夹和.git文件夹。

接着我打开了 powershell，将当前工作目录切换到 D:\vue-devtools\vue-devtools 下，输入命令 git checkout master。这个命令让工作环境切换到了master环境下。因为在我们克隆完vue-devtools安装包后，D:\vue-devtools\vue-devtools 目录下默认进入的是dev环境，（这个我在 git命令行程序 中核实过了，但是当时没有截图，sorry~）而我们后续操作都要master环境下进行，所以要先切换到master环境。

上述操作完成后，接下来在vue-devtools目录下安装依赖包，在power shell 中输入 npm install 命令。

依赖包下载完后执行 npm run build，编译打包成功后会在shells下生成chrome文件夹。（终于没有报错了）此文件夹就是用来放入chrome的扩展程序。

打开Chrome浏览器 >选择更多工具>扩展程序 >打开开发者模式
点击加载已解压的扩展程序, 找到刚才生成的chrome文件夹，选择 vue-devtools > shells > chrome 放入, 安装成功如下图

然后发现插件报错，感觉内心瞬间缩紧。然后查看了一下具体是什么错误。

于是我想到我可能忘记了一个步骤，那就是修改manifest.json文件，把"persistent": false改成了"persistent": true，具体如下：

  "background": {
    "scripts": ["build/background.js"],
    "persistent": true
  },

我心存侥幸的按了F12键看看有没有出现VUE，然而并没有出现VUE。我寻思着前面安装的时候也没有出现错误啊，于是在网上搜索了Unchecked runtime.lastError: Cannot find menu item with id vue-inspect-instance这个错误，发现也有很多人遇到这个问题，例如：https://segmentfault.com/q/1010000013530379?utm_source=sf-similar-question

还有这个https://segmentfault.com/q/1010000024436264

于是我先尝试跑一个带vue框架的html文件，然后F12键，然后就出现VUE了。我也不知道为啥，生活就是这么奇特~