在 Chrome 开发者工具中，如何自动保存对现有样式所做的 CSS 更改？

Question

我已经将必要的文件映射到本地资源 - 然而，虽然这样可以让我保存在“Sources”面板中对文件所做的任何更改，但我想知道是否有可能自动保存在“Elements”面板中对CSS所做的更改。否则，目前在“Elements”面板中对样式所做的任何更改似乎只存在于那里。

我记得在某个时候，“Elements”面板的“Styles”选项卡中的类/ID等旁边曾经有一个文件和行号的小指示器 - 考虑到Chrome确切地知道它来自哪里（如果是样式表而不是内联样式），更新该样式规则上的任何更改肯定不会太难吧？ 这将大大缓解我的工作流程。

与此类似问题的答案已过时。

- styke

Answer 1

当你在“元素”选项卡中完成修改后，旁边应该会有一个链接，其中包含文件名，类似于site.css:4或类似的内容。如果你点击该链接，它将打开源选项卡，并显示你编辑过的某个页面，其中包含修改内容。然后，你可以选择“另存为”，并从那里保存文档。

我希望这可以帮助你 :)

- KM123

---

我有点困惑 - 假设我有一个元素，其ID为#type-label，并在该规则上设置了一些样式。我加载页面，在元素面板的样式选项卡中编辑样式，很好 - 但是，这种更改在源面板中的文件中没有反映出来？ - styke

@KM123，与样式相同，修改仅存在于元素中，单击例如“style.css：36”链接将带我到源文件，而不是修改后的文件。 - Edward