Chrome开发人员工具工作区映射

任何人都可以告诉我Chrome开发人员工具工作区映射是如何工作的。 我相信现在只有加那利才有。

我认为它应该允许我在元素视图中对CSS规则进行更改,并将它们自动保存到本地文件,如Paul Irish在Google IO 2013中所示。我无法使用此function。

https://developers.google.com/events/io/sessions/325206725

它现在只在金丝雀工作。

编辑:现在在Chrome中(自30以上)

1)你需要打开devtools设置面板。 它有“工作区”部分。

设置页面的屏幕截图

2)在这一部分,你需要点击“添加文件夹”项目。 它会显示文件夹select对话框。

3)select文件夹后,您将看到一个关于文件夹访问权限的信息栏。

访问权限信息栏的屏幕截图

4)因此,您将在“来源”面板文件select器窗格中看到两个顶层元素。 在我的情况下,它是localhost:9080站点和devtools本地文件系统文件夹。 此时您需要创build站点文件和本地文件之间的映射。 你可以通过文件上下文菜单来做到这一点。

屏幕截图

本地或站点文件映射哪个文件并不重要。

5)那个时候devtools会问你重启。 重启截图

重新启动后,devtools将在文件窗格中显示单个文件夹条目,并且每次在Mac上按Ctrl + S或Cmd + S时,都会将所做的所有更改应用到本地文件。

只是更正了loislo所说的话。 “现在只能在金丝雀里工作。”

您可以通过在地址栏中inputChrome://标记来在稳定的Chrome版本中触发所有这些实验function。