google-chrome - Chrome 开发者工具工作区映射

Question

谁能告诉我 Chrome 开发者工具工作区映射是如何工作的。我相信目前它仅在加那利可用。

我认为它应该允许我在元素 View 中更改 CSS 规则，并将它们自动保存到本地文件中，正如 Paul Irish 在 Google IO 2013 上演示的那样。我无法让此功能发挥作用.

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

Answer 1

目前仅适用于金丝雀。

编辑:现在在 Chrome 中(自版本 30+ 起)

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

2) 在此部分中，您需要单击“添加文件夹”项。它将显示文件夹选择对话框。

3) 选择文件夹后，您将看到有关该文件夹访问权限的信息栏。

4) 因此，您将在源面板文件选择器 Pane 中看到两个顶级元素。就我而言，它是 localhost:9080 站点和 devtools 本地文件系统文件夹。此时您需要在站点文件和本地文件之间创建映射。您可以通过文件的上下文菜单来执行此操作。

映射什么文件、本地文件或站点文件并不重要。

5) 此时 devtools 会询问您是否重新启动。

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