Vue调试：vue.js devtools (firefox浏览器，火狐浏览器)

vue-devtools (firefox浏览器，火狐浏览器) vuedevtools

 

 

vue-devtools (firefox浏览器) 安装过程

 

打开firefox浏览器，使用快捷键【Ctrl+Shift+A】打开组件管理列表，并搜索vue

 

 

安装

 

 

 

重启Firefox

 

访问一个Vue应用，打开 开发者工具

 

======================================

vue.js devtools (firefox浏览器，火狐浏览器)

在开发者工具栏没有显示Vue

 

确保你安装的Vue Devtools版本与你的Vue.js版本兼容。有时候，新版本的Vue可能不兼容旧版本的Vue Devtools，或者反之。可以尝试更新或降级Vue Devtools。

版本 7.7.7

 

 ======================================

如何升级或降级 Vue Devtools

降级 Vue Devtools

由于 Chrome 和 Firefox 的扩展商店通常不允许用户直接降级扩展，你通常需要手动下载旧版本的扩展文件。以下是通过手动安装旧版本的方法：

通过下载旧版本

1. ‌查找旧版本‌: 在网上搜索“Vue Devtools 旧版本下载”，找到可靠的来源下载旧版本的 .crx 或 .xpi 文件。例如，可以从 GitHub 的 releases 页面找到旧版本。
2. ‌安装旧版本‌:
   • ‌对于 Chrome‌:
     • 首先，访问 chrome://extensions/。
     • 开启“开发者模式”。
     • 点击“加载已解压的扩展程序”，选择下载的文件夹。
   • ‌对于 Firefox‌:
     • 访问 about:debugging#/runtime/this-firefox。
     • 点击“加载临时附加组件”，选择下载的 .xpi 文件。

======================================

Vue Devtools 和 Vue 版本对应关系

Vue Devtools 与 Vue 版本对应关系

1. ‌Vue Devtools 5.x‌

   • ‌Vue 2.x‌：完全兼容。
   • ‌Vue 3.x‌：部分功能兼容，但不完全支持 Vue 3 的 Composition API 和其他新特性。例如，它可能无法很好地显示 Composition API 中的响应式数据。

2. ‌Vue Devtools 6.x‌

   • ‌Vue 2.x‌：基本兼容，但可能存在一些限制。
   • ‌Vue 3.x‌：提供了更好的支持，能够更好地处理 Vue 3 的新特性和 Composition API。

======================================

Vue Devtools 7 与 Vue 版本兼容性

截至2023年，Vue Devtools 7 主要支持 Vue 2 和 Vue 3。这意味着你可以在开发 Vue 2 和 Vue 3 项目时使用 Vue Devtools 7 来提高开发效率。

    ‌Vue 2.x‌：
        Vue Devtools 7 支持 Vue 2.x 系列，包括 2.0、2.1、2.2、2.3、2.4、2.5、2.6 等。

    ‌Vue 3.x‌：
        从 Vue 3 开始，Vue Devtools 7 也提供了对 Vue 3 的支持。这意味着你可以使用同一套工具来调试你的 Vue 3 项目。Vue 3 在架构上与 Vue 2 有较大差异，特别是在响应式系统和编译器方面，但 Vue Devtools 能够很好地处理这些差异，提供类似的功能和体验。

======================================

如何下载旧版本的Vue Devtools

 

https://github.com/vuejs/devtools-v6

https://devtools-v6.vuejs.org/

 Vue2 --- vue_js_devtools-6.6.3.xpi

 

各种版本：

https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/versions/

 

======================================

https://devtools.vuejs.org/