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

 

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

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

在这里输入图像描述

但是我在CSS文件上本地工作，但对于我而言，资源面板中未显示更改

在这里输入图像描述

顺便说一下你知道任何附加工具，以保存Chrome开发人员工具的CSS更改吗？ 我知道Firebug有很多https://stackoverflow.com/search?q=firebug+CSS+changes+save

您可以保存来自Chrome开发工具本身的CSS更改。 Chrome现在允许您将本地文件夹添加到您的Workspace。 允许Chrome访问该文件夹并将该文件夹添加到本地工作区后，可以将Web资源映射到本地资源。

  • 导航到Developer Tools的Sources面板，右键单击左侧面板（列出文件的位置），然后选择Add Folder to Workspace。 您可以通过单击每个CSS规则右上方的样式表，在“面板”面板中的某个选定元素上，快速进入“来源”面板中的样式表。

    • 在这里输入图像描述

  • 添加文件夹后，您必须让Chrome访问该文件夹。 允许Chrome访问

  • 接下来，您需要将网络资源映射到本地资源。

    • 在这里输入图像描述

  • 重新加载页面后，Chrome现在加载映射文件的本地资源。 为了简单起见，Chrome仅向您显示本地资源（所以您不会对编辑本地资源或网络资源感到困惑）。 要保存更改，请在编辑文件时按CTRL + S

    • PS

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

    Chrome的新版本具有称为工作区的功能，可解决此问题。 您可以定义Web服务器上的哪些路径与系统上的哪些路径相对应，然后使用ctrl-s进行编辑和保存。

    请参阅：http：//www.html5rocks.com/en/tutorials/developertools/revolutions2013/

    您正在查看“资源”的错误部分。

    它不在“本地存储”下，在“框架”下：

    以上屏幕截图显示了原始样式与devtools中进行的新修改的区别。 您可以右键单击左窗格中的项目并将其保存回磁盘。

    链接地址: http://www.djcxy.com/p/91129.html

    上一篇: How to save CSS changes of Styles panel of Chrome Developer Tools?

    下一篇: Is there a JavaScript/jQuery DOM change listener?