Chrome 开发者工具工作区映射答案

【问题标题】：Chrome developer tools workspace mappingsChrome 开发者工具工作区映射
【发布时间】：2013-05-13 23:11:55
【问题描述】：

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

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

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

【问题讨论】：

这能回答你的问题吗？ How to save CSS changes of Styles panel of Chrome Developer Tools?

标签： google-chrome google-chrome-devtools

【解决方案1】：

谁能告诉我 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();
        }
    }

【讨论】：

【解决方案2】：

目前仅适用于金丝雀。

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

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

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

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

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

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

5) 那时 devtools 会询问您是否需要重新启动。

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

【讨论】：

我应该解释说我完成了上述所有步骤，但当我使用“codeavengers.com”作为我的服务器时它仍然无法正常工作。（“codeavengers.com”在我的 Windows 主机文件中映射到 localhost）。当我更改为在我的网址中使用 localhost 时，它的工作原理如上所述。但是，JavaScript 调试似乎停止工作。
我随后选择安装 Chrome 扩展程序 Tincr。到目前为止效果很好。 addyosmani.com/blog/…
您需要仔细检查是否应用了映射。您的站点结构可能无法反映本地文件夹结构。您还需要为两个 url 提供两个映射，一个用于 localhost，另一个用于 codeavengers.com。如果 devtools 无法将本地文件映射到站点文件，则它无法在其中设置断点。
它现在似乎在正常的 Chrome 版本中。我正在运行版本 30.0.1599.101
当您映射单个资源时，DevTools 实际上会映射所有内容。

【解决方案3】：

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

您可以在稳定的 chrome 版本中触发所有这些实验性功能，方法是键入地址栏中的 Chrome://flags。

【讨论】：