Vue Devtools randomly stops working #1697

webdevnerdstuff · 2022-02-09T19:25:13Z

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

Open Chrome DevTools
Open web page using Vue (in dev env)
Navigate around
Sometimes result is Vue Devtools panel is empty and requires reloading the Chrome Devtools window.
Another option is to reload the page
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

Akryum · 2022-02-09T21:39:59Z

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

Akryum · 2022-02-09T21:52:43Z

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

webdevnerdstuff · 2022-02-09T22:14:28Z

@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

Akryum · 2022-02-09T22:33:13Z

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

webdevnerdstuff · 2022-02-09T22:36:22Z

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

rudongsu · 2022-02-10T02:46:45Z

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.

Akryum · 2022-02-10T09:23:30Z

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

Akryum · 2022-02-10T10:19:00Z

@rudongsu maybe your issue is #1686

rudongsu · 2022-02-11T03:15:33Z

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

jiaqidegege · 2022-02-11T03:30:41Z

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

Akryum · 2022-02-11T10:38:38Z

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.

webdevnerdstuff · 2022-02-13T20:25:16Z

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

webdevnerdstuff · 2022-02-13T21:41:20Z

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.

webdevnerdstuff · 2022-02-13T21:48:18Z

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

webdevnerdstuff · 2022-02-13T21:52:47Z

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.

Akryum · 2022-02-14T10:11:51Z

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

webdevnerdstuff · 2022-02-15T18:22:53Z

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)

Akryum · 2022-02-15T18:57:42Z

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?

Akryum · 2022-02-15T18:59:12Z

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

webdevnerdstuff · 2022-02-21T00:38:46Z

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.

webdevnerdstuff · 2022-02-23T20:45:43Z

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

journeywithIT · 2022-02-28T11:34:28Z

google

NathanWailes · 2022-06-27T01:50:24Z

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.

mdr1384 · 2022-12-06T14:16:56Z

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.

Thinkro · 2022-12-14T14:33:38Z

@mdr1384 same issue here.

Stays like this forever.

joallard · 2022-12-18T03:27:06Z

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.

bdanielbell · 2023-01-26T13:28:26Z

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

djpowers · 2023-01-26T13:40:12Z

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

ghost · 2023-02-02T18:57:59Z

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

bdanielbell · 2023-02-04T14:25:13Z

Tried to build 6.5.0 extension for firefox, but it failed with all kinds of errors. Not even going to bother trying to figure it out, I have too much work to do. Going to remove 6.4.5 and fallback to the legacy version. I can't deal with the constant crashing and refreshing anymore.

bitfactory-oussama-fadlaoui · 2023-10-04T13:07:46Z

Will this ever be picked up?

philharmonie · 2023-10-27T11:06:31Z

The issue is still persistent on latest Chrome version (118.0.5993.117 arm64), macOS Sonoma 14.0 (MacBook Pro 14" 2023 M2 Pro), Vue.js devtools Version 6.5.1, Vue 3.3.4.
I got all unexpected issues, that have been described here:

Vue tab not appearing at all randomly
Loading Spinner in Vue Tab forever randomly
Component not loading randomly. When I click it, it says "Select a Component"

xxholly32 · 2024-02-20T01:37:01Z

The issue is still persistent on latest Chrome version (118.0.5993.117 arm64), macOS Sonoma 14.0 (MacBook Pro 14" 2023 M2 Pro), Vue.js devtools Version 6.5.1, Vue 3.3.4. I got all unexpected issues, that have been described here:

Vue tab not appearing at all randomly

Loading Spinner in Vue Tab forever randomly

Component not loading randomly. When I click it, it says "Select a Component"

Vue.js devtools Version 6.6.1, Vue 3.4.5 , same problem

n4ks · 2024-04-16T08:10:45Z

After upgrading to Vue 3, the plugin constantly stop working, won't allow me to select an element, won't update the state. I literally have to close my browser after 1-2 minutes of working with the component or after refreshing the page. I've been using this plugin for over two years with Vue 2, but it's becoming impossible to use it with Vue 3.

bitfactory-oussama-fadlaoui · 2024-09-23T10:27:55Z

How is this issue, as important as it is, being ignored by the development team...

Akryum added the bug label Feb 9, 2022

Akryum added need repro and removed bug labels Feb 9, 2022

This comment was marked as off-topic.

Sign in to view

webdevnerdstuff closed this as completed Feb 21, 2022

webdevnerdstuff reopened this Feb 23, 2022

Vue Devtools randomly stops working #1697

Vue Devtools randomly stops working #1697

Comments

webdevnerdstuff commented Feb 9, 2022 • edited Loading

Version

Browser and OS info

Steps to reproduce

What is expected?

What is actually happening?

Akryum commented Feb 9, 2022

Akryum commented Feb 9, 2022

webdevnerdstuff commented Feb 9, 2022

Akryum commented Feb 9, 2022

webdevnerdstuff commented Feb 9, 2022

rudongsu commented Feb 10, 2022 • edited Loading

Akryum commented Feb 10, 2022

Akryum commented Feb 10, 2022

rudongsu commented Feb 11, 2022

jiaqidegege commented Feb 11, 2022

Akryum commented Feb 11, 2022

This comment was marked as off-topic.

webdevnerdstuff commented Feb 13, 2022 • edited Loading

webdevnerdstuff commented Feb 13, 2022 • edited Loading

webdevnerdstuff commented Feb 13, 2022

webdevnerdstuff commented Feb 13, 2022

Akryum commented Feb 14, 2022

webdevnerdstuff commented Feb 15, 2022 • edited Loading

Akryum commented Feb 15, 2022

Akryum commented Feb 15, 2022

webdevnerdstuff commented Feb 21, 2022

webdevnerdstuff commented Feb 23, 2022

journeywithIT commented Feb 28, 2022

NathanWailes commented Jun 27, 2022

mdr1384 commented Dec 6, 2022

Thinkro commented Dec 14, 2022 • edited Loading

joallard commented Dec 18, 2022

bdanielbell commented Jan 26, 2023 • edited Loading

djpowers commented Jan 26, 2023

ghost commented Feb 2, 2023

bdanielbell commented Feb 4, 2023

bitfactory-oussama-fadlaoui commented Oct 4, 2023

philharmonie commented Oct 27, 2023

xxholly32 commented Feb 20, 2024

n4ks commented Apr 16, 2024

bitfactory-oussama-fadlaoui commented Sep 23, 2024

webdevnerdstuff commented Feb 9, 2022 •

edited

Loading

rudongsu commented Feb 10, 2022 •

edited

Loading

webdevnerdstuff commented Feb 13, 2022 •

edited

Loading

webdevnerdstuff commented Feb 13, 2022 •

edited

Loading

webdevnerdstuff commented Feb 15, 2022 •

edited

Loading

Thinkro commented Dec 14, 2022 •

edited

Loading

bdanielbell commented Jan 26, 2023 •

edited

Loading