如何在 Chrome 开发工具中获取 CSS 更改的摘要？
S. *_*jns 29 css google-chrome-devtools
有没有办法获取您在 Chrome 开发工具中应用的自定义 CSS 更改的列表？
当您在 Chrome 开发工具中使用 CSS 以使您的网页看起来正确时，轻松跟踪您所做的更改会派上用场。
我知道工作区，但用例是一个 Angular 5 应用程序，其中您的 CSS 被捆绑并可能被缩小。
澄清：
- 我有一个页面看起来与它应该的样子相去甚远
- 我在开发工具中修复了 20 个 CSS 直到它看起来不错
- 现在我想从原始页面获得一个 (CSS) delta，所以我有一个我现在应该在真正的 CSS 样式中实现的更改列表。
Obm*_*nen 23
其实你可以做你想做的事：
转到来源 > > 本地修改
转到“源”选项卡，选择所需的 CSS 文件，然后右键单击并选择“本地修改”，将为您提供本地更改的差异样式摘要。
或者 - 您可以通过映射本地文件直接将更改保存到本地 CSS 文件，以便 chrome 开发工具将自动保存您对此 CSS 文件所做的任何更改。
- 我的上下文菜单中没有这些选项 (3认同)
Kyl*_*Mit 22
您可以通过Changes Drawer查看所有更改
在开发工具中，您可以通过以下任一方式找到更改抽屉：
A）打开命令调色板（Ctrl+ Shift+ P）和类型“变化”
B)打开抽屉 ( Esc)，单击更多选项菜单（三点），然后选择更改
进一步阅读：
- 当 CSS 被缩小并变成一行代码时，很难找到更改的项目。激活漂亮打印还会使所有新的漂亮打印 CSS 被视为“更改”，这违背了目的。有没有解决的办法？ (5认同)
- 我无法以任何方式选择、复制或与我所做的更改进行交互。它是如此接近，同时又如此遥远...... (3认同)
- @NeithanMax，强烈同意 - 我在 chromium bug tracker 中开了一张票，所以希望它能在未来的周期中得到解决 (2认同)
- 如果您所做的更改是对无规则元素样式（样式编辑器中的第一个样式）进行的，则此操作不起作用。这是因为它们作为内联样式应用。 (2认同)
这取决于您如何应用 CSS 修复。
如果您内联应用 css 代码，您将无法获得包含您所做的修复列表的文件。
如果您在检查器样式表中进行了更改，您可以找到包含所有修复的该文件
转到“源”选项卡> 从左侧列表中打开localhost > 您可以看到名为spector-stylesheet的文件。
这将显示您的所有修复。
从开发工具中的“元素”选项卡中选择 css 修复的另一种方法是，您可以轻松复制所做的编辑并将其粘贴到项目的 css 文件中，或者您可以从开发工具中的“源”选项卡编辑源文件本身，您有两个为了保留所做的更改，需要做的事情：
通过按Ctrl+S或Cmd+S保存更改，并自动将更改保存在项目文件中的根 css 文件中。
您可以将开发工具中的更改复制并粘贴到代码编辑器中的 css 文件中