谷歌浏览器安装 devtools 调试工具

最新推荐文章于 2025-10-14 10:30:25 发布
转载 最新推荐文章于 2025-10-14 10:30:25 发布 · 466 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://www.jianshu.com/p/e890de51fe88
文章标签：

#vue.js

本文档介绍了如何解决使用Vue Devtools高版本打包时遇到的'--hide-modules'错误，通过回退到v5.1.1版本进行打包。接着详细阐述了安装依赖、执行打包命令、修改manifest.json文件以及在Chrome中加载扩展的步骤，帮助开发者成功导入Vue Devtools到Chrome浏览器。

1、github下载devtools源码

用dev版本（@5.3.4）打包报未知错：Error: Unknown option '--hide-modules'
所以用的低版本地址：https://github.com/vuejs/vue-devtools/tree/v5.1.1

2、npm install 安装依赖

3、npm run build 打包

4、修改：shells/chrome/manifest.json中的"persistent": false。将值改为true

5、打开谷歌浏览器，输入 chrome://extensions/ ，选择开发者模式，加载已解压的扩展程序，选择Chrome导入即可。

 

给谷歌浏览器安装vue调试工具:vue-devtools
GeniusXYT的博客
02-20 874
安装vue-devtools一、拉取项目二、install、build三、添加扩展 一、拉取项目 vue-devtools：git地址（master分支） 非master分支在build的时候会报错。 二、install、build 1、打开cmd进入项目目录，可以选择npm/cnpm/yarn 进行install；如果有类似503等错误可能需要删掉node_modules尝重试几次。 npm install cnpm install yarn install 2、然后输入 npm run bu
Chrome安装Vue插件vue-devtools
专注java二开部署
03-27 3002
除了作为 Chrome 扩展程序运行外，Vue Devtools 还提供了一个独立的桌面应用，支持更多的功能和更丰富的界面。通过在开发者工具中启用性能记录，并在 Vue Devtools 中查看分析，你可以了解组件渲染的耗时，找出性能瓶颈。现在，你应该能在开发者工具中看到一个名为 "Vue" 的新标签页，这就是 Vue Devtools 的主界面。如果你的应用使用了 Vuex 作为状态管理库，Vue Devtools 会提供一个专门的 Vuex 标签页，用于查看和调试 Vuex store 的状态变化。
Chrome DevTools 使用指南
最新发布
REDcker的博客
10-14 404
Chrome DevTools是Chrome浏览器内置的强大Web开发工具集，提供多种调试和分析功能。主要功能包括：元素面板（实时修改HTML/CSS）、控制台面板（执行JavaScript代码）、网络面板（监控请求）、性能面板（分析页面性能）、应用面板（管理存储）和来源面板（调试JavaScript）。高级功能涵盖工作区、设备模拟、安全检测等，特别针对WebRTC提供专用调试工具。使用建议包括开发阶段实时监控、性能优化和问题排查。该工具能显著提升开发效率，但需注意其浏览器兼容性和性能影响。建议结合官方文档
在谷歌浏览器中安装vue项目调试工具 vue-devtools详细安装步骤
baoziqyp的博客
02-04 837
谷歌浏览器安装vue-devtools插件 1. 前往GitHub下载vue-devtools文件 文件地址: https://github.com/vuejs/vue-devtools/tree/master 2.在GitHub中下载时一定要选择master分支，不然在安装依赖是出现问题，如图所示 3.文件下载完成后，进入dos窗口，然后使用cd命令进入刚下载的文件加的路径下，文件打开命令栏窗口 ，输入命令npm install 安装依赖 4.依赖安装完成后，运行命令 npm run build 进行
Chrome（谷歌浏览器）安装Vue插件vue-devtools(最新版+图文详解附带免费下载地址)
m0_56245036的博客
08-13 8326
链接: https://pan.baidu.com/s/1L21kNwu8rp2fHkpz5Fwu-w?pwd=n5uu 提取码: n5uu。因为Chrome浏览器的扩展商城的一些问题，需要进行一些特殊操作，咱们废话少说。在浏览器地址栏输入chrome://extensions/然后把刚刚下载文件夹中的xxx.crx,拖入浏览器当中。不会拖可以看一下文件中的视频。实现去下载百度网盘下载。...
Chrome浏览器 安装Vue插件vue-devtools
A_aspectJ的博客
03-30 8153
vue-devtools 是一个为 Vue.js 开发者设计的 Chrome 插件。它可以让你更轻松地审查和调试 Vue 应用程序。与普通的浏览器控制台工具不同，Vue.js devtools 专为 Vue 的响应性数据和组件结构量身定做。
vue2.0-devtools谷歌浏览器调试工具和vue3.0-devtools谷歌浏览器调试工具
08-19
该资源包括vue2.0-devtools谷歌浏览器调试工具和vue3.0-devtools谷歌浏览器调试工具，具体安装方法参考我的博客https://blog.csdn.net/dxnn520/article/details/121088688，如还不会，可私信我。
Vue DevTools调试工具的使用
11-27
- 启用开发者模式：在谷歌浏览器中，输入`chrome://extensions/`进入扩展管理页面，然后勾选右上角的“开发者模式”选项。 - 加载解压的扩展：点击“加载已解压的扩展程序”，选择Vue DevTools的`shells/chrome`...
Vue3谷歌浏览器调试工具Vue.js devtools 6.1.4
05-30
Vue.js devtools 6.1.4 是一款专为Vue3开发者设计的谷歌浏览器扩展工具，它极大地简化了Vue应用程序的调试过程。这款工具能够帮助前端开发者深入理解Vue3的应用状态，实时追踪组件数据变化，定位并解决问题，提高...
谷歌浏览器vue插件vue-devtools
04-10
这个插件可以在谷歌浏览器（Chrome）中安装，帮助开发者调试、检查和优化Vue应用。 Vue Devtools 提供了以下主要功能： 1. **组件树**：在Vue Devtools的“Components”面板中，你可以查看应用的组件结构。每个...
火狐调试工具-DevTools
weixin_30472035的博客
07-02 520
狐调试工具-DevTools 咱们做写js代码的时候，遇到的一个最大的问题就是调试问题，很多开发者在写js代码的时候，经常都非常痛苦。但是我们如果掌握好相应的调试工具，那么就可以比较游刃有余的解决js的调试问题。工欲善其事,必先利其器。 调试工具比较好的有火狐的firebug,另外chrome的自带调试工具也非常不错(英文版)。 掌握好这些调试工具,...
Chrome中devtools安装
宝拉天天想放假
08-24 1818
devTool安装
# 谷歌 chrome 浏览器中的 vuejs devtools 插件工具的安装方法
热门推荐
段子手168的博客
04-30 1万+
github 下载地址：https://github.com/vuejs/vue-devtools如下载：vue.js-devtools-4.1.3.zippage=9。
vue-谷歌浏览器安装vue-devtools插件
weixin_49114503的博客
02-13 2717
vue-谷歌浏览器安装vue-devtools插件
Chrome/edge 浏览器中安装 Vue Devtools 插件
terrible_code的博客
03-27 2545
Chrome/edge 浏览器中安装 Vue Devtools 插件
在Chrome(谷歌浏览器)中安装Vue.js devtools开发者工具及解决Vue.js not detected报错
又菜又爱玩的小熊
07-25 5444
文章目录一、Vue.js devtools开发者工具安装1.打开谷歌浏览器——点击扩展程序——选择管理扩展程序2.先下载添加一个谷歌助手到扩展程序中（根据提示进行永久激活）3.点击谷歌浏览器的应用商店4.输入Vue.js devtools——搜索——选择下载二、解决Vue.js not detected报错1.打开谷歌浏览器——点击扩展程序——选择管理扩展程序2.点击详情3.开启允许访问文件地址总结 一、Vue.js devtools开发者工具安装 1.打开谷歌浏览器——点击扩展程序——选择管理扩展程序
chrome 安装devtools
前端的路上
04-28 1268
依赖安装完成后，开始打包build。需要注意，这里的命令需要带watch，如果不带，会出错。即出现successfully 就可以退出了。出现上面画面，ctrl+c退出即可。打开chrome浏览器扩展程序。选择shell-chrome。进入下载的目录安装依赖。
Chrome浏览器安装devtools开发者工具
Liberty_yes的博客
10-14 4649
Chrome浏览器安装devtools开发者工具 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示； 全新的 KaTeX数学公式 语法； 增加了支持甘特图的mermaid语法1 功能； 增加了 多屏幕编辑 Ma
Vue Devtools 在谷歌浏览器的安装使用及常见问题解决方案
一起探索IT的世界
04-14 1151
您可以充分利用 Vue Devtools 提升 Vue.js 应用的开发效率和调试体验。无论是简单的组件调试还是复杂的状态管理问题，Vue Devtools 都能提供强大的支持。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值