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

How to save CSS changes of Styles panel of Chrome Developer Tools?

提问by Jitendra Vyas

How to save CSS changes of Styles panelof Google Chrome Developer Tools?

如何保存Google Chrome Developer Tools样式面板的CSS 更改？

At tool's website it's mentioned that we can see all change in resource panel

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

But I'm working locally on a CSS file but changes are not showing in Resource panel for me

但是我正在本地处理一个 CSS 文件，但我的资源面板中没有显示更改

By the way Do you know any add-ons , tools to save css changes of Chrome Developer tools?I know for Firebug there are many https://stackoverflow.com/search?q=firebug+CSS+changes+save

顺便说一句，您知道Chrome Developer工具的任何附加组件，保存CSS更改的工具吗？我知道 Firebug 有很多https://stackoverflow.com/search?q=firebug+CSS+changes+save

回答by Philip Ramirez

You can save your CSS changes from Chrome Dev Tools itself. Chrome now allows you to add local folders to your Workspace. After allowing Chrome access to the folder and adding the folder to the local workspace, you can map a web resource to a local resource.

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

• Navigate to the Sources panel of the Developer Tools, Right-clickin the left panel (where the files are listed) and select Add Folder to Workspace. You can get to a stylesheet in the Sources panel quickly by clicking the stylesheet at the top-right of each CSS rule for a selected element in the Elements panel.

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

• After adding the folder, you'll have to give Chrome access to the folder.

• Next, you need to map the network resource to the local resource.

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

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

• After reloading the page, Chrome now loads the local resources for the mapped files. To make things simpler, Chrome only shows you the local resources (so you don't get confused on as to whether you are editing the local or the network resource). To save your changes, press CTRL + Swhen editing the file.

• 重新加载页面后，Chrome 现在会加载映射文件的本地资源。为简单起见，Chrome 仅向您显示本地资源（因此您不会对是编辑本地资源还是网络资源感到困惑）。要保存更改，请CTRL + S在编辑文件时按。

p.s.

ps

You may have to open the mapped file(s) and start editing to get Chrome apply the local version (date 201604.12).

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

回答by Kayce Basques

DevTools tech writer and developer advocate here.

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

Starting in Chrome 65, Local Overridesis a new, lightweight way to do this. This is a different feature than Workspaces.

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

Set up Overrides

设置覆盖

1. Go to Sourcespanel.
2. Go to Overridestab.
3. Click Select Folder For Overrides.
4. Select which directory you want to save your changes to.
5. At the top of your viewport, click Allowto give DevTools read and write access to the directory.
6. Make your changes. In the GIF below, you can see that the background:rosybrownchange persists across page loads.

1. 转到来源面板。
2. 转到覆盖选项卡。
3. 单击选择要覆盖的文件夹。
4. 选择要将更改保存到的目录。
5. 在视口顶部，单击“允许”以授予 DevTools 对该目录的读写访问权限。
6. 进行更改。在下面的 GIF 中，您可以看到background:rosybrown更改在页面加载过程中持续存在。

How overrides work

覆盖的工作原理

When you make a change in DevTools, DevTools saves the change to a modified copy of the file on your computer. When you reload the page, DevTools serves the modified file, rather than the network resource.

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

The difference between overrides and workspaces

覆盖和工作区之间的区别

Workspaces is designed to let you use DevTools as your IDE. It maps your repository code to the network code, using source maps. The real benefit is if you're minifying your code, or using code that needs to get transpiled, like SCSS, then the changes you make in DevTools (usually) get mapped back into your original source code. Overrides, on the other hand, let you modify and save any file on the web. It's a good solution if you just want to quickly experiment with changes, and save those changes across page loads.

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

回答by rjmunro

New versions of Chrome have a feature called workspaces which addresses this issue. You can define which paths on your webserver correspond to which paths on your system, then edit and save with just ctrl-s.

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

See: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

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

回答by Guilherme de Jesus Santos

I know it is an old post, but I save it this way :

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

1. Go to Sources pane.
2. Click Show Navigator (to show the navigator pane on left).
3. Click the CSS file you want. (It will open in the editor, with all changes you made)
4. Right click on editor and Save your changes.

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

You can also see Local Modificationsto see your revisions, very interesting feature. Also work with scripts.

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

回答by thirtydot

You're looking in the wrong section of "Resources".

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

It's not under "Local Storage", it's under "Frames":

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

The above screenshot shows a diff of the original styles against the new modifications made in the devtools. You can right-click the item in the left pane and save it back to disk.

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

回答by Jose Browne

Tincr Chrome extension is easier to install (no need to run node server) AND also comes with LiveReload like functionality out the box! Talk about bi-directional editing! :)

Tincr Chrome 扩展程序更易于安装（无需运行节点服务器），并且还带有开箱即用的 LiveReload 之类的功能！谈谈双向编辑！:)

Tin.cr Website

Tin.cr 网站

Chrome Web Store Link

Chrome 网上应用店链接

Andy's Blog Article

安迪的博客文章

回答by Tomi Mickelsson

Now that Chrome 18 was released last week with the required APIs, I published my chrome extensionin the Chrome web store. The extension automatically saves changes in CSS or JS in Developer tools into the local disk. Go check it out.

既然 Chrome 18 已于上周发布并带有所需的 API，我在 Chrome 网上商店中发布了我的chrome 扩展程序。该扩展程序会自动将开发者工具中 CSS 或 JS 中的更改保存到本地磁盘中。去看看吧。

回答by RoccoB

FYI, If you're using inline styles or modifying the DOM directly (for instance adding an element), workspaces don't solve this problem. That's because the DOM is living in memory and there's not an actual file associated with the active state of the DOM.

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

For that, I like to take a "before" and "after" snapshot of the dom from the console: copy(document.getElementsByTagName('html')[0].outerHTML)

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

Then I place it in a diff tool to see my changes.

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

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

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

回答by FajitaNachos

To answer the last part of your question about any extensions that can save changes, there is hotfix

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

It allows you to save changes from Chrome Dev Tools directly to GitHub. From there you can set up a post-receive hook on GitHub to automatically update your website.

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

回答by JerryGoyal

UPDATE 2019: As other answers are bit outdated, I'll add updated one here. In latest version there's no need to map the chrome folder to filesystem.

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

So, suppose I have a web folder containing HTML,CSS,JS files in desktop which i want to be updated when I make changes in chrome:=

因此，假设我在桌面上有一个包含 HTML、CSS、JS 文件的 Web 文件夹，我想在 chrome 中进行更改时更新这些文件：=

1) You'd need a running local server like node etc, alternatively this vscode extension creates the server for you: live server VSCode extension, install it, run the server.

1）你需要一个像节点等正在运行的本地服务器，或者这个 vscode 扩展为你创建服务器：实时服务器 VSCode 扩展，安装它，运行服务器。

2) load the html page in chrome from running local server.

2) 从运行的本地服务器加载 chrome 中的 html 页面。

3) Open devTools->Sources->Filesystem->Add folder to workspace

3) 打开 devTools->Sources->Filesystem->Add folder to workspace

4) Add the folder which is used in running local server. No additional mapping is required in latest chrome! Ta-da!

4) 添加用于运行本地服务器的文件夹。最新的 chrome 不需要额外的映射！达达！

More on it Edit Files With Workspaces

更多相关信息使用工作区编辑文件

Note that the changes made on the styles tab will NOT reflect on the filesystem files.

Instead you need to go to devtools->source->your_folder and then make your changes there and reload the page to see the effect.

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