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

Question

任何人都可以告诉我Chrome开发人员工具工作区映射的工作原理。 我相信它目前只在加那利可用。

我认为应该允许我对元素视图中的CSS规则进行更改，并将它们自动保存到本地文件中，如Paul IO在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

只是对洛伊索所说的更正。 “目前只适用于金丝雀。”

您可以通过键入来触发稳定的chrome版本中的所有这些实验性功能 Chrome：//地址栏中的标记。

Answer 3

有人可以告诉我Chrome开发者工具工作区映射如何工作吗？

在当前版本的Chrome（我的版本为80）中，手动映射选项已消失。在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与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();
        }
    }