谷歌vue调试工具devtools安装的傻瓜教程（图文详解）

最新推荐文章于 2024-09-22 16:13:43 发布
最新推荐文章于 2024-09-22 16:13:43 发布
阅读量1.6k 收藏 5
点赞数 2
分类专栏： 开发过程的bug记录 文章标签： vue chrome chrome devtools vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/darabiuz/article/details/118680030
版权
本文提供了一步一步的Vue.js Devtools在Chrome上的安装指南，包括从下载到解压，再到通过Chrome扩展程序安装的详细过程。成功安装后，开发者可以使用Vue调试工具来便捷地调试基于Vue框架的网页应用。
摘要由CSDN通过智能技术生成

1.去Chrome的插件网下载Vue.js devtools插件，链接如下
https://www.cnplugins.com/devtool/vuejs-devtools/
在这里插入图片描述
2.下载完成之后会得到以下文件
在这里插入图片描述
我们点击重命名，将文件后缀改为.rar,把文件修改为以下形式
在这里插入图片描述

3.点击鼠标右键，选择解压到“…”
在这里插入图片描述
得到以下解压过后的文件夹
在这里插入图片描述
内部内容如下：
在这里插入图片描述

4.进入谷歌浏览器界面，点击右上角竖着的三点，点击‘“更多工具—拓展程序”

最低0.47元/天 解锁文章
望屿
关注
专栏目录
谷歌安装vue-devtools插件图文教程
weixin_46566658的博客
11-07 1134
vue-devtools第一步，去github下载插件第二步 解压进入到解压目录，执行npm install第三步 执行命令npm run build出现下图就表示成功啦第四步 打开chrome，选择扩展程序，开启开发者模式，选择解压后的目录下的\vue-devtools-5.1.1\shells\chrome成功啦 第一步，去github下载插件 下载地址点击这里 注意下载方式选择zip，直接使用clone方式我试了很多次执行npm run build命令报错 第二步 解压进入到解压目录，执行npm i
vue调试工具vue-devtools安装及使用方法
12-12
在开发过程中，为了提高效率和精确调试，Vue 提供了一个强大的调试工具——Vue DevTools。这款工具允许开发者深入查看 Vue 应用的状态，包括组件树、数据、计算属性、依赖关系等。下面我们将详细介绍 Vue Devtools ...
Vue3谷歌浏览器调试工具Vue.js devtools 6.1.4
05-30
Vue.js devtools 6.1.4,Vue3谷歌浏览器调试工具。开发vue3必备开发工具，跟踪数据便于调试，解决数据问题。
Vue Devtools -----一条龙安装教程 + 解决安装使用过程的一些问题
最新发布
Yluciud的博客
09-22 2524
进入下载页面安装 |Vue 开发工具 (vuejs.org)
# 谷歌 chrome 浏览器中的 vuejs devtools 插件工具的安装方法
段子手168的博客
04-30 7339
github 下载地址：https://github.com/vuejs/vue-devtools如下载：vue.js-devtools-4.1.3.zippage=9。
谷歌浏览器安装devtools工具
weixin_45041493的博客
05-24 328
谷歌浏览器安装devtools工具
谷歌浏览器安装vue工具 devtools
buukyjmvni的博客
04-12 1621
1、官网下载压缩包，或者直接克隆，这里我采用的是克隆 git clone https://github.com/vuejs/vue-devtools.git 2、直接在终端yarn install安装依赖 ps（注：识别不了yarn命令的先用npm安装yarn ==>npm install -g yarn ） pps（如果识别不了npm 请去先把node安装了） 3、继续输入命令yarn run build 4、在克隆项目的这个文件夹里找到packages，里面有一个shell-chrome，
Chrome(谷歌浏览器)安装Vue插件vue-devtools
qq_40835779的博客
04-01 1898
一、vue.js插件下载这绝对是最详细的Vue开发工具vuejs-devtools安装教程，相信你只需要5分钟即可解决所有问题vue-devtools是什么？vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。一、vue.js插件下载根据下图打开谷歌浏览器中的【拓展程序】：勾选【开发者模式】——点击【加载已解压的拓展程序】——选择刚刚解压的vuejs-devtools插件整个文件夹导入即可。
vue2.0-devtools谷歌浏览器调试工具和vue3.0-devtools谷歌浏览器调试工具
08-19
该资源包括vue2.0-devtools谷歌浏览器调试工具和vue3.0-devtools谷歌浏览器调试工具，具体安装方法参考我的博客https://blog.csdn.net/dxnn520/article/details/121088688，如还不会，可私信我。
Vue安装Vue Devtools调试工具提示 Error: Cannot find module ‘@vue-devtools/build-tools’ 解决办法
01-08
我看网络上面安装Vue Devtools 调试工具的步骤几乎都是按照文章链接里的步骤进行安装：安装链接详情  但是在最终执行编译命令的时候 ：npm run build ，提示如下错误： 尝试了很多方法，都不能解决改问题。 为了...
chrome 安装devtools
前端的路上
04-28 887
依赖安装完成后，开始打包build。需要注意，这里的命令需要带watch，如果不带，会出错。即出现successfully 就可以退出了。出现上面画面，ctrl+c退出即可。打开chrome浏览器扩展程序。选择shell-chrome。进入下载的目录安装依赖。
Chrome浏览器 安装Vue插件vue-devtools
A_aspectJ的博客
03-30 5821
vue-devtools 是一个为 Vue.js 开发者设计的 Chrome 插件。它可以让你更轻松地审查和调试 Vue 应用程序。与普通的浏览器控制台工具不同，Vue.js devtools 专为 Vue 的响应性数据和组件结构量身定做。
谷歌浏览器安装vuejs devtools 插件
BUG指挥课堂
05-12 185
https://www.cnblogs.com/chessYu/p/10637939.html
谷歌浏览器安装vue-devtools插件
weixin_45377773的博客
10-27 654
谷歌浏览器安装vue-devtools插件 桌面新建一个文件夹,进入这个文件夹后按住shift+鼠标右键,选择 在此处打开命令窗口, 输入命令npm i vue-devtools,安装完成后进入node_modules文件夹下的vue-devtools文件夹,将vender文件拖至谷歌浏览器的扩展程序中(谷歌浏览器右上角三个点的图标=>更多工具=>扩展程序=>打开开发者模式=>加载已解压的扩展程序) 进入vender下的manifest.json文件,修改persistent为tru
谷歌浏览器安装vue-devtools
皇家小骑士
09-09 483
vue-devtools安装下载安装 安装之前，确保有node环境 下载 github下载地址 下载的方法有很多，这里就不一一叙述。如果不会git语法，最直接的方式就是点击clone or download下载zip到桌面解压。 安装 cd命令进入到vue-devtools-dev目录 运行npm install(也可使用淘宝镜像cnpm install) 打开vue-devtools-de...
Mac Google 安装 vue-devtools
u011269388的博客
05-31 1029
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用。
Chrome谷歌浏览器中安装vue-devtools
六六的小帅的博客
08-13 230
开始使用在GitHub上面下载源码、安装依赖、打包的方式安装，但是在安装依赖时一直不成功。 GitHub的下载地址：https://github.com/vuejs/vue-devtools 最后找到了已经打包的插件可以在这里下载：链接：https://pan.baidu.com/s/1Wrg6fc9ExPUfX9SKlJCiiA 提取码：uu7o 如果资源不能下载可以在评论中留言 安装步骤：将下载的压缩包解压→打开谷歌浏览器的更多工具，扩展程序→点击下图标记的按钮→选择刚才解压的文件夹导入就可..
Chrome浏览器安装devtools开发者工具
Liberty_yes的博客
10-14 4164
Chrome浏览器安装devtools开发者工具 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示； 全新的 KaTeX数学公式 语法； 增加了支持甘特图的mermaid语法1 功能； 增加了 多屏幕编辑 Ma
谷歌浏览器上如何安装Vue Devtools，GIt方式不好使时通过npm install vue-devtools解决
xcc_2269861428的博客
10-11 503
1、首先在下载vue-devtools https://github.com/vuejs/vue-devtools 2、下载后在目录下打开cmd 执行 npm install （如果提示npm命令不存在，就去下载node） npm run build 选在 shells/chrome ...
Vue调试工具devtools
07-27
Vue调试工具devtools是一个浏览器插件，用于帮助开发者在开发Vue.js应用时进行调试。它提供了一系列功能，包括查看组件树、检查组件状态、操作组件属性和事件等。 要使用Vue devtools，首先需要安装它。对于Chrome浏览器，你可以在Chrome Web Store中搜索"Vue.js devtools"并安装。安装完成后，你可以在浏览器的开发者工具中找到Vue选项卡。 一旦安装成功，在你的Vue.js应用中，你可以通过打开浏览器的开发者工具，并切换到Vue选项卡来使用Vue devtools。在Vue devtools中，你可以查看当前应用的组件树，并检查每个组件的状态和属性。你还可以手动修改组件的属性值，以便进行调试。 此外，Vue devtools还提供了一些其他实用的功能，比如事件追踪、性能分析等。它可以帮助你更方便地调试和优化Vue.js应用程序。 需要注意的是，Vue devtools只能在开发模式下使用，生产环境中无法使用。确保你的Vue.js应用在开发环境下运行时，才能正常使用Vue devtools进行调试。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值