Chrome developer tools workspace mappings

Question

Can anyone tell me how the Chrome developer tools workspace mappings work. I believe it is only available in Canary at the moment.

I thought it is supposed to allow

Answer 1

Can anyone tell me how the Chrome developer tools workspace mappings work?

In current version of Chrome (I have version 80) the manual mapping option is gone. In the DevTools under Settings > Workspace it only says "Mappings are inferred automatically". From what I found the automatic mapping considers the following characteristics:

(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.

Note that for (2) also the encoding must be the same. For example mixing "UTF-8" and "UTF-8 with BOM" will not work.

(3) Was not true in my case because I served the resource using a custom HttpServlet (Java), in which this header field was not set. Now I set this header field in my HttpServlet and the workspace mapping in Chrome is working. Simplified example:

    @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();
        }
    }