Chrome 控制台抽屉中的“更改”选项卡中没有 CSS 更改

Question

我真的很想看到我所有的实时 CSS 更改都在 Chrome 浏览器中的某个地方进行了总结，SO 上有几个关于此的问题，但对我来说没有任何作用。尤其是这个特定的答案，这似乎是实现我需要的最直接的方法。

从检查器导出 CSS 更改（webkit、firebug 等）

我更改了一些 css 属性，但在此选项卡中没有看到任何内容：

仅供参考 - 我正在使用 webpack 开发服务器来提供此页面（如果相关的话）

Answer 1

以下是我如何显示更改：

选择要修改的元素后，单击样式选项卡下的+号。

新的检查器样式表出现在左侧列的“更改”选项卡下。右侧窗格包含您的新更改。

Answer 2

如果您在 Inspect > Elements 窗格中进行了 css 更改，并且没有碰巧使用 https://stackoverflow.com/a/69634283/6200445 的方法，那么查看更改的一种方法是执行git 比较 DOM 结构。 这不是一个完美的解决方案，但您可以比较两次提交中的 dom 结构（通过编辑 HTML），将一些基线（提交）与实时 css 更改（第二次提交）进行比较

就我而言，git比较有一些不相关的更改，但它捕获了我所有的css更改。