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

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

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

锡。cr的网站

Chrome网络商店链接

安迪的博客文章

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

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

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

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

这里是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，然后在那里进行更改并重新加载页面以查看效果。

现在Chrome 18已经在上周发布了所需的api，我在Chrome网络商店中发布了我的Chrome扩展。扩展自动保存CSS或JS在开发工具到本地磁盘的更改。去看看吧。