Events timeline: every event displayed multiple times

[hakanedison]

This happens under both Keyboard and Component events (while Mouse show no events whatsoever).

Example when hitting the A key once:

The first two events are identical keydown events, then two identical keypress events and lastly two identical keyup events.

Another example with component events:

Also, do the different colors have any specific meaning?

[hakanedison]

Never mind, it was me 😞

After restarting Chrome (and thereby also Vue devtools) it worked as expected.

[hakanedison]

Wait a minute. It just happened again. Every event displayed twice. I tried disabling Chrome DevTools (F12) en re-enabling it again (F12). Now every event is displayed 12 (!) times. There's something going on.

Things tried:

• I was on 7.0.0 beta 12, by the way, but switching to 7.5.6 didn't change the behavior.

• Disabling + enabling Chrome DevTools some more times (F12 + F12) worsens the problem. Right now every event is displayed hundreds of times.

• Stopping + starting recording doesn't help.

• Disabling + enabling Component events doesn't help.

• Disabling + enabling the Vue DevTools extension doesn't help.

• Reinstalling Vue DevTools doesn't help.

• Restarting Chrome completely (without continuing to run some processes in the background) just sets the count back to events displayed twice. Same if i create a new browser tab and F12.

[hakanedison]

Just found a way to make it work:

After restarting the Vite development server, every event is only displayed once, as it should be (until I reopen Chrome DevTools). 🎉

My script in package.json:

"scripts": {
   "dev": "SET NODE_ENV=development && vite --force -d"
}

This lead me to the (now) quite obvious conclusion: Just reloading the page also fixes it. (How did I miss to test that one!?)