【Vue.JS】Chrome 调试工具 vue-devtools 离线安装

使用 Chrome 浏览器运行 Vue 代码时，Chrome 会在控制台给出友好建议：下载 Vue Devtools 进行调试。

vue-devtool 是基于 Chrome 的一款调试神器。使用它开发 Vue，可以大幅度的提升开发效率。

首先，按照 Chrome 浏览器 console 提示，访问 github 地址。https://github.com/vuejs/vue-devtools。
然后向下移动到 readme 文件。点击如图所示的链接。一般情况下按照步骤即可安装成功。

但是，由于 Google 大多数情况下需要翻墙才能访问。所以偶尔会很尴尬的出现这种情况 …

这时候，就需要手动的离线安装。

首先，依然是在刚才的 github 网站，下载或 clone 源码到本地。

然后进入源码所在的目录，执行以下命令。

npm install

过程可能会有一点点漫长，因为需要安装一千个左右的依赖包，所以需要等待几分钟。

added 1071 packages in 437.697s

如上，安装完成后，重新生成项目。

npm run build

然后，进入 Chrome 浏览器的扩展列表。如下图：

打开开发者模式，点击“加载已解压的扩展程序”

选择源码文件夹下 --> shell --> chrome 文件夹，点击确定

OK 扩展程序添加成功。

到这里，安装已经完成了。
但是，有可能你的 F12 开发者工具中却没有看到 Vue devtools。
你会发现一个提示 “Vue.js is detected on this page. Open DevTools and look for the Vue panel.”

这种情况下，需要进入源码 --> shell --> chrome 文件夹下，找到 “manifest.json”，打开，修改一行代码：

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

将默认的 ““persistent”: false” 改为 “true” 。
然后保存，刷新，重新打开 F12