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

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

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

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

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

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

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

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

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

它允许您将更改从Chrome开发工具直接保存到GitHub。从那里，你可以在GitHub上设置一个接收后的钩子来自动更新你的网站。

只要你没有在element.style中插入CSS:

转到您已添加的样式。应该有一个链接说inspector-stylesheet:

单击它，它将打开您在源代码面板中添加的所有CSS 复制粘贴——耶!

如果你一直在使用element.style:

您只需右键单击HTML元素，单击Edit as HTML，然后复制并粘贴带有内联样式的HTML。

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

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

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

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

p.s.

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

"资料"你找错地方了。

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

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

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