Broke Page Styles of Vue.Js App (Webpack Template) When Live Changing It in Chrome Devtools

Broke page styles of Vue.js app (Webpack template) when live changing it in Chrome DevTools

I find another solution. Thanks to answer of @munstrocity regarding changing cheap-module-eval-source-map to eval-source-map. Unfortunately, this change didn't fix for me my styles in Chrome Dev Tools but give me good point to check.

After a bit I found, that changing cacheBusting: true, to false in config/index.js help to solve that and now it's possible to change style in Chrome Dev Tools.

// file: config/index.js

...
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: false,
...

Hope this will help anyone! :)

Vue DevTools in Chrome: Vue is detected but no data is shown

This is most probably an issue in v6 of DevTools - it is still in beta. Revert to v5 and it will work fine. You can try to file an issue on Github so they can fix the bug.

Why is Vue.js Chrome Devtools not detecting Vue.js?

One alternative is to set up a local web server, as the OP already stated.

The other - which IMHO is faster and less harassing - is letting the extension have access to file URLs, which is disabled by default.

Simply go to chrome://extensions and leave the "Allow access to file URLs" box checked for Vue.js devtools.

Sources:

https://github.com/vuejs/vue-devtools#common-problems-and-how-to-fix

Google Chome 99+ DevTools Source Tab not showing VUE file code in Webpack SRC folder

This was an issue with chromium and the ticket has been closed and marked fixed. Current fix is working in Version 103.0.5016.0 (Official Build) canary (64-bit).

Chrome's Dev Tools Audit pass lists styles only added by jQuery

Web Page Performance Audit is very simple and can't possibly cover all states that your complex web page can be in. "Remove unused CSS rules" is a suggestion for you that something might need optimization. Please note that even google page has ~60% of rules that are unused (according to the audit report).

Vue.js devtools not showing

I experienced this, too, both for Chrome and Firefox.

The unfortunate solution for Chrome was updating it to the latest version (today, that is 83.0.4103.106, 64bit on Windows).

For Firefox (77.0.1, 64bit) I disabled all other extensions, loaded the page without Firefox Devtools open, then hit F12 and the Vue tab popped up.

In general, disabling any other extensions (think of "Ad Block Plus" or "I don't care about cookies" for example) might help.

[EDIT]: Adding another case I experienced, when the Vue tab does not show up in Chrome's Devtools:

1. load the page without Devtools open
2. press the Vue Devtools button in the extensions area (might say "Vue.js not detected", but don't let that bother you). In some setups, this step is crucial.
3. only then open Devtools by hitting F12. Vue tab should appear (check to the very right of all tabs, you can drag it to the left)

---

Related Topics