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

Vue Devtools' detector-exec.js in combination with Cookiebot prevents DOMContentLoaded event? #2149

Open arnojong opened 5 months ago

arnojong commented 5 months ago

Vue devtools version

6.6.1

Link to minimal reproduction

https://www.euromate.com/group/

Steps to reproduce & screenshots

Broken situation

  1. Have Vue Devtools enabled
  2. Visit https://www.euromate.com/group/
  3. Deny the cookies in the popup that opens
  4. Notice that the JavaScript on the page is not working by trying to open the 'Solutions' submenu

Working situation

  1. Disable Vue Devtools
  2. Visit https://www.euromate.com/group/
  3. Deny the cookies in the popup that opens
  4. Notice that the JavaScript on the page is now working properly by opening the 'Solutions' submenu

Video of the issue In the video below you can see me toggling the Vue Devtools on and off. As you can see this breaks the site when Devtools are turned on, and the site works again when turning the Devtools off. https://www.youtube.com/watch?v=kZb7oefIQeI

What is expected?

I expect the JavaScript to be working while I have the Vue Devtools extension enabled. For example the solutions submenu as mentioned above. Note that the site is not running on Vue at all.

What is actually happening?

None of the project's JavaScript is working when the Vue Devtools are enabled.

System Info

System:
    OS: macOS 13.6
    CPU: (8) arm64 Apple M1 Pro
    Memory: 56.92 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
  Browsers:
    Chrome: 123.0.6312.59
    Firefox: 124.0.1
    Safari: 16.6

Any additional comments?

Only happens (AFAIK) on Chromium based browsers, I encountered the bug on both Chrome and Arc. It seems to have to do something with Cookiebot, as the issue started appearing since I've implemented Cookiebot on the site. Blocking the 'detector-exec.js' script in the Network tab in Chrome's Devtools fixes the issue aswell. This script comes from Vue Devtools.

Sumurai8 commented 2 months ago

I've got the same issue. A site using Cookiebot stopped working with the Vue Devtools enabled, because nothing gets loaded anymore after cookiebot processes the injected script from vue devtools. There are no errors. In this case, an additional script that needs to be processed (google recaptcha) does not get loaded, breaking a login flow (as it now complains that recaptcha isn't loaded). Without the Vue Devtools recaptcha does get correctly loaded.