在chrome调试vue，vue调试器离线安装（vue2-devtools、vue3-devtools）

已于 2022-09-05 10:47:05 修改
阅读量4k 收藏 2
点赞数
分类专栏： 编译 文章标签： vue-devtools vue调试器 离线安装
于 2019-08-09 16:51:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuxin00020/article/details/98873557
版权
本文提供了一种离线安装vue-devtools的方法，包括从gitee获取源码或直接在博主资源中下载。首先获取安装包，然后在Chrome扩展程序中选择【已解压的扩展程序】导入，记得解压文件夹并选择chrome文件夹。安装完成后，可能需要手动启用调试器。对于调试Vuex，还需额外设置。
摘要由CSDN通过智能技术生成

vue3调试工具点击这里下载，也可私信我

1、先获取vue-devtools安装包

  1. 可走gitee获取源码，点击进入gitee，clone之后选择yarn或npm方式安装依赖包，在此就不赘述
  2. 在本人博客资源下载，解压即可使用，点击下载（推荐此方法，会省去一些繁琐的步骤）

2、打开chrome扩展程序

直接在地址栏输入chrome://extensions/，或者使用视图打开（alt+e ——>更多工具——>扩展程序）

3、添加扩展程序

3.1 在本人资源下载的处理方式（记得要解压）

  • 选择【已解压的扩展程序】，找到解压好的文件夹，进入文件夹，选中chrome文件夹，点击【选择文件夹】

最低0.47元/天 解锁文章
山野里的小菊花
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
chrome插件 vue-devtools离线安装包
04-27
版本5.3.3，从github下载的源码自己build出来的。 解压文件，从谷歌扩展程序里加载文件夹即可。
vue devtools chrome扩展离线下载
08-24
vue devtools chrome扩展离线下载
谷歌浏览器chrome的vuejs devtools 插件的安装
weixin_30677475的博客
12-14 3438
（推荐方法2） 安装方法1: 需正常打开chrome商店，搜索vuejs devtools 安装。chrome://extensions/ 开发者工具-扩展程序下启用； 方法2： github下载插件，npm包安装依赖，拖入浏览器扩展程序 具体操作： 1 . 下载chrome扩展插件。 在github上下载压缩包并解压到本地，github下载地址：https://github.com/v...
Vue调试工具vue-devtools的安装与使用_vue调试工具安装
最新发布
2401_84435192的博客
07-04 335
主要介绍vue-devtools的安装与使用。秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！高级前端工程师必备资料包。
Chrome谷歌浏览器离线安装vue-devtool
codezha的博客
01-28 1340
开发vue项目过程中vue-devtool可以帮助我们只管看到对应的数据，方便调试，安装方法有以下两种 1、在Chrome商店，搜索vue-devtool，安装后启用（网络可能不通） 2、GitHub下载插件，完成安装并启用 下面我们来介绍下方法二的详细操作步骤 下载插件 下载链接 下载后解压 安装依赖 vue-devtools-master文件夹下先后执行以下命令 npm install npm run build 命令执行完成后，会在shell->chrome目录下生成相应文件 浏览器安
vue devtools离线扩展包（不是完整的去我的资源下载完整的）
01-09
前言vue-devtools是一款基于chrome游览器的插件,用于调试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-chrome.zip
06-06
7. **Vue调试器**：提供了一些专门的调试工具，如强制重新渲染，跳过副作用等。 在Chrome浏览器中安装Vue DevTools的步骤大致如下： 1. 首先，你需要进入Chrome的`chrome://extensions/`页面。 2. 开启右上角的...
vue调试工具vue-devtools安装及使用方法
12-12
5. **安装 Chrome 扩展**：打开谷歌浏览器，进入扩展程序页面（`chrome://extensions/`），开启开发者模式，然后点击“加载已解压的扩展程序”，选择 `vue-devtools/shells/chrome` 文件夹，这样就成功安装了 Vue ...
vue-devtools-5.1.1
12-29
这个"vue-devtools-5.1.1"版本是Google开发的Vue DevTools的一个特定版本，主要用于支持Vue.js 2.x的应用。 Vue DevTools 5.1.1 版本主要特性包括： 1. **组件树视图**：展示应用中的所有Vue组件及其层级结构，...
Vue调试神器vue-devtools安装方法
11-29
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。 安装方式 1.chrome商店直接安装： vue-devtools可以从chrome商店直接...
vue-devtools离线版安装
06-16
vue.js的附属工具vue-devtools的本地版本的插件，直接拖动安装即可使用，版本为5.3.3，同时附带有其他版本工具
vuedevtools离线包安装
03-23
下载完直接把解压的文件拖到扩展程序中，即可使用，无需网上的npm install ,run build等复杂操作
vue devtools 最新版 4.1.1 chrome扩展离线下载
01-26
文件 MD5: 5605A7D80C5D79C28434C149F7438961 SHA1: B06A555A098073E60856E81A8C00263723D7E1A4 Vue Devtools 4.0 有哪些新内容 https://juejin.im/post/5a676c33f265da3e5b32f43c?utm_source=gold_browser_extension 如何离线安装Chrome插件? https://jingyan.baidu.com/article/e5c39bf5cc39cc39d
vue2.X 问题2： vue-devtools离线安装-附件资源
03-05
vue2.X 问题2： vue-devtools离线安装-附件资源
vue devtools 最新版 3.1.7 chrome扩展离线下载
12-27
如何离线安装Chrome插件? https://jingyan.baidu.com/article/e5c39bf5cc39cc39d76033cd.html
vue-devtools浏览器调试工具离线安装教程
binggoling
06-19 3092
vue-devtools浏览器调试工具离线安装是下载源码，通过本地编译之后，在放到浏览器上。
vue-devtools浏览器插件离线安装的两种方式
yuanjinshenglife的专栏
03-04 2502
vue-devtools浏览器插件离线安装的两种方式
【Vue.JS】Chrome 调试工具 vue-devtools 离线安装
新青年1号
05-20 4683
使用 Chrome 浏览器运行 Vue 代码时，Chrome 会在控制台给出友好建议：下载 Vue Devtools 进行调试。 vue-devtool 是基于 Chrome 的一款调试神器。使用它开发 Vue，可以大幅度的提升开发效率。 首先，按照 Chrome 浏览器 console 提示，访问 github 地址。https://github.com/vuejs/vue-devt...
谷歌安装vue-devtools以及上线项目关闭vue-devtools调试
08-10
对于谷歌浏览器安装 Vue Devtools，您可以按照以下步骤进行操作： 1. 打开谷歌浏览器并访问 Chrome Web Store（[https://chrome.google.com/webstore](https://chrome.google.com/webstore)）。 2. 在搜索框中输入 "Vue Devtools" 并按下 Enter 键。 3. 在搜索结果中找到 Vue Devtools 插件，并点击 "添加至 Chrome" 按钮。 4. 在弹出的确认对话框中，点击 "添加扩展程序" 完成安装。 安装完成后，您可以在 Chrome 浏览器的扩展程序栏中找到 Vue Devtools 图标。点击该图标，您将能够在开发者工具中查看 Vue 组件树、状态和事件等信息。 关于上线项目时如何关闭 Vue Devtools 的调试功能，您可以按照以下两种方式进行操作： 1. 移除 Vue Devtools 插件： - 在谷歌浏览器的扩展程序栏中找到 Vue Devtools 图标。 - 右键点击图标，选择 "从 Chrome 中移除"。 - 在弹出的确认对话框中点击 "移除" 完成移除操作。 2. 禁用 Vue Devtools 插件： - 在谷歌浏览器的扩展程序栏中找到 Vue Devtools 图标。 - 右键点击图标，选择 "管理扩展程序"。 - 在弹出的扩展程序页面中找到 Vue Devtools，并点击 "详细信息"。 - 在详细信息页面中找到 "启用" 开关，并将其关闭。 通过以上两种方式之一，您可以关闭 Vue Devtools 的调试功能，使其在上线项目时不再生效。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值