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

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

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

在这里输入图像描述

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

在这里输入图像描述

在这里输入图像描述

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

10 Solutions collect form web for “如何保存Chrome开发人员工具的样式面板的CSS更改?”

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

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

在这里输入图像描述

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

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

在这里输入图像描述

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

PS

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

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

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

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

它不在“本地存储”下,在“框架”下:

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

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

Tin.cr网站

Chrome网上应用店链接

安迪的博客文章

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

我知道这是一个旧的post,但我这样保存:

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

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

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

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

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

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

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

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

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

Diff工具图像

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

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

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

在这里输入图像描述

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

  2. 复制并粘贴 – 耶!

如果你一直在使用element.style

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

  • 嵌套和多个<marquee>烦恼
  • 在html中编码一个标签
  • :hover但:不是在一个特定的类
  • 如何使html表格垂直滚动
  • 如果没有JavaScript,当长一个不合适时,我可以显示不同的文字吗?
  • IE8问题与Twitter Bootstrap 3
  • 如何检测页面何时退出全屏?
  • jQuery看看是否有任何checkbox被选中
  • HTML5 Boilerplate与HTML5重置
  • HTML文本溢出省略号检测
  • 强制HTML textarea使用CSS使用等宽字体