谷歌浏览器安装 Vue-devtools 调试工具

Question

使用 VUE 开发项目自然少不了调试工具，虽然现在的浏览器的审查元素功能已足够强大，但是如果你想要知道 JavaScript 里面的某个变量值是多少，手写代码还是比较繁琐的，使用 Vue-devtools 就能够很直观的查看 VUE 里面的变量，还可以随意的更改变量的值，可谓是对于开发及其的方便。

基本上浏览器都有这个插件的不同版本，Firefox 可以直接在扩展中心搜索安装，而 Google 浏览器就不那么容易了，大家都知道 Google 的网址是被墙了，现在科学上网的方法是越来越少了，这里分享给大家一个打包安装 Vue-devtools 插件的方法，打包的插件 Google 浏览器和 360 浏览器都可以使用。

下载 Vue-devtools 源码

Vue-devtools 的 Github 地址：

https://github.com/vuejs/vue-devtools

你可以直接点击右边的下载按钮，或者你安装了 Git 客户端，运行下面的代码下载到本地：

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

编译源代码

进入下载源代码的根目录，运行下面的代码安装项目的依赖关系

cd vue-devtools
cnpm install

修改 shells/chrome/manifest.json 文件，把配置文件里面的 persistent 改成 true

编译源代码

npm run build

安装 Chrome 插件

打开 Google 浏览器，点击菜单 -> 设置，在左侧再点击菜单，选择扩展程序选项

确保右上角开发者模式是打开的，点击加载已解压程序按钮，选择 vue-devtools > shells > chrome 放入，安装成功如下图

Vue-devtools 使用

这个工具对于线上的项目是不会打开的，只有本地的项目才可以使用这个工具，在 VUE 项目的网页中按 F12 或者点击鼠标右键，选择审查元素，选择 VUE 就可以使用了，VUE 是数据驱动的，这样就能看到对应数据了，方便我们进行调试。

打包 Vue-devtools 扩展

如果你喜欢 360 浏览器，你可以直接打包我们编译的 vue-devtools 插件，然后安装到 360 浏览器中。

2019年11月30日10:25:58 更新

我发现有时候无法安装上 node 包依赖，导致根本就无法打包，所以我直接将生成的 shells 文件夹上传下载，有需要的可直接下载这个文件夹进行安装。

https://www.wenjiangs.com/wp-content/uploads/vue-devtools-shells.rar