"/.well-known/appspecific/com.chrome.devtools.json"' request

Although @bfontaine's answer worked, I wanted to use the feature, so I added this to my remix routes:

[.]well-known.appspecific.[com.chrome.devtools.json].tsx

Just to clarify the routes folder looks like this:

app/
├── routes/
│   ├── [.]well-known.appspecific.[com.chrome.devtools.json].tsx
│   ├── other.routes...
|   ├── other.routes...
└── root.tsx

And in the file itself:

import type { LoaderFunctionArgs } from '@remix-run/node';
import path from 'path';

export const loader = async ({request}: LoaderFunctionArgs) => {
    // From the Node docs on path.resolve(): 
    // If no path segments are passed, path.resolve() will return
    // the absolute path of the current working directory.
    const projectRoot = path.resolve()
    const jsonData = {
       workspace: {
           root: projectRoot,
           uuid: 'my-uuid-xxx',
       }
    };
    return Response.json(jsonData);
};

Not so clear, but editing HTML/CSS/JS from the debugger inspector tool won't edit files, so it's quite middy useful in my opinion. It's just an editor.

This call /.well-known/appspecific/com.chrome.devtools.json does trigger only on the domain localhost.

Files could only be edited from the "workspace" tab in the debugger.

By the way, It is not necessary to add a JSON, as it is possible to add a root directory manually from there.

However, for automation, without creating the JSON manually and keep the workspace open after browser closes, we could create this file tree in the project directory, and after that it's a drop-in in any directory:

Example is PHP, adapting to any language is straightforward.

├── .well-known
│   └── appspecific
│       └── com.chrome.devtools.json
│           ├── index.php
│           └── uuid.txt (will be created automatically)

Where index.php looks like:

<?php

header("Content-Type: application/json; charset=UTF-8");

if (!file_exists("uuid.txt")){
    
    function uuidv4()
    {
      $data = random_bytes(16);
    
      $data[6] = chr(ord($data[6]) & 0x0f | 0x40); // set version to 0100
      $data[8] = chr(ord($data[8]) & 0x3f | 0x80); // set bits 6-7 to 10
        
      return vsprintf('%s%s-%s-%s-%s-%s%s%s', str_split(bin2hex($data), 4));
    }
    
    file_put_contents("uuid.txt", uuidv4());    
}


echo json_encode(["workspace" => ["root" => dirname(__FILE__,4), "uuid" => file_get_contents("uuid.txt")]]);

This makes the directory appears in workspace, it still require to press connect.

Most infos in this page: https://developer.chrome.com/docs/devtools/workspaces