vue devtools安装及使用

本文详细介绍了如何从GitHub克隆Vue DevTools项目并进行本地安装,包括修改配置使工具适用于通过file://协议打开的网页,以及如何在Chrome浏览器中启用和配置该扩展程序。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.安装

  1. github.com/vuejs/vue-d… clone项目到本地

git clone github.com/vuejs/vue-d…

  1. 进入项目

cd vue-devtools

  1. 安装依赖包

npm install || cnpm install

  1. 修改文件

vue-devtools/shells/chrome/manifest.json

"background": {
    "scripts": [
      "build/background.js"
    ],
    "persistent": true  //将false改为true
  },
复制代码
  1. 打包

npm run build

  1. 打开chrome下的扩展程序,启用开发者模式,单击"加载解压缩的扩展名",选择shells/chrome即可
  1. 如果页面使用Vue.js的生产/缩小版本,则默认情况下禁用devtools检查,因此Vue窗格不会显示。
  2. 要使其适用于通过file://协议打开的网页,您需要在Chrome的扩展程序管理面板中选中此扩展程序的“允许访问文件网址”。

转载于:https://juejin.im/post/5d006f7bf265da1bd04ed85e

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值