如何保存Google Chrome 开发者工具样式面板的CSS 更改？
在工具的网站上提到我们可以在资源面板中看到所有更改
但我正在本地处理 CSS 文件，但更改未显示在资源面板中
顺便问一下，您知道 Chrome 开发者工具的任何附加组件、保存 css 更改的工具吗？ 我知道 Firebug 有很多https://stackoverflow.com/search?q=firebug+CSS+changes+save
问问题
236268 次
11 回答
147
您可以从 Chrome 开发工具本身保存您的 CSS 更改。Chrome 现在允许您将本地文件夹添加到您的工作区。在允许 Chrome 访问文件夹并将文件夹添加到本地工作区后，您可以将 Web 资源映射到本地资源。
- 导航到 Developer Tools 的 Sources 面板，右键单击左侧面板（列出文件的位置）并选择Add Folder to Workspace。您可以通过单击“元素”面板中选定元素的每个 CSS 规则右上角的样式表来快速访问“源”面板中的样式表。
添加文件夹后，您必须授予 Chrome 访问该文件夹的权限。
接下来，您需要将网络资源映射到本地资源。
- 重新加载页面后，Chrome 现在会加载映射文件的本地资源。为了让事情更简单，Chrome 只显示本地资源（这样您就不会混淆您是在编辑本地资源还是网络资源）。要保存更改，请
CTRL + S在编辑文件时按。
ps
您可能必须打开映射文件并开始编辑以使 Chrome 应用本地版本（日期 201604.12）。
于 2011-07-27T11:28:07.143 回答
50
DevTools 技术作家和开发者倡导者在这里。
从 Chrome 65 开始，Local Overrides是一种新的、轻量级的方法。这是与工作区不同的功能。
设置覆盖
- 转到来源面板。
- 转到覆盖选项卡。
- 单击为覆盖选择文件夹。
- 选择要将更改保存到的目录。
- 在视口顶部，单击“允许”以授予 DevTools 对该目录的读写权限。
- 进行更改。在下面的 GIF 中，您可以看到
background:rosybrown更改在页面加载后仍然存在。
覆盖如何工作
当您在 DevTools 中进行更改时，DevTools 会将更改保存到您计算机上文件的修改副本中。当您重新加载页面时，DevTools 会提供修改后的文件，而不是网络资源。
覆盖和工作区之间的区别
Workspaces 旨在让您将 DevTools 用作您的 IDE。它使用源映射将您的存储库代码映射到网络代码。真正的好处是，如果您正在缩小代码，或者使用需要转译的代码，例如 SCSS，那么您在 DevTools 中所做的更改（通常）会映射回您的原始源代码。另一方面，覆盖允许您修改和保存网络上的任何文件。如果您只想快速尝试更改并在页面加载时保存这些更改，这是一个很好的解决方案。
于 2018-02-09T18:07:02.927 回答
19
新版本的 Chrome 具有一项称为工作区的功能，可以解决此问题。您可以定义网络服务器上的哪些路径对应于系统上的哪些路径，然后只需使用 ctrl-s 进行编辑和保存。
见：http ://www.html5rocks.com/en/tutorials/developertools/revolutions2013/
于 2013-09-30T11:17:03.637 回答
13
我知道这是一篇旧帖子，但我以这种方式保存它：
- 转到源窗格。
- 单击显示导航器（以在左侧显示导航器窗格）。
- 单击所需的 CSS 文件。（它将在编辑器中打开，包含您所做的所有更改）
- 右键单击编辑器并保存您的更改。
您还可以查看本地修改以查看您的修订，非常有趣的功能。也可以使用脚本。
于 2013-01-15T17:49:44.300 回答
11
您正在查看“资源”的错误部分。
它不在“本地存储”下，而是在“框架”下：
上面的屏幕截图显示了原始样式与在 devtools 中所做的新修改的差异。您可以右键单击左窗格中的项目并将其保存回磁盘。
于 2011-07-27T11:29:45.913 回答
10
Tincr Chrome 扩展更容易安装（无需运行节点服务器）并且还带有 LiveReload 之类的开箱即用功能！谈论双向编辑！:)
于 2012-10-09T01:09:40.077 回答
8
现在 Chrome 18 上周发布了所需的 API，我在 Chrome 网上商店发布了我的chrome 扩展程序。该扩展程序自动将开发人员工具中的 CSS 或 JS 更改保存到本地磁盘中。去看看吧。
于 2012-04-04T07:29:40.270 回答
6
2019 年更新：由于其他答案有点过时，我将在此处添加更新的答案。在最新版本中，无需将 chrome 文件夹映射到文件系统。
所以，假设我在桌面中有一个包含 HTML、CSS、JS 文件的 web 文件夹，当我在 chrome 中进行更改时我想更新它：=
1）您需要一个正在运行的本地服务器，例如节点等，或者这个 vscode 扩展为您创建服务器：实时服务器 VSCode 扩展，安装它，运行服务器。
2）从正在运行的本地服务器加载 chrome 中的 html 页面。
3）打开devTools->Sources->Filesystem->Add folder to workspace
4) 添加用于运行本地服务器的文件夹。在最新的 chrome 中不需要额外的映射！达达！
更多关于它使用工作区编辑文件
请注意，在样式选项卡上所做的更改不会反映在文件系统文件上。
相反，您需要转到 devtools->source->your_folder 然后在那里进行更改并重新加载页面以查看效果。
于 2019-11-03T18:58:32.230 回答
4
仅供参考，如果您使用内联样式或直接修改 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
于 2017-04-10T22:35:05.640 回答
3
只要您没有将 CSS 粘贴在element.style：
- 转到您添加的样式。应该有一个链接说检查器样式表：
单击它，它将打开您在源面板中添加的所有 CSS
复制并粘贴它 - 耶！
如果您一直在使用element.style：
您只需右键单击您的 HTML 元素，单击编辑为 HTML，然后复制并粘贴带有内联样式的 HTML。
于 2017-10-24T06:08:50.987 回答
1
要回答有关可以保存更改的任何扩展的问题的最后一部分，有修补程序
它允许您将更改从 Chrome 开发工具直接保存到 GitHub。从那里你可以在 GitHub 上设置一个 post-receive 挂钩来自动更新你的网站。
于 2013-04-05T00:03:41.877 回答