search

vuejs / devtools-v6

⚙️ Browser devtools extension for debugging Vue.js applications.
https://devtools-v6.vuejs.org/
MIT License
24.62k stars 4.15k forks source link

Cannot inspect Vue roots (NgVue) that were added to the DOM after initial page load #1716

Open thousandeyes-fwieland opened 2 years ago

thousandeyes-fwieland commented 2 years ago

Version

6.0.6

Browser and OS info

Firefox 96.0.3 / MacOS 12.1

Steps to reproduce

https://user-images.githubusercontent.com/46812778/153590434-ab87c57a-8a48-452b-9d46-545d1d455f28.mp4

I have a page which is built largely in Angular 1 but with some Vue 2.6.4 components sprinkled in, and as such, there are multiple NgVue roots that pop in and out of existence. The Vue devtools recognises they are there but seems unable to actually inspect them - clicking on some NgVue roots in the picker does not mark them as selected and does not change what is shown in the devtools. The only roots that I can inspect are those that have been present when the page was initially loading. Using the 'refresh' icon button in the top bar does not help.

What is expected?

I can go into any Vue root, including those that have been created at arbitrary times, just like in the previous major version (the one where all the roots were shown in one tree), with maybe a quick devtools refresh to pick up those that were added since the panel was last opened.

What is actually happening?

I can see that the roots are there but can't inspect them.

Akryum commented 2 years ago

Please provide a runnable reproduction. Thanks