3步添加 vue 谷歌浏览器调试插件（最简单最容易操作的方法）

最新推荐文章于 2024-06-25 20:03:16 发布
最新推荐文章于 2024-06-25 20:03:16 发布
阅读量3.3k 收藏 4
点赞数 4
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haiyan09/article/details/107020949
版权

1 下载插件

  • 百度网盘：https://pan.baidu.com/s/1nuD48dlWYd-ERAJ2aiPIsw
  • 提取密码：gaha
  • 解压

2 打开谷歌浏览器

  • 输入网址： chrome://extensions/
  • 或点击右上角的更所工具—拓展程序
  • 打开右上角的开发者选项
    在这里插入图片描述

3 将解压后的文件夹拖拽到空白位置即可

在这里插入图片描述

  • 重新打开谷歌浏览器 F12键 ( 可以看到Vue 完美 )
  • 在这里插入图片描述
haiyan09
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-devtools(chrome vue 调试插件)
12-02
chrome（谷歌浏览器）vue代码调试插件， 已打包。解压后，通过chrome扩展程序加载即可使用。 使用方法： 1、chrome浏览器输入地址“chrome://extensions/”进入扩展程序页面 2、勾选开发者模式 3、点击“加载已解压的扩展程序...”按钮，选择解压后的chrome文件夹，即可添加成功。 4、添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息
谷歌浏览器调试vue项目
weixin_38526093的博客
02-07 5204
众所周知,在项目过程中我们常常遇到的一个问题就是本地调试的时候没问题但是发布到线上的时候就不行了。在时间充裕的情况下,我们当然可以慢慢调试,但是那是不可能的。选择完文件夹之后右键点击已打开的test.html标头 选择 "save for overrides" 将test.html保存到我们选的文件夹中。它能够实现 在不改动源码且不用重新打包发布就能改变前端脚本的执行逻辑,这样就大大减少了排错的时间。page页列出了当前浏览器中已打开的网站以及网站的页面文件,此时可以切换到Overrides选项卡。
Chrome插件：​Vue.js Devtools 高效地开发和调试
最新发布
朱雀随云记的博客
06-25 1153
Vue.js Devtools是一个Chrome DevTools扩展，专门用于调试Vue.js应用。安装这个扩展后，你会在Chrome开发者工具中看到一个新的标签“Vue”，通过它可以直观地查看和操作Vue.js组件，极大地提升了调试效率。
谷歌浏览器 chrome vue 调试插件 vue-devtools 及源码
05-04
谷歌浏览器 chrome vue 调试插件 vue-devtools chrome（谷歌浏览器）vue代码调试插件， 已打包。解压后，通过chrome扩展程序加载即可使用。 使用方法： 1、chrome浏览器输入地址“chrome://extensions/”进入扩展程序页面 2、勾选开发者模式 3、点击“加载已解压的扩展程序...”按钮，选择解压后的chrome文件夹，即可添加成功。 4、添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息
Chrome(谷歌浏览器)安装Vue插件vue-devtools
qq_40835779的博客
04-01 1264
一、vue.js插件下载这绝对是最详细的Vue开发工具vuejs-devtools安装教程，相信你只需要5分钟即可解决所有问题vue-devtools是什么？vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。一、vue.js插件下载根据下图打开谷歌浏览器中的【拓展程序】：勾选【开发者模式】——点击【加载已解压的拓展程序】——选择刚刚解压的vuejs-devtools插件整个文件夹导入即可。
Chrome浏览器 安装Vue插件vue-devtools
A_aspectJ的博客
03-30 3561
vue-devtools 是一个为 Vue.js 开发者设计的 Chrome 插件。它可以让你更轻松地审查和调试 Vue 应用程序。与普通的浏览器控制台工具不同，Vue.js devtools 专为 Vue 的响应性数据和组件结构量身定做。
Vue超级好用的谷歌浏览器调试工具
10-24
vue超级季好用的谷歌浏览器调试工具，可以直接查看节点内容、vuex数据准状态情况
如何在谷歌浏览器中使用vue调试工具
weixin_58017699的博客
06-11 1万+
下载地址：Vue Devtools_6.1.4_chrome扩展插件下载_极简插件点击：推荐下载文件中内容：3、打开chrome浏览器，进入chrome://extensions/ 将已经解压的文件拖入扩展程序中： 4、看到下面表示成功：
chrome中安装Vue调试工具vue-devtools
weixin_44021888的博客
11-19 180
chrome中安装Vue调试工具vue-devtools
# 谷歌 chrome 浏览器中的 vuejs devtools 插件工具的安装方法
段子手168的博客
04-30 4856
github 下载地址：https://github.com/vuejs/vue-devtools如下载：vue.js-devtools-4.1.3.zippage=9。
Vue浏览器调试工具VueTools安装以及使用
joan_yb的博客
02-10 1万+
Vue浏览器调试工具VueTools安装以及使用
谷歌浏览器 vue插件工具
04-29
vue谷-歌插件，开发帮手vue-devtools Vue.js devtools：调试vue.js应用的浏览器扩展 Chrome插件
vue谷歌浏览器 调试插件
02-10
vue谷歌浏览器 调试插件
使用 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
vue3 chrome浏览器调试工具vue-devtools
qq_41989905的博客
02-21 1060
然后请打开你的chrome浏览器，点击右上角的三个点 然后点击扩展程序，然后解压，找到以下路径 devtools-main\packages。再然后，直接把 shell-chrome 文件夹整个拖进去就可以了；里面有一个 shell-chrome 这个就是你所需要的文件；如何使用最新的 vue-devtools。点进去以后下载整个压缩包。
VSCode开发 Vue3 建议必备的插件
热门推荐
程序研博客
11-28 2万+
在使用 Visual Studio Code (VSCode) 开发 Vue 3 项目时，有一些插件可以提高开发效率、代码质量和工作流程。
Chrome安装Vue插件vue-devtools
刘家旺的博客
03-27 770
Vue.js是一款流行的JavaScript框架，广泛用于构建现代化的Web应用程序。为了提升Vue开发者的工作效率和体验，Vue开发团队推出了一款强大的浏览器插件——vue-devtools。本文将介绍如何在Chrome浏览器中安装和使用vue-devtools插件，以及该插件带来的便利之处。
浏览器调试Vue神器-插件
qq_39691676的博客
08-18 873
点我跳转
Vue3项目必备插件
weixin_60053942的博客
12-11 2670
为了获得对自动导入组件的TypeScript支持，Vue 3有一个PR扩展了全局组件的接口。目前，Volar已经支持这种用法。如果您使用的是Volar，您可以如下更改配置以获得支持。vue3 中另外一种name定义方式，直接写在script标签上。可以去antfu大佬的插件链接查看更多的配置。列举了一些 Vue 3项目中比较好用的插件。二、配置 vite.config.ts中。Vue3 中写调试代码需要name。[[Pinia#持久化]]Pinia持久化插件。
【Vue】浏览器安装vue插件
m0_67930426的博客
11-24 1179
首先看一下安装之后的效果，再考虑一下要不要安装安装完之后，打开浏览器控制台（ctrl + shift + j)调试起来就会方便很多。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值