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

相关推荐
Tesla_king4 天前
用提示词写程序(3),VSCODE+Claude3.5+deepseek开发edge扩展插件V2
前端·edge
Navicat中国5 天前
Edge Databases:赋能分布式计算环境
前端·数据库·edge·sqlite
老K(郭云开)6 天前
allWebPlugin中间件VLC专用版之截图功能介绍
前端·javascript·chrome·中间件·edge
航Hang*8 天前
WEBSTORM前端 —— 第3章:移动 Web —— 第4节:移动适配-VM
前端·笔记·edge·less·css3·html5·webstorm
航Hang*8 天前
WEBSTORM前端 —— 第3章:移动 Web —— 第2节:空间转换、转化
前端·笔记·程序人生·edge·css3·html5·webstorm
老K(郭云开)8 天前
allWebPlugin中间件VLC专用版之录像功能介绍
前端·javascript·chrome·中间件·edge
航Hang*8 天前
WEBSTORM前端 —— 第3章:移动 Web —— 第3节:移动适配
程序人生·edge·less·css3·html5·webstorm·rem
jugt10 天前
Chrome/ Edge 浏览器弹出窗口隐藏菜单地址栏
前端·chrome·edge
xihaowen20 天前
Android Edge-to-Edge
android·前端·edge
EchoZeal23 天前
【实测有效】Edge浏览器打开部分pdf文件显示空白
edge·pdf·adobe acrobat