Unable to open Vue Devtools from Toggle or Select Components in Firefox/Chrome on macOS

[YasinDehfuli]

Environment:

• OS: macOS (e.g., Sonoma or Ventura)
• Browsers tested: Firefox (latest), Chrome (latest)
• Vue Devtools version: [7.7.7]
• Vue version: [e.g., Vue 3.4.21]
• Devtools installation method: Browser extension

Description: When trying to open the Vue Devtools panel using the “Toggle Vue Devtools” button or by selecting a component from the Components dropdown, nothing happens. However, if I open the panel through the browser's Inspect menu and manually switch to Vue, it works as expected.

Expected Behavior: Clicking “Toggle Vue Devtools” or selecting a component should open the Vue Devtools panel and focus on the selected component.

Actual Behavior: Nothing happens on those interactions. No error is shown. The panel does not open or update.

Steps to Reproduce:

• Open a Vue 3 project in the browser.
• Click on the Vue Devtools browser extension icon.
• Try to use: “Toggle Vue Devtools” “Select a component” from the component picker dropdown
• Observe that the Vue panel does not open or respond.
• Right-click the page, click Inspect, and manually open the Vue tab → Works fine.

Additional Notes: The issue is consistent across both Chrome and Firefox on macOS. The project uses Vue 3.4 with Vuetify 3.6.0 No errors in the console related to Vue Devtools.