谷歌浏览器的开发者插件vue-devtools

用Vue以及webpack来实现Chrome扩展，包括background，devtools pannel，popup，options，content_script，以及热加载。用vue配合webpack实现浏览器扩展，包含热更新，无需重复加载浏览器插件。

以vue3插件为例：下载完解压。将下面的文件拖到扩展程序的页面。

找到src/entry/pupup.js文件。

工欲善其事，必先利其器。提取码: zlss。

谷歌浏览器Vue插件：vue-devtools——开发者必备的调试利器 【下载地址】谷歌浏览器Vue插件vue-devtools 本仓库提供了一个资源文件的下载，该资源文件为谷歌浏览器专用的Vue插件——vue-devtools。vue-devtools是一个强大的工具，旨在帮助开发者更轻松地调试和分析基于Vue.js构...

Vue DevTools 是一个非常实用的浏览器扩展工具，它能够极大地提升前端开发者的效率，特别是在调试 Vue.js 应用时。它提供了丰富的功能，包括但不限于组件树视图的探索、应用状态的检查和编辑、性能分析以及版本检测等。开发者可以直观地看到应用的组件层级结构，实时查看和修改组件状态，还能监测和优化应用的性能问题。此外，DevTools 还提供了对 Vue Router 和 Vue CLI 的支持，大大简化了相关调试工作。

vue-谷歌浏览器安装vue-devtools插件

Chrome 安装Vue插件vue-devtools 【下载地址】Chrome安装Vue插件vue-devtools 这是一个专为Vue.js开发者设计的便捷工具，提供了Vue插件vue-devtools的快速安装版本。通过简单的步骤，您可以将vue-devtools轻松集成到谷歌浏览器中，无需繁琐的配置过程。只需下载、...

1.vue3组件中的模板结构‘可以’没有根标签（按照vue2.o那么些也没有毛病能运行）； 2.使用vue3开发者工具安装 如果当前项目是vue2 谷歌浏览器->右上角三个点->更多工具->扩展程序->这是vue2的开发者工具 如果当前项目是vue3 谷歌浏览器->右上角三个点->更多工具->扩展程序->这是vue3的开发者工具 [vue2和vue3开发者工具下载地址](https://download.csdn.net/download/qq_7313

显示以下内容说明你使用的是Vue2，而插件版本是Vue DevTools v7，v7版本仅支持Vue3。安装vue-devtools插件时，需要卸载其他版本的vue-devtools，否则可能无法使用。显示以下说明你使用的是v5版本，但是还是用不了，问题不详。google商店搜索devtools，选择以下版本。至此，vue-devtools插件成功引入。下载安装后在右上角三个点打开管理拓展程序。在“详情”中打开“允许访问文件网址”开关。完成安装后最好重启浏览器。按F12打开开发者工具。

方法一：直接从谷歌应用商店安装（vue官网有给链接，我这边不能翻墙，我没用） https://v3.cn.vuejs.org/guide/installation.html#vue-devtools 方法二：从github上下载安装 1、从github上下载安装包（链接：https://hub.fastgit.org/vuejs/devtools/tree/main） 不知道为啥我直接下载下来的，运行npn run build 会报错，找了半天没找到解决办法 然后我从这里点进去下...

下载插件，进行拖拽，打开开发者模式即可使用

Chrome(Google) 浏览器安装Vue2、Vue3 Devtools插件方法

vue-devtools 是一个为 Vue.js 开发者设计的 Chrome 插件。它可以让你更轻松地审查和调试 Vue 应用程序。与普通的浏览器控制台工具不同，Vue.js devtools 专为 Vue 的响应性数据和组件结构量身定做。

vue开发者工具可以帮助我们提高开发效率，如果不安装控制台老是现在这些东西，对我这种强迫症患者来说痛苦至极,下面我就介绍下我的安装步骤。

注意事项：1. 关于安装时出现“无法从该网站添加应用、扩展程序、和用户脚本”等问题，大概率是谷歌浏览器版本不是最新版，推荐在浏览器 - 帮助 - 关于 Google Chrome 中进行升级或者重新安装。4、解压缩得到2个文件，其中 `xxx.crx` 文件就是安装包，拖住不放，拖到 '管理扩展程序' 页面。3、下载完成得到的压缩包 `xxx.zip` 必须先解压缩，再安装，不解压的话拖动以后会变成下载文件。1、打开Chrome浏览器 -> 点击右上角三个点 -> 扩展程序 -> 管理扩展程序。

目录ElementsStylesDOM结构 增删属性 模拟元素的伪状态，方便调试Computed LayoutEvent ListenersNetworkApplication资源列表+（可改）本地存储Cookie、WebStorage（localStorage、sessionStorage）Source 调试Page:资源目录Content scripts: 插件Snippets: 便捷测试https://developer.chrome.com/docs/devtools Ancestors 是否