Skip to content

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

@YasinDehfuli

Description

@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.

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions