Tincr Chrome扩展更容易安装(不需要运行节点服务器)，还附带LiveReload一样的功能开箱即用!这就是双向编辑!：）

锡。cr的网站

Chrome网络商店链接

安迪的博客文章

这里是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.

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

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

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

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

p.s.

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

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

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

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

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

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

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

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

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

我知道这是一个老帖子，但我这样保存它:

转到资源窗格。 单击Show Navigator(在左侧显示导航器窗格)。 单击所需的CSS文件。(它将在编辑器中打开，包括您所做的所有更改) 右键单击编辑器并保存更改。

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

"资料"你找错地方了。

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

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