macOS下Firefox/Chrome中无法通过Toggle按钮或组件选择功能打开Vue Devtools的问题求助

各位Vue开发者们好，我最近碰到了一个挺棘手的小问题，想在这里求助大家：

环境信息 #

• 操作系统：macOS（测试过Sonoma和Ventura版本）
• 测试浏览器：最新版Firefox、最新版Chrome
• Vue Devtools版本：7.7.7
• Vue版本：3.4.21
• Devtools安装方式：浏览器扩展

问题描述 #

我在使用Vue Devtools的时候遇到了一个奇怪的情况：当我点击扩展图标里的**“Toggle Vue Devtools”**按钮，或者从组件选择器的下拉菜单里选择某个组件时，Devtools面板完全没有任何反应。但如果我右键页面，打开浏览器的检查器，手动切换到Vue标签页，Devtools就能正常工作，所有功能都没问题。

预期与实际行为 #

• 预期行为：点击“Toggle Vue Devtools”按钮或者通过组件选择器选中组件时，应该能直接打开Vue Devtools面板，并且自动聚焦到选中的组件上
• 实际行为：执行上述操作后，Vue面板既不打开也不更新，完全没有响应，而且浏览器控制台里也看不到任何和Vue Devtools相关的报错信息

复现步骤 #

• 把一个Vue 3项目在浏览器中打开
• 点击浏览器工具栏上的Vue Devtools扩展图标
• 尝试使用以下两个功能：
  1. 点击“Toggle Vue Devtools”选项
  2. 从组件选择器下拉菜单中选择一个组件
• 可以看到Vue面板完全没有任何响应
• 右键页面，选择“检查”，手动切换到Vue标签页→所有功能正常运行

补充说明 #

• 这个问题在macOS上的Chrome和Firefox浏览器里都稳定出现，不是单一浏览器的问题
• 我的项目使用的是Vue 3.4 + Vuetify 3.6.0
• 检查过浏览器控制台，没有发现任何和Vue Devtools相关的报错

内容来源于stack exchange