Vue-devtools: Opening Vue Devtools breaks HMR

Created on 8 Apr 2019 · 3Comments · Source: vuejs/vue-devtools

Version

5.0.8

Browser and OS info

Chrome 73 / macOS Mojave

Steps to reproduce

Run npm run serve
Navigate to localhost:8080 in chrome
Open chrome dev tools and navigate to Vue Devtools tab

What is expected?

To open the Vue Devtools and for HMR to be working as expected.

What is actually happening?

When the Vue Devtools are opened, HMR breaks on save and only when I refresh the browser do I get the up to date content.

After doing these steps, HMR actually works on the first save. But on the second save and beyond, HMR is broken until I first close the chrome devtools sidebar entirely and perform a full refresh of the browser.

After some testing, it seems that edits to the javascript of the .vue files aren't triggering a reload after the devtools are opened. Edits to the template and style sections are triggering a reload as expected.

need repro

Source

sparlos

👍2

Most helpful comment

I'm also experiencing similar problem with Firefox 66.0.4 and Google Chrome 74.0.3729.28. In my case, edits to template and sryle section also does not work.

Here is the minimal project producing this problem.

https://github.com/Kogia-sima/vue-devtools-issue-961

Kogia-sima on 9 May 2019

👍2

All 3 comments

Please provide a minimal runnable reproduction of the problem.

Akryum on 9 Apr 2019

👀1

I'm also experiencing similar problem with Firefox 66.0.4 and Google Chrome 74.0.3729.28. In my case, edits to template and sryle section also does not work.

Here is the minimal project producing this problem.

https://github.com/Kogia-sima/vue-devtools-issue-961

Kogia-sima on 9 May 2019

👍2

experiencing the same issue here