Vue devtools seem to break unrelated websites

[loilo]

I've had weird malfunctions today on two websites:

• mtf.ch (hero image not appearing)
• tso.ch (menu can't be opened)

I narrowed the misbehavior down to the Vue Devtools extension being enabled. Even in an otherwise completely pristine Chrome Canary, the devtools extension alone will make the sites malfunction, so I'm quite confident that the extension is at fault here.

It seems that the devtools extension blocks some JavaScript from being executed. At least the effects mentioned above are the same as disabling JavaScript on these sites. (Not all JavaScript is prevented from running though, only some parts.)

More info:

• The problem seems to be affecting both the legacy (6.) as well as the current (7.) branch of the devtools extension.
• Neither of the sites listed above seems to use Vue. I haven't found clues for Vue in their source, and the extension states that Vue has not been detected as well.
• There are no suspicious errors or warnings in the browser devtools console.
• I'm using macOS 15.3.2 and could verify the problem in Chrome 134 as well as Chrome 136 canary. The extension also doesn't seem to affect Firefox in the same way.

Please let me know if there's any more helpful information I could provide.

[mityaua]

Can confirm that. Moreover, in my case, sometimes it causes an infinity tab loop (but I can interact with site's elements).

[RobRoy]

Can confirm similar issues with usage of the cropperjs library (v2.x): when vue dev tools are enabled in Chrome the image handling in the cropper library breaks. Once I disable the dev tools, everything works.

[PatrickKennedy]

This also affects pages on https://payments.jagex.com, preventing the entire application from running

[mikeziri]

I work on a webdev agency and we're now noticing multiple sites breaking JS with Vue Dev Tools extension on.

[FeBe95]

The same is happening on one of our webpages.

We are currently updating a legacy code base from Vue 2 to Vue 3, so I installed Vue DevTools v7 for local Vue 3 development. Now, I cannot access our staging website anymore which is still running Vue 2. It just shows a blank page. Surprisingly, our production website does still work - and it's running the exact same version as staging.

This is happening with both Chrome and Firefox.

No error messages are shown/logged, no JavaScript error is thrown. Debugger "Pause on (caught) exceptions" does not help. Same when using the about:debugging page -> inspect extension -> it does not show anything useful.

One thing I noticed: The debugger does not show the main JavaScript file, while the network shows that it is loaded from the server:

Staging (Vue 2)

Production (Vue 2)

Network

[FeBe95]

The described issue seems to be the same as this one:

• #740

It seems like this is caused by Cookiebot. The page is blank when the user has not yet given consent to allow cookies. That's also why in our case production works, and staging does not: The staging domain does not have a valid Cookiebot configuration, so the cookie consent is never given.

I checked all the listed webpages above, and all of them load Cookiebot, including my own example.

So I think we can close this issue as duplicate of #740. What do you think @loilo?

Screenshots

[loilo]

@FeBe95 Good catch, thanks! Yes, Cookiebot is definitely at fault on the sites I reported — when I blocked the Cookiebot request via the Chrome Devtools Network tab, the site behaved properly.

So I'm going to close this as duplicate of #740.