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 面板,可能需要刷新页面或重新打开浏览器。

相关推荐
Frag0ut1 天前
Edge 与 Chrome 实验性功能对比:AI、标签页、跨设备与开发者工具
chrome·edge·dev·beta·实验功能·canary
Frag0ut3 天前
除了谷歌服务,Chrome和其他Chromium浏览器有什么与众不同?
chrome·edge·浏览器·chromium·隐私保护·brave·ungoogled
qqww15514 天前
Win11更新后Edge卡顿掉帧?隐私窗口流畅解决办法
windows·edge·优化·卡顿
匠测AI说16 天前
AI对话管理器 · Edge / Chrome MV3 扩展 · v0.1.0
chrome·ai·edge
️学习的小王1 个月前
Windows Claude Code 接入 Playwright‑MCP,调用本机Edge浏览器(避坑完整教程)
前端·windows·edge
l1258651 个月前
# LangGraph 核心架构入门:State、Node、Edge 与 Reducer 的工程理解
大数据·人工智能·python·架构·langchain·edge
Tim风声(网络工程师)1 个月前
edge网页遇到打不开--Internet Explorer 兼容性/急速/高速模式
服务器·前端·edge
fthux2 个月前
不必下载整个仓库:GitZip Pro 让 GitHub 文件与文件夹批量下载更简单
前端·chrome·ai·edge·开源·github·firefox
stereohomology2 个月前
MS Edge很多事的一点是把地址栏复制的地址自动转标题文本
前端·edge
山西茄子2 个月前
使用 TensorRT-Edge-LLM 0.9.0 在端侧测试 Qwen3-Omni
人工智能·edge