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

发布于 2018-08-11 字数2814 浏览 795 评论 0

使用 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

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

编译源代码

npm run build

安装 Chrome 插件

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

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

Vue-devtools 使用

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

打包 Vue-devtools 扩展

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

打包 Vue-devtools 扩展

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!