38

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

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

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

4

4 回答 4

56

它目前仅适用于金丝雀。

编辑：现在在 Chrome 中（自 30+ 版起）

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

设置页面截图

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

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

访问权限信息栏截图

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

映射截图

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

5) 那时 devtools 会询问你关于重启的问题。 重启截图

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

于 2013-05-19T18:40:46.020 回答
4

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

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

于 2013-08-13T03:20:58.617 回答
0

谁能告诉我 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();
        }
    }
于 2020-02-07T07:58:02.313 回答
0

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

于 2022-03-05T15:27:37.043 回答