chrome 的vue3的开发者devtool不起作用

问题: 刚刚vue2升级到vue3,旧的devtool识别不了vue3数据。

原因:

devtool版本过低。升级到最新。

解决:

去github下载vuetool项目代码:

GitHub - vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications.

下载项目解压,目录下cmd

执行编译

  • 因为devtools必须使用yarn进行下载,所以我们要下载yarn这个包管理工具。

  • 执行命令下载yarn:

    复制代码
     npm install -g yarn
  • 安装好yarn后,通过yarn来安装相关依赖:

    复制代码
     yarn install
  • 依赖安装完成后,开始打包build。 需要注意,这里的命令需要带watch,如果不带,会出错

    复制代码
    yarn run build:watch
  • 代码执行一阵后,出现此图画面,并没有其他反应后,此时Ctrl+C退出即可。

  • 接下来执行编译给chrome版本脚本

    yarn run dev:chrome

出现下面的界面后就可以Ctrl+C退出终端了:

编译成功话,可以用看到这个包

chrome浏览器加载

加载扩展程序ok,错误不用管

运行vue3的页面,devtool可以识别了。

最后分享我编译成功的shell-chrome包:

链接: https://pan.baidu.com/s/1zKEgGxT5uAvofpD-T1Oa_w?pwd=72m5 提取码: 72m5 复制这段内容后打开百度网盘手机App,操作更方便哦

相关推荐
Csvn5 小时前
Vue 3 defineModel 翻车实录:多个 v-model 绑定到底怎么写?
前端·vue.js
甲维斯5 小时前
坦克大战测试全翻车了!豆包,DeepSeek,Qwen,GPT,Claude
前端·人工智能·游戏开发
乘风gg6 小时前
还在养虾吗?虾王已诞生:微信龙虾 ClawBot
前端·ai编程·claude
小小小小宇6 小时前
LLM 长期记忆构建
前端
lichenyang4536 小时前
从 Express 老项目到 NestJS + Docker:一次车辆管理系统的渐进式重构
前端
Momo__7 小时前
VueUse createReusableTemplate —— 单文件组件内的模板复用神器
前端·vue.js
程序员小富7 小时前
我开源了一个开发者专属的智能 JSON 工具,得到了媳妇高度认可
前端·vue.js·后端
小小小小宇7 小时前
程序员如何给 LLM 装工具以及看懂推理过程
前端
写代码的皮筏艇7 小时前
React中的forwardRef
前端·react.js·面试
槑有老呆8 小时前
花三个月工资请了个 AI 程序员,结果它连青岛啤酒股价都查不了
前端