component selection tool not working

[ali2966]

Vue devtools version

6.6.1

Link to minimal reproduction

None

Steps to reproduce & screenshots

click on component selection tool, try to inspect any component, it doesn't work. after closing and opening up the devtools, it will work.

What is expected?

component being selected

What is actually happening?

component not being selected

System Info

System:
    OS: Linux 6.5 Ubuntu 22.04 LTS 22.04 (Jammy Jellyfish)
    CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
    Memory: 10.15 GB / 19.41 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 14.21.3 - ~/.nvm/versions/node/v14.21.3/bin/node
    npm: 6.14.18 - ~/.nvm/versions/node/v14.21.3/bin/npm
  Browsers:
    Chrome: 115.0.5790.110

Any additional comments?

also, sometimes the devtools freezes and stops working

[Parsa361]

I have the same problem, I wonder why no one mentioned it in these two weeks

[taigabrew]

Same problem. Component selection isn't working after hot reload. Personaly saw this with Webpack and Vite. This behaviour started to appear after DevTools major update.

Chrome 122 / MacOS 14.2.1

[jiikoosol]

I have the same problem. Hot reload in some way "freezes" the Vue devtools and requires closing and reopening Chrome's dev-tools, and page refresh after that.

Chrome 122.0.6261.112 / MacOS 14.3.1 / Vite 4.5.2 / Vue 3.4.15

Edit: added Vue version

[gregveres]

I am seeing the same problem. I have to close the debugger and start the debugger again. I am using vue 2.7 with webpack 4. Oh, I can't wait to be able to move to vue 3 and vite.

[june07]

I am seeing the same problem. I have to close the debugger and start the debugger again. I am using vue 2.7 with webpack 4. Oh, I can't wait to be able to move to vue 3 and vite.

Unfortunately, the same persists with Vue 3 and Vite! me: Vue 3.4.21, Vite 5.0.11

[idoomguy]

I have exact same problem, after the last major devtools update.

[didaquis]

I have same problem on macOS using Chrome.

[n4ks]

Same problem for a long time

[ghost]

Since the update the devtools are barely usable, every HMR breaks the vue-devtools and only become usable again after the browser devtools are reopened.

In my case Nuxt v3.11.1 / Vue 3.2.21

[VanillaTank]

Same problem for a long time, Chrome

[taylordragoo]

I get the same issue using Chrome and Firefox on macOS. Luckily on Chrome I can right-click and select 'Reload Frame' which reloads the devtools window and the components are updated as expected. As far as I'm aware Firefox does not have the ability to reload the devtool frame and therefore you must close the devtools window and re-open it.

[DenisTHEVENOT]

+1 same problem. @taylordragoo thanks for the hack 👍

[Akryum]

Is this still an issue with 6.6.3?

[gregveres]

@Akryum I just tried to reproduce this using 6.6.3 and component selection was happening properly every time, including after several HMRs.

So I would say that 6.6.3 fixed. Very much appreciated!

[taylordragoo]

I can confirm I'm on 6.6.3 and still having the same issue of the devtools becoming unresponsive.

[gregveres]

@taylordragoo this issue was for the component selection not working. DevTools still locks up for me on 6.6.3 too, but I have not had a situation where component selection stopped working when DevTools was not locked up. The locking up is another issue in Github.

Also, in case you didn't see the "work around", you can right click on the DevTools window and say "Reload frame" and have DevTools come back to life.