devtools-next icon indicating copy to clipboard operation
devtools-next copied to clipboard

Devtools interference with worker

Open larsyr opened this issue 1 year ago • 1 comments

In my Vite-Vue project, I use web-workers.

Recently, we migrated to Vue 3. Sometimes I recieve unexpected input in my worker. I believe it was vue devtools interferring.

For now, a quick fix is to ignore those worker messages, but I do not think this is expected behahiour.

The reason I believe this is a devtools issue, is because the worker starts recieving these messages after I open the vue-devtools menu in chrome devtools. When I open the "vue" tab in the chrome devtools, I get multiple events to the worker. After that, it will send messages on a interval (Something like 30 seconds -> "shutdown" -> 1 seconds -> "init" -> ....repeat).

The web-worker messageEvent data always contains a key "source" with value "proxy->server" and a key "payload" that changes. The payload is json. Sometimes it is something like "init", "shutdown". Or something like below:

{"json":{"m":"getInspectorTree","a":[{"inspectorId":"components","filter":""}],"i":"9vkVZVzy2gequPNhAsTBF","t":"q"}}

Versions: Vue: 3.5.11 Devtools chrome extension: 7.6.8

I import my worker like below:

import ValidationWorker from "./validationWorker.ts?worker";

if(config.worker === true){
  this.worker = new ValidationWorker();
}

Again, I do not now for sure this is a vue devtools issue, but beceause the issue appears right after, and never before I open the "vue" tab in my chrome devtools. It is very likely to be related to vue devtools.

I do not have a reproduction case, I would have to ask my manager if it is okay to put time into creating a minimalistic repoduction case. I hope I have provided enough information. When you have questions, or this behaviour is as expected, feel free to contact me!

larsyr avatar Dec 12 '24 09:12 larsyr

Thank you for the detailed info, a mini repo will be very appreciated.

webfansplz avatar Dec 13 '24 01:12 webfansplz