教你如何离线安装chrome浏览器vue devtools扩展插件

5,944 阅读1分钟

vue项目开发时,官方推荐在你的浏览器上安装Vue Devtools,它允许你在一个更友好的界面中审查和调试Vue应用。

vue3官网之vue devtools

可翻墙时直接安装Vue.js devtools

接下来我们主要看一下离线安装的方式。

离线安装

1. clone devtools代码库

当前以v6.0.0-beta.11tag为例

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

2. yarn install

3. yarn run build

4. 打开chrome extension页面

chrome://extensions/

5. 打开右上角的『开发者模式』

image.png

6. 点击左上角的『加载已解压的扩展程序』,选择文件夹:『vue-devtools/packages/shell-chrome』

image.png

image.png

7. 打开控制台查看vue devtools

image.png

到这里,我们就可以不用翻墙也可以安装对应版本的vue devtools啦!!!

参考文档

  1. github.com/vuejs/vue-d…