Chrome 开发者工具工作区映射

Question

谁能告诉我 Chrome 开发人员工具工作区映射的工作原理。 我相信它目前仅在 Canary 中可用。

我认为它应该允许我在元素视图中更改 CSS 规则，并将它们自动保存到本地文件，如 Paul Irish 在 Google IO 2013 所展示的那样。我无法使用此功能。

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

Answer 1

它目前仅适用于金丝雀。

编辑：现在在 Chrome 中（从 30+ 版开始）

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

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

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

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

映射什么文件、本地文件或站点文件都没有关系。

5) 那时 devtools 会询问您是否重启。

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

Answer 2

只是对 loislo 所说的更正。 “它目前只适用于金丝雀。”

您可以通过在地址栏中输入 Chrome://flags 来触发稳定版 chrome 版本中的所有这些实验性功能。

Answer 3

谁能告诉我 Chrome 开发人员工具工作区映射是如何工作的？

在当前版本的 Chrome（我有 80 版）中，手动映射选项消失了。 在 Settings > Workspace 下的 DevTools 中，它只显示“自动推断映射”。 根据我的发现，自动映射考虑了以下特征：

(1) Resource name and file name must be equal.
(2) Resource content and file content must be equal.
(3) The header field "Last-Modified" of the resource must be equal to the last modification date of the file on the file system.

请注意，对于（2），编码也必须相同。 例如，混合“UTF-8”和“UTF-8 with BOM”将不起作用。

(3) 在我的情况下不是真的，因为我使用自定义 HttpServlet (Java) 提供资源，其中未设置此标头字段。 现在我在我的 HttpServlet 中设置了这个头字段，Chrome 中的工作区映射正在工作。 简化示例：

    @Override
    protected void doProcess(HttpServletRequest httpRequest, HttpServletResponse httpResponse) throws IOException
    {

        try
        {
            // (1) file_name must be equal to the queried resource name of the website.
            String path = "path/to/the/file_name.js";
            File file = new File(path);

            httpResponse.setContentType("application/javascript");
            // (3) the Last-Modified header field of the resource must match the file's last modified date
            httpResponse.setDateHeader("Last-Modified", file.lastModified());

            // (2) the content of the resource must match the content of the file
            // Note: CopyStream is a utility class not part of standard Java. But you get the idea ;)
            CopyStream.copyAll(new FileInputStream(path), httpResponse.getOutputStream());
        }
        catch (Exception ex)
        {
            ex.printStackTrace();
        }
    }

Answer 4

对我来说，我只需要更新 Chrome（我忽略了一段时间的浅红色“更新”按钮）。