在Chrome DevTools中实时更改Vue.js应用（Webpack模板）的页面样式 [英] Broke page styles of Vue.js app (Webpack template) when live changing it in Chrome DevTools

问题描述

我从 vue-cli 用引导了应用程序webpack 模板。我正在Chrome 65.0.3325.146 上运行它，但它也存在于 64.X.XXX 版本上。

I have application bootstrapped from vue-cli with a webpack template. I'm running it on Chrome 65.0.3325.146 but it also exists on 64.X.XXX version.

我在这里添加：
package.json ： https://gist.github.com/marcinlesek/a7e6076ce4befe2e810743fdbaf81480

webpack.base.conf.js ： https：//gist.github .com / marcinlesek / 80cbf27b6ef4172248709f32c257d0cd

该应用程序应能与Chrome浏览器和我应该能够在Chrome开发工具中禁用/更改样式。

The application should works fine with Chrome Browser and I should be able to disable/change styles in Chrome Dev Tools.

当我通过Chrome dev工具更改样式时，它破坏了所有样式（更改或禁用一个属性后），该页面看起来像纯HTML，没有任何样式代码。全新的开发人员工具设置和Chrome重新安装没有帮助。有点棘手，在Firefox 58.0.2 上一切正常。

When I change style via Chrome dev tools it broke all styles (after changing or disabling one property) that page looks like in pure HTML without any line of style code. Fresh dev tools setup and Chrome reinstall doesn't help. What is a bit tricky, on Firefox 58.0.2 everything works correctly.

我的同事也有这个问题，因此使我确信这不是我的本地错误，而是Vue方面的问题。还找到有关此错误的一些问题，例如当我使用Webpack HMR在Chrome DevTools中更改样式时，页面样式会中断

My collegues also had this problem, so it convince me that it isn't my local bug but something bigger on Vue side. Also find some questions regarding this bug, like Page styles break when I change styles in Chrome DevTools with Webpack HMR

预先感谢。

最好的问候，
Marcin

Best regards, Marcin

推荐答案

我找到了另一个解决方案。感谢@munstrocity有关将 cheap-module-eval-source-map 更改为 eval-source-map 的回答。不幸的是，此更改不能为我解决我的样式，但可以给我很好的检查点。

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.

发现，在 config / index.js中将 cacheBusting：true，更改为 false code>帮助解决该问题，现在可以在Chrome开发工具中更改样式。

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! :)

这篇关于在Chrome DevTools中实时更改Vue.js应用（Webpack模板）的页面样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！