问题描述

如何保存 Google Chrome Developer Tools 的 Styles panel 的 CSS 变更？

在工具的网站上，提到 we can see all change in resource panel

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

顺便说一下你知道任何 add-ons，工具来保存 Chrome Developer 工具的 css 更改？我知道对于 Firebug 有很多 https://stackoverflow.com/search?q=firebug+CSS+changes+save

最佳解决方案

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

  • 导航到左侧面板 (列出文件的位置) 的开发工具 Right-click 的 「源」 面板，然后选择 「将文件夹添加到工作区」 。您可以通过单击 「元素」 面板中所选元素的每个 CSS 规则的 top-right 中的样式表快速访问 「源」 面板中的样式表。

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

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

  • 重新加载页面后，Chrome 会加载映射文件的本地资源。为了使事情变得更简单，Chrome 只会向您显示本地资源 (所以您不必就编辑本地或网络资源而感到困惑) 。要保存更改，请在编辑文件时按 CTRL + S 。

附：

您可能需要打开映射文件并开始编辑，才能使 Chrome 应用本地版本 (日期 201604.12) 。

次佳解决方案

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

参见：http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

第三种解决方案

你正在看错”Resources” 的部分。

它不在”Local Storage” 下，它在”Frames” 下：

上面的屏幕截图显示了原始样式与在 devtools 中进行的新修改的差异。您可以在左窗格中将项目 right-click 保存回磁盘。

第四种方案

Tincr Chrome 扩展更容易安装 (不需要运行节点服务器)，并且还附带 LiveReload 功能，包括在内！谈论 bi-directional 编辑！ 🙂

Tin.cr Website

Chrome Web Store Link

Andy’s Blog Article

第五种方案

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

第六种方案

我知道这是一个老帖子，但我以这种方式保存：

  1. 转到 「信息源」 窗格。

  2. 单击显示导航器 (以显示左侧的导航器窗格) 。

  3. 单击所需的 CSS 文件。 (它将在编辑器中打开，并进行所有更改)

  4. 右键单击编辑器并保存更改。

您还可以看到本地修改来查看您的修订版，非常有趣的功能。还可以使用脚本。

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。