谷歌浏览器安装Vue开发者工具指南

安装Vue开发者工具（Vue Devtools）到谷歌浏览器的详细方法，分为两种主要方式：

---

方式一：通过Chrome应用商店直接安装（推荐）

1. 打开Chrome应用商店
   访问 Chrome Web Store，搜索 "Vue.js devtools"。

2. 下载并安装
   找到官方插件（通常由Vue.js团队发布），点击“添加到Chrome”按钮完成安装5。

3. 验证安装
   安装后，打开一个Vue项目页面，按 F12 进入开发者工具，若顶部导航栏出现 Vue 标签，则表示安装成功25。

---

方式二：手动安装（适用于无法访问应用商店的情况）

步骤1：下载源码

• 从GitHub的 vue-devtools 仓库 下载最新代码（推荐下载 master 分支的压缩包）146。

• 或通过百度网盘等第三方渠道获取预编译的扩展文件（需解压到本地）3。

步骤2：编译与配置

1. 安装依赖
   确保已安装Node.js和npm。在解压后的项目根目录下运行：

   bash

   复制

   npm install
   npm run build

   若使用淘宝镜像加速，可替换为 cnpm install167。

2. 修改配置文件
   找到 shells/chrome/manifest.json 文件，将 "persistent": false 改为 "persistent": true467。

步骤3：加载扩展程序

1. 打开Chrome，访问 chrome://extensions/。

2. 启用右上角的 开发者模式。

3. 点击 加载已解压的扩展程序，选择编译后的目录（通常为 shells/chrome）167。

步骤4：验证与调试

• 重启浏览器后访问Vue页面，按 F12 查看开发者工具中是否显示Vue标签。

• 若图标为灰色，需在扩展程序详情页中开启 允许访问文件网址5。

---

常见问题与注意事项

1. 依赖安装失败
   检查Node.js版本（建议≥12.x），或尝试清理缓存后重试。

2. 扩展无法启用

   • 确保 manifest.json 中的 persistent 已设为 true46。

   • 确认扩展路径正确，且未因安全策略被拦截。

3. 简化版安装
   若不想编译，可直接下载第三方提供的预编译扩展文件（如极简插件）。

---

极简插件官网_Chrome插件下载_Chrome浏览器应用商店

1. 打开Chrome浏览器 -> 点击右上角三个点 -> 扩展程序 -> 管理扩展程序
2. '管理扩展程序' 页面的右上角 '开发者模式' 开关打开
3. 极简插件下载到的是压缩包，必须先解压缩！解压后有2个文件。一个安装文件，一个说明书
4. 其中名字长的 `xxx_chrome.zzzmh.cn.crx` 文件就是安装包，鼠标长按拖住，拖到 '管理扩展程序' 页面，松开鼠标
5. 看到弹出框，点添加扩展程序，安装成功！