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

发布于 2018-08-11 22:12:27 字数 2535 浏览 3246 评论 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 扩展

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

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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

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

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。