Today I figured out how to setup
Zed to debug, at the same time, my go server and Svelte web app.
My dev setup for working on my web app is:
- go server is run with
-run-dev arg
- go server provides backend apis and proxies requests it doesn’t handle to a vite dev server that does the serving of JavaScript etc. files from my Svelte code
- go server in
-run-dev mode automatically launches vite dev
- go server runs on port 9339
It’s possible to setup Zed to debug both server and frontend JavaScript code. In retrospect it’s simple, but took me a moment to figure out.
I needed to create the following .zed/debug.json:
// Project-local debug tasks
//
// For more documentation on how to configure debug tasks,
// see: https://zed.dev/docs/debugger
[
{
"adapter": "Delve",
"label": "run go server",
"request": "launch",
"mode": "debug",
"program": ".",
"cwd": "${ZED_WORKTREE_ROOT}",
"args": ["-run-dev", "-no-open"],
"buildFlags": [],
"env": {}
},
{
"adapter": "JavaScript",
"label": "Debug in Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:9339/",
"webRoot": "$ZED_WORKTREE_ROOT/src",
"console": "integratedTerminal",
"skipFiles": ["<node_internals>/**"]
}
]
It’s mostly self-exploratory.
First entry tells Zed to build go program with go build . and run the resulting executable under the debugger with -run-dev -no-open args.
Second entry tells to launch Chrome in debug mode with http://localhost:9339/ and that files seen by Chrome come from src/ directory i.e. if browser loads /foo.js the source file is src/foo.js. This is necessary to be able to set breakpoints in Zed and have them propagate to Chrome.
This eliminates the need for terminal so I can edit and debug with just Zed and Chrome.
This is a great setup. I’m impressed with
Zed.