vuejs / devtools-v6

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

The extension conflicts with walutomat.pl (the site is broken when the extension is enabled) #2145

Open xak2000 opened 8 months ago

xak2000 commented 8 months ago

Vue devtools version

6.6.1

Link to minimal reproduction

https://www.walutomat.pl/

Steps to reproduce & screenshots

  1. Open https://www.walutomat.pl/ in the Chrome with Vue.js Devtools installed.
  2. Try to click on the top right "globe" menu (language selector). It doesn't work. Menu is not opening on click. Other stuff on the site also do not work. E.g. "Accept cookies" button in the bottom popup. Also, the site shows old data (e.g. Exchange rates). Looks like the data site shows is frozen at 2024-03-05 18:15Z. Basically, the site is broken.
  3. Disable Vue.js Devtools in Chrome Extensions -> Manage Extensions tab.
  4. Reload the browser's tab with the site (F5).
  5. Try to click on the top right "globe" menu (language selector). It works. Other stuff on the site also works. Also, the data shown is fresh now (no more frozen at 2024-03-05 18:15Z).

What is expected?

Enabling of Vue.js Devtools extension doesn't break the site. Site should continue to work as usual.

What is actually happening?

Site is broken and unusable when Vue.js Devtools extension is enabled and has access to the site.

A workaround is to configure Allow this extension to read and change all your data on websites you visit: setting to On click or a whitelist of domains. Then walutomat.pl works as expected even with the extension enabled. But only until you click on the extension button on the site (so, enable it).

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (16) x64 AMD Ryzen 7 6800H with Radeon Graphics
    Memory: 15.55 GB / 31.19 GB
  Binaries:
    Node: 20.10.0 - C:\nodejs\node.EXE
    Yarn: 1.22.19 - ~\node_modules\.bin\yarn.CMD
    npm: 10.2.3 - C:\nodejs\npm.CMD
    pnpm: 8.12.1 - C:\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (122.0.2365.66)
    Internet Explorer: 11.0.22621.1

Windows 11 22H2 (x64)
Chrome 122.0.6261.111 (Official Build) (64-bit)

Any additional comments?

It looks like some conflict between this specific site and the extension. Maybe the site uses some global variables with names that are clashing with the Vue.js Devtools.. I don't know really, it is just a hypothesis. The site is not mine. It is very popular site in Poland for currency exchange. I found this bug accidentally and didn't even know that the site is broken because of Vue.js Devtools until started to investigate. But the behavior is 100% reproducible. I tried to create a new profile in Chrome, installed Vue.js Devtools extension here (the only extension), reload the site (that worked fine before this) and it was broken. Removed the extension, reload - site works again.

arnojong commented 8 months ago

Hi @xak2000, I'm running into the same issue. In my case the bug appeared after implementing Cookiebot. I noticed your site has Cookiebot too, so there's a good chance of that being the underlying issue. I haven't found a fix for it yet though..