Chrome安装Vue插件vue-devtools的步骤

Chrome安装Vue插件vue-devtools的步骤

  1. 首先,你需要从 GitHub 上克隆 vue-devtools 的代码库到本地:
bash 复制代码
git clone https://github.com/vuejs/vue-devtools.git
  1. 进入vue-devtools文件夹,并安装依赖包:
bash 复制代码
cd vue-devtools
npm install

或者使用cnpm:

bash 复制代码
cnpm install
  1. 编译代码:
bash 复制代码
npm run build
  1. 修改vue-devtools/shells/chrome/manifest.json文件,将persistent设置为true。

  2. 打开Chrome浏览器,在地址栏输入chrome://extensions/进入扩展程序页面。

  3. 打开右上角的开发者模式。

  4. 点击"加载已解压的扩展程序",选择vue-devtools/shells/chrome文件夹。

  5. 勾选"允许访问文件网址"。

  6. 至此,vue-devtools已经安装完毕。你可以在本地运行一个 Vue 项目,然后通过 F12 打开控制台来使用它。如果控制台中没有出现 vue-devtools 面板,可能需要刷新页面或重新打开浏览器。

相关推荐
Java陈序员5 小时前
用 AI 开发了一个 Github 图片预览浏览器插件!
chrome·edge·github·浏览器插件
视***间10 小时前
视程空间Edge工业边缘盒:给工业机器人装一颗耐造的“本地大脑“
前端·edge·机器人·边缘计算·智慧工业·工业视觉·视程空间
白日做梦Q6 天前
Chrome商店访问不了,无法现在安装插件?利用Edge商店迁移扩展完整实操教程问题背景
前端·chrome·edge
清水迎朝阳7 天前
Edge 在线语音 403 问题修复
前端·edge
Frag0ut14 天前
Edge浏览器2026深度配置指南:Copilot工作流、垂直标签与隐私策略全解析
edge·copilot·使用技巧·垂直标签页·浏览器配置·集锦功能·同步设置
iCxhust19 天前
如何批量导出edge保存的密码
前端·windows·edge
zwd200522 天前
Manim arrange 和 arrange_in_grid 用法详解:buff、aligned_edge、rows/cols(0.21.0 实测)
前端·python·edge
Frag0ut25 天前
2027 年浏览器展望:Chrome 与 Edge 的 AI 智能体进化方向
前端·人工智能·chrome·edge·浏览器·新功能
Frag0ut1 个月前
Edge 与 Chrome 实验性功能对比:AI、标签页、跨设备与开发者工具
chrome·edge·dev·beta·实验功能·canary
Frag0ut1 个月前
除了谷歌服务,Chrome和其他Chromium浏览器有什么与众不同?
chrome·edge·浏览器·chromium·隐私保护·brave·ungoogled