如何保存Chrome开发者工具的样式面板的CSS更改？

Question

如何保存Chrome开发者工具的样式面板的CSS更改？

Jit*_*yas 185 html css google-chrome google-chrome-extension google-chrome-devtools

如何保存Google Chrome开发者工具的样式面板的CSS更改？

在工具的网站上,我们可以看到资源面板中的所有变化

在此输入图像描述

但我在本地工作的CSS文件,但更改没有在资源面板中显示给我

在此输入图像描述

顺便问一下你知道任何附加组件,工具来保存Chrome开发者工具的CSS更改吗？ 我知道Firebug有很多https://stackoverflow.com/search?q=firebug+CSS+changes+save

Answer 1

Phi*_*rez 135

您可以从Chrome开发者工具本身保存CSS更改.Chrome现在允许您将本地文件夹添加到工作区.允许Chrome访问该文件夹并将该文件夹添加到本地工作区后,您可以将Web资源映射到本地资源.

导航到Developer Tools的Sources面板,右键单击左侧面板(列出文件的位置),然后选择Add Folder to Workspace.通过单击"元素"面板中所选元素的每个CSS规则右上角的样式表,可以快速访问"源"面板中的样式表.

在此输入图像描述

添加文件夹后,您必须授予Chrome访问该文件夹的权限.
接下来,您需要将网络资源映射到本地资源.

在此输入图像描述

重新加载页面后,Chrome现在会加载映射文件的本地资源.为简化操作,Chrome只会向您显示本地资源(因此您不必对编辑本地资源或网络资源感到困惑).要保存更改,请CTRL + S在编辑文件时按.

PS

您可能必须打开映射文件并开始编辑才能使Chrome应用本地版本(日期201604.12).

我想只在我的主题样式表的底部添加我在实时编辑我的CSS时想出的CSS差异.而已.有没有办法想出一个'差异',我可以复制和粘贴的CSS？请参阅另一个问题:http://stackoverflow.com/questions/21871535/any-way-to-save-a-css-diff-rather-than-save-the-entire-stylesheet-in-chrome-dev背景故事是我正在编辑属于主题的CSS,我只能在样式表的底部添加CSS,而不是编辑上面的任何内容.如果有人只能使用CSS覆盖将custom.css添加到网站,则同样适用. (4认同)
Chrome 46检查器中似乎存在一个错误,即重新加载页面时,只有在"源"面板中更改映射的本地文件时才会重新应用该文件.您甚至可以在外部编辑器中更改它,但您必须打开并将其聚焦在"源"面板中. (2认同)
我认为 OP 希望看到他在“元素”面板的“样式”选项卡中所做的更改。这些更改不一定与特定的源文件相关。 (2认同)

Answer 2

Kay*_*ues 23

DevTools技术作家和开发人员在这里提倡.

从Chrome 65开始,Local Overrides是一种新的轻量级方法.这是与Workspaces不同的功能.

设置覆盖

转到" 来源"面板.
转到" 替代"选项卡.
单击" 选择要覆盖的文件夹".
选择要将更改保存到的目录.
在视口顶部,单击" 允许"以授予DevTools对目录的读写访问权限.
进行更改.在下面的GIF中,您可以看到background:rosybrown更改在页面加载中持续存在.

覆盖如何工作

当您在DevTools中进行更改时,DevTools会将更改保存到计算机上文件的修改副本中.重新加载页面时,DevTools提供修改后的文件,而不是网络资源.

覆盖和工作区之间的区别

工作区旨在让您将DevTools用作IDE.它使用源映射将您的存储库代码映射到网络代码.真正的好处是,如果您正在缩小代码或使用需要转换的代码(如SCSS),那么您在DevTools中所做的更改(通常)会映射回原始源代码.另一方面,覆盖允许您修改和保存Web上的任何文件.如果您只是想快速尝试更改,并在页面加载中保存这些更改,这是一个很好的解决方案.

这有效,但它仍然太复杂了.如果您只能为当前会话启用此功能,我更愿意.恕我直言,像"保持当前会话的资源更改"这样的复选框更适合Web开发人员的工作流程.持续变化不是Web开发人员在日常业务中需要的,如果您忘记删除这些覆盖并在几周后再回来,甚至可能会引起额外的麻烦.覆盖对最终用户来说很好 - 而不是用于调试.仍然赞成. (4认同)