Vue devtools工具安装 Chrome安装Vue devtools 教程步骤

最新推荐文章于 2025-10-23 16:54:54 发布

原创最新推荐文章于 2025-10-23 16:54:54 发布 · 1.2w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#安装Vue devtools #winVue devtools #win10安装vue开发工具 #vue开发工具安装教程 #vue devtools教程

前端专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了如何安装Vue Devtools的Chrome扩展程序，特别是强调了必须使用v5.1.1版本以避免安装错误。在安装过程中，包括通过npm或yarn进行构建，并指导如何在Chrome浏览器中启用扩展。对于可能出现的灰色图标或无法在控制台显示Vue的问题，提供了修改manifest.json文件的解决方案。此外，还提醒读者注意查看官方文档以解决安装问题，例如理解yarn和npm的区别。

Vue devtools工具安装 Chrome安装Vue devtools 教程步骤

一、安装步骤

1、下载地址：GitHub - vuejs/devtools at v5.1.1

2、注意：必须使用 v5.1.1 版本，经测试这个版本正常使用

3、安装步骤：

npm install / cnpm install

npm run build

4、上述步骤，安装没报错后，可以看到会生成 devtools/shell 目录

5、打开 chrome 浏览器，开启开发者模式--- 加载已解压的扩展程序 --- 选择 devtools-5.1.1\shells\chrome

方式一：在谷歌浏览器地址栏中输入：chrome://extensions/
 
方法二： 右上角 --- 更多工具 --- 扩展程序

6、点击插件 "详情" --- 有权访问的网站 --- 在所有网站上

二、可能遇到的问题

1、安装报错，请选择 v5.1.1 版本

2、安装完成后devtool图标还是灰色的或者控制台根本就没有vue：


打开： vue-devtools\shells\chrome中的manifest.json 文件

将"persistent": false 改为 true 。

已安装好的 vue-devtools 插件。

三、 5.1.1 以后版本安装

1、比如 v5.3.4版本：

yarn install 

yarn run build

2、获取到，安装后的内容： devtools-5.3.4\packages\shell-chrome ，后续按照步骤【一-5】操作即可。

PS：为什么会写这篇文章，作为一个后端开发，初次接触Vue，下载最新的版本（v6.0.x），

再按照其他博客的教程（npm install），一直安装失败 ...

最根本的原因是： 我没有看官方的安装文档！！！

比如问题： yarn 是干啥的？ yarn 和 npm 有啥区别呢？不知道！