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

相关推荐
我是如子啊5 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
Jeaten15 天前
Cross-Edge Orchestration of Serverless Functions With Probabilistic Caching
edge·serverless·cache
feiepuhuo00115 天前
edge打开高德开放平台卡顿的问题
前端·edge·卡顿·高德开放平台
海天鹰16 天前
Edge卸载应用
edge
lemoncat819 天前
Edge浏览器地址栏默认搜索引擎设置指南
前端·搜索引擎·edge
江梦寻25 天前
最新Chrome与Selenium完美兼容指南(含驱动下载与配置)
前端·chrome·selenium·测试工具·edge·edge浏览器
Tesla_king1 个月前
用提示词写程序(3),VSCODE+Claude3.5+deepseek开发edge扩展插件V2
前端·edge
Navicat中国1 个月前
Edge Databases:赋能分布式计算环境
前端·数据库·edge·sqlite
老K(郭云开)1 个月前
allWebPlugin中间件VLC专用版之截图功能介绍
前端·javascript·chrome·中间件·edge
航Hang*1 个月前
WEBSTORM前端 —— 第3章:移动 Web —— 第4节:移动适配-VM
前端·笔记·edge·less·css3·html5·webstorm