Chrome 开发者工具工作区映射

Posted

技术标签:

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

谁能告诉我 是如何工作的。 我相信它目前仅在 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? 【参考方案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。

【讨论】:

以上是关于Chrome 开发者工具工作区映射的主要内容,如果未能解决你的问题,请参考以下文章

Chrome 开发工具未映射 ts 源

如何在 Chrome 开发工具中获取 Map Angular CLI css 文件?

如何将 JS 源映射添加到 Chrome 开发工具中?

如何获取源映射以使用 Chrome 开发工具和 webpack?

干货 | 解锁Chrome开发工具的隐藏功能

Redux 开发工具在 chrome 中停止工作