chore(vscode): fix dev-server task matcher and add debuggable-Chrome task

Disable Vite's ANSI output (NO_COLOR/FORCE_COLOR) so the background-task
problem matcher's endsPattern reliably matches, fixing the
'Error exists after running preLaunchTask' failure. Add a
'Launch Debuggable Chrome' task (:9222, persistent ~/.chrome-rw-debug
profile) and an attach compound so you can debug the frontend in a Chrome
you control and stay logged in. Update DEBUGGING.md.
This commit is contained in:
NeilClack
2026-09-29 13:41:18 -05:00
parent e9f94b72ee
commit cc4aa8717e
3 changed files with 55 additions and 11 deletions
+22
View File
@@ -41,6 +41,28 @@ Breakpoints work in `.svelte` `<script>` blocks and `$lib/**`.
--remote-debugging-port=9222 --user-data-dir=/tmp/rw-chrome
```
### Use your own (logged-in) Chrome — recommended workflow
If you'd rather keep using a Chrome you control (logged in, extensions, etc.):
1. Run the task **Terminal → Run Task… → "Launch Debuggable Chrome"**. This
opens Chrome with the debugging port on `:9222` using a dedicated profile at
`~/.chrome-rw-debug`, so it can run alongside your normal Chrome.
2. Log in once (the profile is persistent, so you only do this the first time)
and navigate to `http://localhost:5173`.
3. Make sure the dev server is running (task **"Start Dev Server"**), then start
the launch profile **"Frontend: Chrome (attach)"** (or press F5 with it
selected). Breakpoints in VS Code and Chrome DevTools both work.
Handy shortcut: **"Frontend: Attach to my Chrome (starts server)"** starts the
dev server and attaches in one step (Chrome still needs to be debuggable from
step 1).
If Chrome is already open but _without_ the debugging port, VS Code cannot
attach — close it and relaunch via the task. Launching your everyday Chrome
with `--remote-debugging-port` also works; the task just avoids disturbing that
profile.
### Safari
VS Code has **no Safari debugger**, so client-side breakpoints in the VS Code