vue3 chrome浏览器调试工具vue-devtools

已于 2024-02-21 14:35:31 修改
阅读量604 收藏 2
点赞数 2
文章标签： chrome vue.js 前端
于 2024-02-21 14:31:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41989905/article/details/136210843
版权
如何使用最新的 vue-devtools

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

点进去以后下载整个压缩包

然后解压，找到以下路径 devtools-main\packages

里面有一个 shell-chrome 这个就是你所需要的文件；

然后请打开你的chrome浏览器，点击右上角的三个点 然后点击扩展程序，


点击管理扩展程序

再打开开发者模式

再然后，直接把 shell-chrome 文件夹整个拖进去就可以了

提哑巴的喇叭
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3谷歌浏览器调试工具Vue.js devtools 6.1.4
05-30
Vue.js devtools 6.1.4,Vue3谷歌浏览器调试工具。开发vue3必备开发工具，跟踪数据便于调试，解决数据问题。
Vue3.0-devtools-6.0.0-beta-7-Crx4Chrome.zip
03-28
（1）vue 3.x 调试工具：Vue3.0-devtools-6.0.0-beta-7-Crx4Chrome.crx Chrome浏览器Vue调试插件； （2）直接安装使用无需自己编译； （3）安装方法：打开Chrome浏览器，输入“chrome://extensions/”打开扩展程序，启用开发者模式，然后把下载下来的压缩包解压后的“ Vue3.0-devtools-6.0.0-beta-7-Crx4Chrome.crx ”拖到Chrome上去即可安装； （4）如果安装的时候报错：程序包无效:"CRX_HEADER_INVALID"解决方法：将扩展名.crx改为.rar解压出来，然后使用“加载已解压的扩展程序”进行安装。
谷歌浏览器调试vue项目
weixin_38526093的博客
02-07 4844
众所周知,在项目过程中我们常常遇到的一个问题就是本地调试的时候没问题但是发布到线上的时候就不行了。在时间充裕的情况下,我们当然可以慢慢调试,但是那是不可能的。选择完文件夹之后右键点击已打开的test.html标头 选择 "save for overrides" 将test.html保存到我们选的文件夹中。它能够实现 在不改动源码且不用重新打包发布就能改变前端脚本的执行逻辑,这样就大大减少了排错的时间。page页列出了当前浏览器中已打开的网站以及网站的页面文件,此时可以切换到Overrides选项卡。
如何在谷歌浏览器中使用vue调试工具
weixin_58017699的博客
06-11 1万+
下载地址：Vue Devtools_6.1.4_chrome扩展插件下载_极简插件点击：推荐下载文件中内容：3、打开chrome浏览器，进入chrome://extensions/ 将已经解压的文件拖入扩展程序中： 4、看到下面表示成功：
在Chrome浏览器中配置vue-devtools调试工具
热门推荐
mystonelxj的博客
12-25 1万+
1，首先在浏览器上打开 地址 https://github.com/vuejs/vue-devtools.git ，在页面上点击 “Clone or Download” 按钮 ，下载相关的 “vue-devtools-dev” 压缩包  2，Windows系统下，解压缩文件“vue-devtools-dev.zip” ,本例解压缩路径为“D:\vue-devtools-dev\vue-dev...
【Vue3 知识第二讲】Vue3新特性、vue-devtools 调试工具、脚手架搭建
前端知识分享喵
09-01 2313
Vue3新特性、vue-devtools 调试工具、脚手架搭建
正确开启vue3.0调试工具vue-devtools
球球不吃虾WHR2349博客
03-12 6568
正确开启vue3.0调试工具vue-devtools 1.去https://github.com/vuejs/vue-devtools官网下载，注意下载beta版本的，这个才是vue3.0用的 2.如果是用火狐浏览器，点击beta应该是直接进入火狐的插件中心，直接安装就行了。 如果安装谷歌版的，下载vuejs_devtools_beta-6.0.0.7-an+fx.xpi文件，6.0.0.7是我下载时候的最新版本号，下载好以后解压，进去npm install一下。然后就安装一下就o了。 我火狐和谷歌都安
vue3中使用devtools（chrome）（推荐第三种方法）
qq_29184685的博客
04-11 4955
1、下载最新版本：https://github.com/vuejs/devtools/tree/v6.1.4 （下载最新，有的老版本我感觉有些些问题） 2、解压到文件夹中 3、命令行进入文件夹中（或者用VScode等的终端操作），并且执行命令yarn install安装依赖 4、执行：yarn run build，到下图表示完成 5、chrome浏览器中打开chrome://extensions/，并且拖入packages文件下的shell-chrome文件夹 6、重新打开浏览器 ...
Chrome 浏览器安装Vue2、Vue3插件方法 (详细有效)
qq_50497708的博客
12-11 1万+
以vue3插件为例：下载完解压。将下面的文件拖到扩展程序的页面。
浏览器的vue3调试工具
jiangyafu0的博客
11-23 611
浏览器vue3插件
vue调试工具vue-devtools安装及使用方法
12-12
本文主要介绍 vue的调试工具 vue-devtools 的安装和使用 工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧 安装: 1.到github下载： git clone https://github.com/vuejs/vue-devtools 2.在vue-devtools目录下安装依赖包 cd vue-devtools cnpm install 3.修改manifest.json文件 把”persistent”:false改成true  4.编译代码 npm run build 5.扩展Chrome插件 Chrome浏览器 >  更多
vue-devtools v5.1.0.crx 最新版Chrome浏览器Vue调试插件
06-17
vuejs-devtools_v5.1.0.crx 最新版Chrome浏览器Vue调试插件，直接安装使用无需自己编译。安装方法：打开Chrome浏览器，输入“chrome://extensions/”打开扩展程序，启用开发者模式，然后把下载下来的“vuejs-devtools_v5.1.0.crx”拖到Chrome上去即可安装。 如果安装的时候报错：程序包无效:"CRX_HEADER_INVALID"解决方法： 将扩展名.crx改为.rar解压出来，然后使用“加载已解压的扩展程序”进行安装。
使用 vue3.x版本开发 chrome插件
12-31
使用vue开发chrome浏览器插件，可以方便前端人员开发插件页面，不管是popup页面，content页面等都可以使用vue开发模式很方便的开发需求 码云地址：https://gitee.com/guoqiankun/my-vue3-plugin github地址：https://github.com/18055975947/my-vue3-plugin CSDN地址：https://guoqiankun.blog.csdn.net/article/details/112007833
Chrom浏览器Vue调试插件最新版本VueDevTools-5.3.3
05-27
VueDevTools-5.3.3，Chrom浏览器Vue调试插件目前最新版本，可再开发这工具中进行vue的前端代码调试工作 Chrome and Firefox DevTools extension for debugging Vue.js applications.
VueDevtools-chrome插件-vue调试工具
04-08
VueDevtools-chrome插件-vue调试工具
chrome插件 vue-devtools离线安装包
04-27
版本5.3.3，从github下载的源码自己build出来的。 解压文件，从谷歌扩展程序里加载文件夹即可。
vue-devtools-5.1.1.zip
04-23
在github链接上面直接下载的vue-devtools 不可用，我这里在分支里面下载的，5.1.1版本可用的。 使用方法 切换到根目录 cnpm install，然后 npm run build，再 修改shells\chrome 目录下的manifest.json 里面的 ...
Chrome 插件如何开发？
最新发布
wangbo_angel的博客
04-29 1058
这是一个高层次的概述，开发 Chrome 插件还需要对 Chrome 插件 API 和 Web 技术有深入的了解。开发 Chrome 插件涉及几个关键步骤，包括了解 Chrome 插件的架构、编写必要的代码、测试和发布。- 可以使用 Chrome 提供的 API，如 `chrome.tabs`、`chrome.runtime` 等。- 一旦测试完成，你可以将插件打包成一个 `.crx` 文件，这是 Chrome 插件的安装文件。- 使用 Chrome 浏览器的开发者工具来测试和调试你的插件。
vue3调试工具是vue-devtools如何安装
05-11
要安装Vue.js 3的调试工具vue-devtools，您需要执行以下步骤： 1. 首先，您需要在浏览器中安装Vue.js 3的开发版本。您可以在Vue.js的官方GitHub存储库中找到开发版本的源代码。 2. 接下来，您需要将Vue.js 3的开发版本添加到您的项目中。您可以使用npm或yarn来安装Vue.js 3的开发版本，例如： ``` npm install vue@next ``` 3. 安装完成后，您需要在浏览器中安装Vue.js 3的调试工具vue-devtools。您可以在Chrome Web Store中找到该工具，或者您可以从Vue.js的官方GitHub存储库中下载源代码并手动安装。 4. 安装完成后，您可以在Chrome浏览器中打开vue-devtools，并在Vue.js 3应用程序中进行调试。 请注意，Vue.js 3的调试工具vue-devtools目前仍处于beta版本，可能存在一些问题。但是，该工具已经可以用于Vue.js 3的调试和开发。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值