logo标签列表

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

htmlcssgoogle-chromegoogle-chrome-extensiongoogle-chrome-devtools
222
现在有一个API可以让DevTools扩展程序接收有关正在更改的资源的通知，因此您可以创建一个扩展程序，将其与您选择的IDE集成，或者只是将资源内容发布到WebDAV服务器：http://developer.chrome.com/extensions/devtools.inspectedWindow.html#event-onResourceContentCommitted - caseq
9
我认为这个问题及其答案已经过时，因为Chrome将修改后的CSS保存功能移动到了“资源”面板中。这个功能相当混乱，有点误导性：我在这个相关的Stack Overflow帖子中详细探讨了Chrome的修改CSS保存功能：https://dev59.com/o2Qo5IYBdhLWcg3wfPfK。 - ChaseMoskal
可能是重复的问题，这里有一个相关的讨论：如何从检查器（webkit、firebug等）中导出CSS更改。 - mems
“本地覆盖”是一种新的方式，从Chrome 65开始可用。Overrides是不同于Workspaces的功能。 - Kayce Basques
11个回答
153
你可以在Chrome开发者工具中保存自己的CSS更改。现在，Chrome允许您将本地文件夹添加到Workspace中。在允许Chrome访问文件夹并将文件夹添加到本地Workspace后，可以将Web资源映射到本地资源。
1. 导航到开发者工具的Sources面板，在左侧面板（文件列表所在的位置）上右键单击，然后选择将文件夹添加到Workspace。您可以通过在Elements面板中选择元素，并在每个CSS规则的顶部右侧单击样式表来快速进入Sources面板中的样式表。

enter image description here

  • 添加文件夹后，您需要允许Chrome访问该文件夹。 允许Chrome访问

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

enter image description here

  • 重新加载页面后，Chrome现在会加载映射文件的本地资源。为了简化操作，Chrome仅显示本地资源（这样您就不会混淆是编辑本地还是网络资源）。在编辑文件时，按CTRL + S保存更改。

p.s.

您可能需要打开映射文件并开始编辑，以便Chrome应用本地版本（日期201604.12）。

5
我希望能够在现场编辑CSS时，仅将CSS差异添加到主题样式表的底部。仅此而已。是否有一种方法可以生成一个可复制和粘贴的CSS“差异”？请参见此其他问题：https://dev59.com/V2Eh5IYBdhLWcg3w7XLt。背景故事是我正在编辑属于主题的CSS，我只能在样式表的底部添加CSS，不能编辑任何上面的内容。如果有人只能通过添加自定义CSS来覆盖他的CSS，则同样适用于此情况。 - Caroline Schnapp
Paul-Irish，对如何只保留本地修改的CSS差异/补丁感兴趣（而不包括远程更改）。另存为并不能真正解决灵活性和加快速度的问题... - Denis Denisov
现在Chrome自动保存本地文件（无需按CTRL + S），如何防止这种情况发生？ - Uzair Ali
对我无效。在本地文件夹中保存CSS文件，将远程映射到本地并重新加载后，所有更改都消失了。:(通过元素面板编辑本地文件并在源中保存文件也无法保留我的更改。 - crispy
2
Chrome 46检查器似乎存在一个 bug，即在重新加载页面时，只有在您在“Sources”面板中更改映射的本地文件后，它才会被重新应用。您甚至可以在外部编辑器中更改它，但必须在“Sources”面板中打开并聚焦它。 - crispy
2
我认为 OP 想要在元素面板的样式选项卡中查看他所做的更改。这些更改不一定与特定的源文件相关联。 - Ron Inbar
63

我是DevTools技术作家和开发者宣传员。

从Chrome 65开始，Local Overrides是一种新的轻量级方式来做到这一点。这是一个与工作空间不同的功能。

设置覆盖

  1. 进入 Sources 面板。
  2. 进入 覆盖 标签页。
  3. 单击选择覆盖文件夹。
  4. 选择要保存更改的目录。
  5. 在查看器的顶部，单击 允许 以授权DevTools读写该目录。
  6. 进行更改。在下面的GIF中，您可以看到background:rosybrown更改跨页面加载持续存在。

覆盖演示

覆盖的工作原理

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

覆盖与工作空间的区别

工作空间旨在让您将DevTools用作IDE。它使用源映射将您的存储库代码映射到网络代码。真正的好处在于，如果您正在缩小代码或使用需要转码的代码（如SCSS），则您在DevTools中进行的更改（通常）会被映射回您原始的源代码。另一方面，覆盖允许您修改和保存Web上的任何文件。如果您只想快速尝试更改并跨页面加载保存这些更改，则它是一个不错的解决方案。

10
这个功能能够运行，但仍然过于复杂。我更喜欢你只在当前会话中启用它。在我看来，像“保留资源变更以供当前会话使用”的复选框更适合 web 开发人员的工作流程。持久性变更不是 web 开发人员日常业务所需要的，甚至可能会在您忘记删除这些覆盖并在几周后回来时引起额外的麻烦。覆盖对于最终用户来说是没问题的-但对于调试来说则不是。我还是点了赞。 - user4521733
我同意其他评论。它一点也不直观，而且它并没有保存所有的更改，所以并不是很有帮助。我们最好写一个小的Chrome扩展程序来监听任何更改并保存它们。如果有API或进程可以挂钩的话，那就更好了...还没有查过。 - Neithan Max
抱歉先生，liveSCSS已经被弃用并不再开发了。请参考https://dev59.com/qGEh5IYBdhLWcg3wYSg2#57622797。 - Luk Aron
@Kayce Basques，开发Chrome扩展怎么样？当您注入样式表（和js）时，所有这些功能都无法正常工作，对吧？有没有解决这种开发问题的方法（以加快从Chrome Dev工具到扩展本地源文件的CSS / JS更新速度）？谢谢。 - Andrew
19
我认为 OP 想要在元素面板的样式选项卡中查看他所做的更改。这些更改不一定与特定的源文件相关联。 - Ron Inbar
14

我知道这是一篇旧文章，但是我以这种方式保存它：

  1. 转到“Sources”面板。
  2. 单击“显示导航器”（以在左侧显示导航器窗格）。enter image description here
  3. 单击所需的CSS文件。（它将在编辑器中打开，并包括您所做的所有更改）
  4. 右键单击编辑器并保存您的更改。

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

我找不到“显示导航器”。 - NickyLarson
@NickyLarson，我编辑了我的答案，包括这个按钮在哪里。 - Guilherme de Jesus Santos
请再次阅读原始问题。他并没有编辑CSS文件，而是在元素面板的样式选项卡中进行更改。 - Ron Inbar
12

你正在错误的 "资源" 部分查找。

它不在 "本地存储" 下，而是在 "框架" 下：

上面的截图显示了在开发工具中针对原始样式与新修改所做出的差异。你可以右键点击左侧窗格中的项目并将其保存回磁盘。

对我来说，框架里也没有任何东西。我在问题中添加了一张截图。 - Jitendra Vyas
我不确定你的“Frames”怎么可能是空的。听起来有点问题。在Canary版本中尝试一下（可以与您当前的版本一起安装）：http://tools.google.com/dlpage/chromesxs - thirtydot
Canary无法打开。我还发现了这个解决方案http://www.justin.my/2011/04/why-my-google-chrome-canary-cannot-run/，但它仍然不起作用。当安装完成时，我收到了这条消息http://k.min.us/iefbE2.jpg。 - Jitendra Vyas
2
截至本周末（2012年5月21日），我认为这个解决方案已经不再适用了。我曾经使用与您展示的相同方法来编写大量新 CSS（而不是旧的或编辑的）。但现在，至少对我来说，单击该HTML文件只会显示原始HTML，而不显示新的CSS规则。它仍然对您有效吗？如果不是，您是否有新的解决方案来实现此目标？ - Owen Allen
这个在Chrome 48上对我也不起作用。还有什么办法吗？ - DMTintner
仅供记录，新的CSS规则似乎正在添加特殊的“useragent”样式表，而不是页面自己的CSS样式表。它也可以在源选项卡中找到。 - Valentin Golev
10
开源工具像browsersync.io更好，支持所有现代浏览器并提供更多功能。 - Gianfranco P.
8

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

6

更新2019年：由于其他答案有点过时，我在这里添加最新的答案。在最新版本中，无需将chrome文件夹映射到文件系统。

enter image description here

假设我有一个包含 HTML、CSS 和 JS 文件的 Web 文件夹在桌面上，我想在 Chrome 中进行更改时更新它：
1）您需要像 Node 等一样运行本地服务器，或者使用此 VSCode 扩展程序为您创建服务器：live server VSCode extension，安装它并运行服务器。
2）从运行中的本地服务器加载 HTML 页面。
3）打开 DevTools-> Sources-> Filesystem-> 添加文件夹到工作区。

enter image description here

4) 添加用于运行本地服务器的文件夹。在最新版Chrome中不需要进行额外的映射！Ta-da！

更多信息请参见使用工作区编辑文件。

请注意，样式选项卡上所做的更改将不会反映在文件系统文件上。
enter image description here
相反，您需要前往devtools->source->your_folder，然后在那里进行更改并重新加载页面以查看效果。

2
但是OP 特别地 询问了在“样式”选项卡中所做的更改... - Ron Inbar
5
只要你没有将CSS放在element.style中：
  1. 进入你添加的样式。应该会有一个名为“inspector-stylesheet”的链接：

enter image description here

  1. 点击它，它将在源面板中打开您添加的所有CSS。

  2. 复制并粘贴它 - 好耶！

如果你使用了element.style：
你可以右键单击HTML元素，点击“以HTML编辑”然后复制并粘贴带有内联样式的HTML。
1
如果你在搜索DOM时迷失了方向，找不到那个检查器样式表，只需在DevTools聚焦时按Ctrl+P（或CMD+P），然后开始输入“inspec”...它就会立即弹出，然后只需按回车键。https://i.imgur.com/WSWcbh8.png - Neithan Max
4
FYI，如果你正在使用内联样式或直接修改DOM（例如添加元素），工作区无法解决此问题。这是因为DOM存在于内存中，并且没有与DOM的活动状态相关联的实际文件。
为此，我喜欢从控制台中获取DOM的“before”和“after”快照： copy(document.getElementsByTagName('html')[0].outerHTML) 然后，我将其放入差异工具中查看我的更改。

Diff tool image

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接