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

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

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

但我正在本地工作的CSS文件，但更改没有显示在资源面板为我

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

Answer 1

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

• 导航到开发人员工具的“来源”面板， 右键单击左侧面板（列出文件的位置），然后select“ 将文件夹添加到工作空间” 。 您可以快速访问“来源”面板中的样式表，方法是在“元素”面板中单击每个CSS规则右上方的所选元素的样式表。

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

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

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

PS

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

Tincr Chrome扩展程序更容易安装（不需要运行节点服务器）并且还带有LiveReloadfunction。 谈谈双向编辑！ 🙂

Tin.cr网站

Chrome网上应用店链接

安迪的博客文章

Answer 5

现在，Chrome 18上周发布了所需的API，我在Chrome网上商店发布了我的Chrome扩展 。 该扩展自动将开发人员工具中的CSS或JS更改保存到本地磁盘。 去看看。

Answer 6

我知道这是一个旧的post，但我这样保存：

1. 转到“来源”窗格。
2. 单击显示导航器（显示左侧的导航器窗格）。
3. 点击你想要的CSS文件。 （它将在编辑器中打开，并进行所有更改）
4. 右键单击编辑器并保存更改。

你也可以看到本地修改看到你的修订，非常有趣的function。 也可以使用脚本。

Answer 7

要回答有关任何可以保存更改的扩展的问题的最后一部分，有修补程序

它允许您将Chrome开发工具中的更改直接保存到GitHub。 从那里你可以在GitHub上设置一个post-receive hook来自动更新你的网站。

Answer 8

现在有一个用于DevTools扩展的API，可以接收有关被更改的资源的通知 – 所以您可以创build一个扩展，与您所select的IDE集成，或者将资源内容发布到WebDAV服务器：

http://developer.chrome.com/extensions/devtools.inspectedWindow.html#event-onResourceContentCommitted

Answer 9

仅供参考，如果您使用内联样式或直接修改DOM（例如添加元素），工作区不能解决此问题。 这是因为DOM存在于内存中，并且没有与DOM的活动状态相关联的实际文件。

为此，我喜欢从控制台中获取dom的“before”和“after”快照： copy(document.getElementsByTagName('html')[0].outerHTML)

然后我把它放在一个diff工具来看看我的变化。

全文： https ： //medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a

Answer 10

只要你没有粘在element.style的CSS：

1. 转到您添加的样式。 应该有一个链接说督察样式表：

2. 点击它，它会打开你在源代码面板中添加的所有CSS

3. 复制并粘贴 – 耶！

如果你一直在使用element.style ：

您可以右键单击HTML元素，单击“编辑为HTML”，然后复制并粘贴带有内联样式的HTML。