devtools

devtools copied to clipboard

Version

6.0.0 and 6.0.0 beta 21

I also tried out the legacy v5.3.4 which is where I first experienced this recently, very similar problem.

Browser and OS info

Chrome Version 98.0.4758.80 (Official Build) (x86_64) Mac Catalina 10.15.7 (19H1519)

Steps to reproduce

1. Open Chrome DevTools
2. Open web page using Vue (in dev env)
3. Navigate around
4. Sometimes result is Vue Devtools panel is empty and requires reloading the Chrome Devtools window.
5. Another option is to reload the page
6. Result is Vue Devtools panel is empty and requires reloading the Chrome Devtools window.

In particular, if I'm in a Vue site, then log off the site (which reloads the page), every single time the Vue Devtools panel goes blank and requires reloading the Chrome Devtools window.

What is expected?

It should not just stop working randomly. It should not go blank and require reloading the Chrome Devtools.

What is actually happening?

It stops working. The tab is there, but it just shows an empty panel with some kind of default image.

---

This has been happening to me all the time, regularly every few minutes or so. Some situations the page needs to reload, and that's when it happens more often than when just navigating around.

The Chrome store does not have Vue Devtools 6.0.4, it's still on v6.0.0. So until that is updated I cannot test the latest build. I have also tried changing my Devtools theme and uninstalled, reinstalled the extension as that helped some people in the other Issues. None of those suggestions worked.

Screenshot of the blank panel v6.0.0 and v6.0.0 beta 21

Screenshot of the panel v5.3.4

Did you try on Firefox to see if it is also affected?

Could you please provide a runnable reproduction so I can run the devtools on it? Thanks

@Akryum I tested it on Firefox and have not been able to replicate the problem. It is using v6.0.4. So perhaps it's specific too Chrome, or somewhere between v6.0.0. and v6.0.4 fixed the issue?

I'm not sure what I can provide you for a runnable reproduction. I provide the steps I have taken, and I'm able to replicate it by just reloading the page at any time. I cannot provide you the code as this is my works site.

I'm going to try loading v6.0.4 from the source code next to see if that changes anything. I assume to use this directories files? https://github.com/vuejs/devtools/tree/main/packages/shell-chrome

Here is some documentation about how to build and test the repo: https://devtools.vuejs.org/guide/contributing.html

I'll set it up when I get some free time. Might not be until the weekend though.

I am experiencing the same issues with 6.0.2 on Chrome / Windows 10. Navigating between my vue.js pages would randomly stop Devtools from working and it throws 'TypeError: sub is not a function' in the console.

@rudongsu There is no sub() call in the devtools so it might come from your page (either in your code or in a library you are using). Still, without a runnable reproduction there is nothing I can do.

@rudongsu maybe your issue is #1686

@rudongsu maybe your issue is #1686

Yes! I realised that I was on the old version of Vuex. Just wondering when is the latest build (6.0.5) gonna be available in Chrome Web Store?

Same issue, when I reload page, the devtool get blank. Also, if I reload chrome devtool, it worked again.

Yes! I realised that I was on the old version of Vuex. Just wondering when is the latest build (6.0.5) gonna be available in Chrome Web Store?

Whenever Google validates it. The time it takes them to review the devtools extension update on Chrome Web Store is out of our control.

@rudongsu There is no sub() call in the devtools so it might come from your page (either in your code or in a library you are using). Still, without a runnable reproduction there is nothing I can do.

This is from vuex.esm.js

My version has updated to v6.0.8 and still has the problem. I'm going to work on the test repo next.

So today when I went to start things up, I was getting some new errors in the console. This was on first page load.

backend.js:702

An error occurred in hook getInspectorState registered by plugin org.vuejs.vue2-internal
callHandlers @ backend.js:702
await in callHandlers (async)
callHook @ backend.js:195
await in callHook (async)
getInspectorState @ backend.js:409
sendInspectorState @ backend.js:2416
(anonymous) @ backend.js:2289
await in (anonymous) (async)
emit @ backend.js:9962
_emit @ backend.js:6595
(anonymous) @ backend.js:6521
(anonymous) @ backend.js:6521
listener @ backend.js:13516
postMessage (async)
n @ proxy.js:1

backend.js:703

Error: Missing module "root" for path "root".
    at backend.js:5260:13
    at Array.reduce (<anonymous>)
    at getStoreModule (backend.js:5256:16)
    at backend.js:4859:26
    at handler (backend.js:679:16)
    at DevtoolsHookable.callHandlers (backend.js:700:17)
    at async DevtoolsApi.callHook (backend.js:195:17)
    at async DevtoolsApi.getInspectorState (backend.js:409:21)
    at async sendInspectorState (backend.js:2416:44)

I then forked and cloned the repo, and followed the directions for "Development" from this page: https://devtools.vuejs.org/guide/contributing.html

I ran yarn run build:watch and yarn run dev:vue3 in parallel and the same problem was happening at http://localhost:8090/ I also ran yarn run dev:vue2 which also had the same problem at it's localhost page.

After that, something with yarn run dev:vue3 was making my browser go nuts, and/or something else was going on with my computer so I restarted it. Came back, and now the two errors from above are not happening, but the initial problem where Vue Devtools stops working was still happening. So I then again ran yarn run build:watch and yarn run dev:vue3 (as well as yarn run dev:vue2), and once again the problem persisted. Reload the page, Vue Devtools stops working and I get the empty screen with the single graphic that I posted previously.

Even though my extension from the Chrome store was at v6.0.8, I still proceeded to test out the "Testing as Chrome addon" step from the link you provided. I loaded the unpackaged extension, loaded up the vue site, and the problem is still happening when reloading the page.

So I then decided to look at the scripts the extension is running. I loaded up devtools://devtools/bundled/devtools_app.html?remoteBase=https://chrome-devtools-frontend.appspot.com/serve_file/@7f0488e8ba0d8e019187c6325a16c29d9b7f4989/&can_dock=true&panel=elements&dockSide=undocked (iframe) and there was a persisten error as followed after opening my vue project.

shared-data.ts:105 [shared data] Master init complete
chrome-extension://dehlobbiaibcfjcegbmdmppgklhnfdaa/devtools.html#/app/app-1/inspector/components:1 Error handling response: TypeError: Cannot read properties of undefined (reading 'events')
    at chrome-extension://dehlobbiaibcfjcegbmdmppgklhnfdaa/build/devtools.js:83473:28
chrome-extension://dehlobbiaibcfjcegbmdmppgklhnfdaa/devtools.html#/app/app-1/inspector/components:1 Unchecked runtime.lastError: Cannot access contents of the page. Extension manifest must request permission to access the respective host.
chrome-extension://dehlobbiaibcfjcegbmdmppgklhnfdaa/devtools.html#/app/app-1/inspector/components:1 Error handling response: TypeError: Cannot read properties of undefined (reading 'events')
    at chrome-extension://dehlobbiaibcfjcegbmdmppgklhnfdaa/build/devtools.js:83473:28
chrome-extension://dehlobbiaibcfjcegbmdmppgklhnfdaa/devtools.html#/app/app-1/inspector/components:1 Unchecked runtime.lastError: Cannot access contents of the page. Extension manifest must request permission to access the respective host.
chrome-extension://dehlobbiaibcfjcegbmdmppgklhnfdaa/devtools.html#/app/app-1/inspector/components:1 Error handling response: TypeError: Cannot read properties of undefined (reading 'events')
    at chrome-extension://dehlobbiaibcfjcegbmdmppgklhnfdaa/build/devtools.js:83473:28
chrome-extension://dehlobbiaibcfjcegbmdmppgklhnfdaa/devtools.html#/app/app-1/inspector/components:1 Unchecked runtime.lastError: This request exceeds the MAX_CAPTURE_VISIBLE_TAB_CALLS_PER_SECOND quota.
chrome-extension://dehlobbiaibcfjcegbmdmppgklhnfdaa/devtools.html#/app/app-1/inspector/components:1 Error handling response: TypeError: Cannot read properties of undefined (reading 'events')
    at chrome-extension://dehlobbiaibcfjcegbmdmppgklhnfdaa/build/devtools.js:83473:28
chrome-extension://dehlobbiaibcfjcegbmdmppgklhnfdaa/devtools.html#/app/app-1/inspector/components:1 Unchecked runtime.lastError: This request exceeds the MAX_CAPTURE_VISIBLE_TAB_CALLS_PER_SECOND quota.

Vue Devtools was working at this point. I reloaded the page to this

    at chrome-extension://dehlobbiaibcfjcegbmdmppgklhnfdaa/build/devtools.js:83473:28
chrome-extension://dehlobbiaibcfjcegbmdmppgklhnfdaa/devtools.html#/app/app-1/inspector/components:1 Unchecked runtime.lastError: This request exceeds the MAX_CAPTURE_VISIBLE_TAB_CALLS_PER_SECOND quota.
shared-data.ts:86 [shared data] Master init in progress...
shared-data.ts:105 [shared data] Master init complete

Vue Devtools was still working. I refreshed the page one more time and then this happened when Vue Devtools stopped working:

devtools.js:75 
devtools.js:75 
{isException: true, value: "TypeError: Cannot read properties of null (reading…')\n    at <anonymous>:5:32\n    at <anonymous>:7:7"}
isException: true
value: "TypeError: Cannot read properties of null (reading 'appendChild')\n    at <anonymous>:5:32\n    at <anonymous>:7:7"
[[Prototype]]: Object
shared-data.ts:86 [shared data] Master init in progress...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:122 [shared data] Master init retrying...
shared-data.ts:128 [shared data] Master init failed
(anonymous)	@	shared-data.ts:128
setInterval (async)		
(anonymous)	@	shared-data.ts:119
initSharedData	@	shared-data.ts:78
(anonymous)	@	app.ts:71
(anonymous)	@	WelcomeSlideshow.vue:20
__async	@	WelcomeSlideshow.vue:20
(anonymous)	@	app.ts:55
(anonymous)	@	devtools.js:41
(anonymous)	@	devtools.js:77
s	@	VM49:1
_onCallback	@	VM49:1
_onMessage	@	VM49:1

At this point, I'm not sure what else I can do to test this anymore. Vue Devtools is failing consistently and all of the time.

Then when I went to turn off the unpackaged extension I saw there was an extension error.

Yet the Firefox v6.0.4 extension still works perfectly and as intended. Same vue projects tested with no problems. It only seems to be happening for me on Chrome.

@webdevnerdstuff

You forgot to put the actual error messages here, I only see stack traces.

I ran yarn run build:watch and yarn run dev:vue3 in parallel and the same problem was happening at http://localhost:8090/ I also ran yarn run dev:vue2 which also had the same problem at it's localhost page.

Were you inspecting the devtools development shell with the "real" devtools? What was the error?

So now I just updated Chrome to Version 98.0.4758.102 (Official Build) (x86_64). Still have the problem, but now the error that I said went away after I rebooted my computer... is now back. The error was actually in my last message, but the github formatting removed the first line on each of them. This time they should be visible. But this doesn't take away from the fact that I was getting errors and the same problem with the code from this repo, so it's not my projects that are the issue.

backend.js:702

An error occurred in hook getInspectorState registered by plugin org.vuejs.vue2-internal
callHandlers @ backend.js:702
await in callHandlers (async)
callHook @ backend.js:195
await in callHook (async)
getInspectorState @ backend.js:409
sendInspectorState @ backend.js:2416
(anonymous) @ backend.js:2289
await in (anonymous) (async)
emit @ backend.js:9962
_emit @ backend.js:6595
(anonymous) @ backend.js:6521
(anonymous) @ backend.js:6521
listener @ backend.js:13516
postMessage (async)
n @ proxy.js:1

backend.js:703

Error: Missing module "root" for path "root".
    at backend.js:5260:13
    at Array.reduce (<anonymous>)
    at getStoreModule (backend.js:5256:16)
    at backend.js:4859:26
    at handler (backend.js:679:16)
    at DevtoolsHookable.callHandlers (backend.js:700:17)
    at async DevtoolsApi.callHook (backend.js:195:17)
    at async DevtoolsApi.getInspectorState (backend.js:409:21)
    at async sendInspectorState (backend.js:2416:44)

So the error you have is actually #1669? (If it is, please try posting a reproduction, I don't reproduce it on the repo dev shell, maybe another reproduction could help me.) This shouldn't stop the devtools from working apart from the Vuex inspector, but your initial post suggested that the devtools stopped working altogether?

Here is what I get on the Vue 2 dev shell, with no errors:

I think the latest version (v6.0.12) or another version in between may have resolved the issue. It hasn't been going blank for me anymore I think. So this Issue might be resolved now.

Guess I spoke too soon. Was doing pretty good until today, where it's been having the issue again. Ugh.

google

I was just having this issue, it looks like it was because I was still using the Vue Devtools Beta (6.0.0.21). When I uninstalled that and installed the latest version of Vue Devtools (the non-beta version), the problem went away.

Not sure if this is new/useful, but I have lately been seeing random "staleness" in the Vue dev tool (2.6.14) data values after using it for a couple hours including many page refreshes. The DOM view seems fine, just the data view gets "stale". Clicking "Force refresh" does not fix it, but closing the dev tool and reopening it seems to. This is in the Chrome browser 108.0.5359.73.

@mdr1384 same issue here.

Stays like this forever.

Running v6.4.5 on Firefox 108.0b9 (macOS 13) and I can confirm this has been happening to me for a while, getting the "disconnection" icon often. Switching tabs and letting it sit for a while, then coming back to it will often trigger the bug.

I too am experiencing the same thing on Firefox latest, also the Vue tools keeps randomly doing a full refresh, and when it does, I lose my place and have to navigate back into whatever component or what not. It is extremely annoying. This never happened in earlier versions.

Edit: Running v. 6.4.5

@bdanielbell I was also experiencing the full refresh problem and came across this issue, but noticed it was reported separately in #1974. The fix for that has been merged and a new release was tagged in v6.5.0, but it doesn't seem to have made its way to AMO yet.

I get the same issue, every 30 seconds it just reloads itself - SUPER annoying!