In Chrome Dev Tools you can setup a mapping between the files web server sends to the browser and files on disk. This allows editing files in dev tools and having those changes saved to a file, which is handy.
It’s quite simple. Your server needs to serve /.well-known/appspecific/com.chrome.devtools.json file with content that looks like:
{
"workspace": {
"root": "C:/Users/kjk/src/edna/src",
"uuid": "8f6e3d9a-4b7c-4c1e-a2d5-7f9b1e3c1384"
}
}
The uuid should be unique for each project. I got mine by asking
Grok to
generate random version 4 uuid.
On Windows the path has to use Unix slash. It didn’t work when I sent Windows path. Shocking incompetence of the devs.
This only works from localhost. Security.
This file is read when you open dev tools in chrome. If you already have it open, you have to close and re-open.
First time you’ll have to give Chrome permissions to access that source director on disk. You need to:
- switch to
sources tab in dev tools
- reveal left side panel (if hidden)
- switch to
workspace tab there
- you should see the mapping is already configured but you need to click
connect button
Apparently bun sends this automatically.
Here’s how I send it in my Go server:
func serveChromeDevToolsJSON(w http.ResponseWriter, r *http.Request) {
// your directory might be different than "src"
srcDir, err := filepath.Abs("src")
must(err)
// stupid Chrome doesn't accept windows-style paths
srcDir = filepath.ToSlash(srcDir)
// uuid should be unique for each workspace
uuid := "8f6e3d9a-4b7c-4c1e-a2d5-7f9b0e3c1284"
s := `{
"workspace": {
"root": "{{root}}",
"uuid": "{{uuid}}"
}
}`
s = strings.ReplaceAll(s, "{{root}}", srcDir)
s = strings.ReplaceAll(s, "{{uuid}}", uuid)
logf("serveChromeDevToolsJSON:\n\n%s\n\n", s)
w.Header().Set("Content-Type", "application/json")
w.Write(data)
}