如何在Chrome开发工具中获得CSS更改的摘要？

有没有办法获得你在Chrome开发工具中应用的自定义CSS更改列表

当你在chromedev工具中使用CSS来使你的网页看起来正确时，它会很方便地跟踪你所做的更改

我知道工作空间，但是这个用例是一个Angular 5应用程序，其中你的CSS是捆绑的，并且可能是缩小的

澄清：

• 我有一个页面看起来和它应该的样子相差很远
• 我在开发工具中做了20个CSS修复，直到看起来不错为止
• 现在我想从原始页面获得一个（CSS）增量，这样我就有了一个列表，列出了我现在应该在真正的CSS样式中实现的更改

---

这取决于您如何应用css修复

• 如果应用css代码内联，则无法获得包含所做修复列表的文件

• 如果您在inspector样式表中进行了更改，您可以找到该文件及其所有修复程序
  从左侧打开的列表转到源选项卡，您可以 请参阅名为检查器样式表的文件
  这将显示您的所有修复

另一种从开发工具的'Elements'选项卡中选择css修复的方法，您可以轻松复制所做的编辑并将其粘贴到项目的css文件中，或者您可以从开发工具的'source'选项卡中编辑源文件本身。要保留所做的更改，您需要做两件事：

按Ctrl+S或Cmd+S保存更改，并自动将根css文件中的更改保存到项目文件中

您可以在代码编辑器中将更改从开发工具复制并粘贴到css文件中

---

实际上，你可以做你想做的事情：

转到源>>本地修改

转到Sources选项卡，选择所需的CSS文件，然后右键单击并选择Local modifications（本地修改），将为您提供本地更改的diff样式摘要

或者-通过映射本地文件，您可以直接将更改保存到本地CSS文件中，这样chrome dev工具将自动保存对此CSS文件所做的任何更改。

您可以通过

在开发工具中，您可以通过以下任一方式找到更改抽屉：

• A）打开命令调色板（Ctrl+Shift+p）并键入“更改”
  
  
  

• B）打开抽屉（Esc），单击更多选项菜单（三点），然后选择更改

进一步阅读：

---

我知道这是“另一个”主题，但你可以尝试在VS代码中的某个实时检查器扩展中启动它，以便了解所有内容…

好吧，我学到了一些新的东西，我编辑了这个问题，希望能澄清我想要的是什么Hanks scoop96，你能进一步阐述一下你的意思吗？是的，还有一些扩展，比如liveserver，可以随时编译css和其他东西。其中一些在vscode中有日志或小型终端。如果合适的话你可以试试我在上下文菜单中没有这些选项UI也看不到这些