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

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

然后我把它放在一个diff工具中来查看我的更改。

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

新版本的Chrome有一个叫做工作区的功能来解决这个问题。您可以定义web服务器上的哪些路径对应于系统上的哪些路径，然后使用ctrl-s编辑并保存。

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

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

导航到开发人员工具的Sources面板，右键单击左侧面板(列出文件的地方)并选择将文件夹添加到工作区。通过单击Elements面板中所选元素的每个CSS规则右上方的样式表，可以快速地在Sources面板中找到样式表。

添加文件夹后，你必须让Chrome访问该文件夹。 接下来，需要将网络资源映射到本地资源。

重新加载页面后，Chrome现在加载映射文件的本地资源。为了让事情变得更简单，Chrome只显示本地资源(所以你不会对你是编辑本地资源还是网络资源感到困惑)。要保存更改，请在编辑文件时按CTRL + S。

p.s.

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

这里是DevTools技术作家和开发人员倡导者。

从Chrome 65开始，本地覆盖是一个新的，轻量级的方式来做到这一点。这是一个与工作区不同的特性。

设置覆盖

进入资源面板。 进入覆盖标签。 单击“为覆盖选择文件夹”。 选择要将更改保存到的目录。 在视图的顶部，单击允许，给予DevTools对目录的读写访问权。 做出你的改变。在下面的动图中，你可以看到背景:玫瑰棕色的变化在页面加载中持续存在。

重写如何工作

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

重写和工作区之间的区别

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.

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

所以，假设我有一个网页文件夹包含HTML,CSS,JS文件在桌面上，我想要更新当我在chrome:=更改

1)你需要一个运行的本地服务器，如节点等，或者这个vscode扩展为你创建服务器:live服务器vscode扩展，安装它，运行服务器。

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

3)打开devTools->Sources->Filesystem->将文件夹添加到工作区

4)添加运行本地服务器时使用的文件夹。没有额外的映射需要在最新的chrome!哈!

更多关于它编辑文件与工作区

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

"资料"你找错地方了。

它不在“本地存储”下面，而是在“帧”下面:

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