Chrome开发者工具工作区映射

Question

有人能告诉我Chrome开发者工具中的工作区映射是如何工作的吗？

我认为目前只有在Canary版本中才可用。

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

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

- Mike

---

这个回答解决了你的问题吗？如何保存Chrome开发者工具中样式面板的CSS更改？ - GorvGoyl

Answer 1

目前只在Chrome Canary上有效。

编辑：现在在Chrome（版本30+）中也有效

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

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

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

4）结果，在源面板文件选择器窗格中将显示两个顶级元素。在我的情况下，它是localhost:9080站点和devtools本地文件系统文件夹。此时，您需要在文件上下文菜单中创建站点文件和本地文件之间的映射。

无论映射哪个文件，本地文件还是站点文件都没有关系。

5）此时，开发工具将要求您重新启动。

重新启动后，开发工具将在文件窗格中显示单个文件夹条目，并在每次按下Ctrl + S或Cmd + S（Mac上）时将您所做的所有更改应用于本地文件。

- loislo

---

我应该解释一下，当我使用“codeavengers.com”作为我的服务器时，我已经完成了上述所有步骤，但仍然无法正常工作。（在我的Windows hosts文件中，“codeavengers.com”被映射到本地主机）。当我改用本地主机的URL时，它按照上述描述工作。但是，JavaScript调试似乎停止工作了。 - Mike

看起来已经在正常的Chrome版本中发布了。我正在运行30.0.1599.101版本。 - Greg Tatum

@Mike 我在调试方面也遇到了类似的问题... 它一度能够正常工作，但突然间就停止了。Tincr 解决了这个问题吗？ - ford prefect

当您映射单个资源时，DevTools实际上会映射所有内容。 - loislo

@Mike，这正是我遇到的问题，我在JS ?v=1.2.3 的末尾附加了构建号，导致出现问题。谢谢。 - Mark Pieszak - Trilon.io

Answer 2

关于loislo所说的内容有一个更正。 “目前它只在金丝雀版中运行。”

你可以通过在地址栏中输入Chrome://flags来触发所有这些实验性功能，即使是稳定版的Chrome也可以。

- Vennsoh

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”和“带BOM的UTF-8”将无法正常工作。

在我的情况下，（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();
        }
    }

- mihca

Answer 4

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

- user6096790