vuedevtools插件安装

最新推荐文章于 2025-06-22 12:06:33 发布

原创最新推荐文章于 2025-06-22 12:06:33 发布 · 603 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

分享学习专栏收录该内容

243 篇文章

订阅专栏

本文介绍了Vue DevTools的三种安装方式：在线安装、离线crx文件安装和从GitHub源码编译安装。对于国内用户，考虑到网络环境，推荐尝试离线安装或直接从GitHub获取源码编译安装，以解决信任问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目前vuedevtools插件安装主要有三种方式，选择适合自己的方式即可

1.在线安装

众所周知，国内网络环境比较难按，如果能安的话还是推荐在线安装

在线安装地址：https://chrome.google.com/webstore/detail/nhdogjmejiglipccpnnnanhbledajbpd

2.离线crx方式安装

通过下载crx方式，解压后，打开开发者模式加载文件夹的方式进行安装，常见的离线插件下载网站如下，都可以找到vuetools，离线下载主要难解决的是信任问题，如果官网能提供crx离线包更好，插件是否有篡改自辨。

1、极简插件
https://chrome.zzzmh.cn/
2、chromeFK
http://www.chromefk.com/
3、GugeApps
https://www.gugeapps.net/
4、chrome666
https://www.chrome666.com/
5、收藏猫
https://chrome.pictureknow.com/

3.github手动安装

这个相当于自己编译插件进行安装，虽然安装及其耗时，但是解决了信任问题

1.下载
https://github.com/vuejs/vue-devtools
下载zip包
2.编译
npm install
npm run build
3.修改插件选项
shells>chrome>manifest.json并把json文件里的"persistent":false改成"persistent":true
4.打开插件开发者模式加载编译后的shells>chrome文件夹安装。

第三种方法第一二步就是在磨练人的心智。安装时间在几分钟到几小时不等，取决于网络环境，追求速度或者教学演示的话还是用第二种吧。