如何修改chrome里的html,html - 如何保存Chrome开发者工具的样式面板的CSS更改？

10个解决方案

132 votes

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

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

添加文件夹后，您必须授予Chrome访问该文件夹的权限。

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

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

附：

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

Philip Ramirez answered 2019-03-22T03:01:40Z

20 votes

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

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

rjmunro answered 2019-03-22T03:02:14Z

11 votes

你正在寻找“资源”的错误部分。

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

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

thirtydot answered 2019-03-22T03:02:54Z

11 votes

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

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

设置覆盖

转到“来源”面板。

转到“替代”选项卡。

单击“选择要覆盖的文件夹”。

选择要将更改保存到的目录。

在视口顶部，单击“允许”以授予DevTools对目录的读写访问权限。

进行更改。 在下面的GIF中，您可以看到background:rosybrown更改在页面加载过程中仍然存在。

覆盖如何工作

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

覆盖和工作区之间的区别

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

Kayce Basques answered 2019-03-22T03:04:50Z

10 votes

Tincr Chrome扩展程序更易于安装(无需运行节点服务器)，并且还附带了LiveReload功能！ 谈论双向编辑！:)

Tin.cr网站

Chrome网上应用店链接

安迪的博客文章

Jose Browne answered 2019-03-22T03:05:37Z

10 votes

我知道这是一个旧帖子，但我这样保存：

转到“来源”窗格。

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

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

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

您还可以查看本地修改以查看您的修订，非常有趣的功能。也适用于脚本。

Guilherme de Jesus Santos answered 2019-03-22T03:06:39Z

8 votes

现在Chrome 18上周发布了所需的API，我在Chrome网上商店发布了我的Chrome扩展程序。 该扩展会自动将Developer Tools中的CSS或JS更改保存到本地磁盘中。 去看看吧。

Tomi Mickelsson answered 2019-03-22T03:07:05Z

2 votes

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

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

FajitaNachos answered 2019-03-22T03:07:39Z

2 votes

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

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

然后我将它放在差异工具中以查看我的更改。

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

RoccoB answered 2019-03-22T03:08:27Z

0 votes

只要你没有在element.style中坚持使用CSS：

转到您添加的样式。 应该有一个链接说检查器样式表：

单击它，它将打开您在sources面板中添加的所有CSS

复制并粘贴它 - 耶！

您是否一直使用element.style：

您只需右键单击HTML元素，单击“编辑为HTML”，然后使用内联样式复制并粘贴HTML。

Ethan answered 2019-03-22T03:09:29Z