chore(vscode): remove debugger configuration
This commit is contained in:
NeilClack
Vendored
-95
@@ -1,95 +0,0 @@
|
|||||||
# Debugging the Portal in VS Code
|
|
||||||
|
|
||||||
Two independent debug targets: **backend** (server-side SvelteKit code) and
|
|
||||||
**frontend** (client-side Svelte/browser code). Pick from the Run and Debug
|
|
||||||
panel (⇧⌘D).
|
|
||||||
|
|
||||||
## Backend (server-side code)
|
|
||||||
|
|
||||||
Breakpoints work in `+page.server.ts`, `+server.ts`, `$lib/server/**`,
|
|
||||||
`hooks.server.ts`, `src/lib/db.ts`, etc.
|
|
||||||
|
|
||||||
1. Run and Debug → **"Backend: Attach to Dev Server"** (or press F5 with it
|
|
||||||
selected). It starts the dev server (Vite with the Node inspector on
|
|
||||||
`:9229`) and attaches automatically.
|
|
||||||
2. Open a server file, click in the gutter to set a breakpoint, then interact
|
|
||||||
with the app — the breakpoint hits.
|
|
||||||
|
|
||||||
Alternatives:
|
|
||||||
|
|
||||||
- **"Backend: Launch Dev Server"** — VS Code starts Vite itself and debugs it
|
|
||||||
directly (no separate task). Good if you want to stop/restart cleanly.
|
|
||||||
- **"Backend: Attach (no server start)"** — attach when the server is already
|
|
||||||
running with the inspector (used by the Full Stack compound).
|
|
||||||
|
|
||||||
> **Why not `npm run dev`?** `NODE_OPTIONS=--inspect` on `npm` puts the
|
|
||||||
> inspector on the _npm_ process, not Vite, so your breakpoints never hit. The
|
|
||||||
> tasks/configs run `./node_modules/.bin/vite` **directly** so the inspector owns
|
|
||||||
> the process that actually executes the SSR code.
|
|
||||||
|
|
||||||
## Frontend (client-side code)
|
|
||||||
|
|
||||||
Breakpoints work in `.svelte` `<script>` blocks and `$lib/**`.
|
|
||||||
|
|
||||||
1. Run and Debug → **"Frontend: Chrome"**. This launches Google Chrome, starts
|
|
||||||
the dev server if needed, and maps Vite's served modules back to your source
|
|
||||||
files. Breakpoints in the Sources panel and in VS Code both work.
|
|
||||||
2. If Chrome is already open with your logged-in session, start it once with a
|
|
||||||
debug port and use **"Frontend: Chrome (attach)"**:
|
|
||||||
```sh
|
|
||||||
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
|
|
||||||
--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
|
|
||||||
editor require a Chromium browser (Chrome/Edge/Brave). You can still debug
|
|
||||||
Safari, just in Safari's own tools:
|
|
||||||
|
|
||||||
1. Safari → Settings → Advanced → enable **"Show features for web developers"**.
|
|
||||||
2. Develop menu → **Show Web Inspector** (⌥⌘I) → Sources tab.
|
|
||||||
3. Set breakpoints there. Source maps are served by Vite, so you'll see your
|
|
||||||
`.svelte` and `.ts` files, not compiled output.
|
|
||||||
|
|
||||||
For the best editor-integrated experience, install Chrome:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
brew install --cask google-chrome
|
|
||||||
```
|
|
||||||
|
|
||||||
## Full stack
|
|
||||||
|
|
||||||
**"Full Stack (Backend + Chrome)"** in the compounds list starts exactly one
|
|
||||||
dev server, attaches the Node debugger, and opens Chrome — debug both sides at
|
|
||||||
once.
|
|
||||||
|
|
||||||
## Notes
|
|
||||||
|
|
||||||
- Only one process can bind `:9229` (inspector) and one `:5173` (dev server).
|
|
||||||
If a launch fails with "address already in use", stop the other server or run
|
|
||||||
`pkill -f "vite dev"`.
|
|
||||||
- The dev server task keeps its terminal open ("Terminal" panel) so you can see
|
|
||||||
Vite output and the inspector URL.
|
|
||||||
Vendored
-135
@@ -1,135 +0,0 @@
|
|||||||
{
|
|
||||||
"version": "0.2.0",
|
|
||||||
"configurations": [
|
|
||||||
{
|
|
||||||
// ── BACKEND (server-side SvelteKit code) ─────────────────────────
|
|
||||||
// Recommended. Starts the Vite dev server (with the Node inspector on
|
|
||||||
// :9229) and attaches. Set breakpoints in +page.server.ts,
|
|
||||||
// +server.ts, $lib/server/**, hooks.server.ts, etc.
|
|
||||||
"name": "Backend: Attach to Dev Server",
|
|
||||||
"type": "node",
|
|
||||||
"request": "attach",
|
|
||||||
"port": 9229,
|
|
||||||
"cwd": "${workspaceFolder}",
|
|
||||||
"preLaunchTask": "Start Dev Server (Node Inspector)",
|
|
||||||
"restart": true,
|
|
||||||
"skipFiles": ["<node_internals>/**", "**/node_modules/**"],
|
|
||||||
"sourceMaps": true,
|
|
||||||
"resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// Same, but without a preLaunchTask — used by the Full Stack compound
|
|
||||||
// so only one dev server is started.
|
|
||||||
"name": "Backend: Attach (no server start)",
|
|
||||||
"type": "node",
|
|
||||||
"request": "attach",
|
|
||||||
"port": 9229,
|
|
||||||
"cwd": "${workspaceFolder}",
|
|
||||||
"restart": true,
|
|
||||||
"skipFiles": ["<node_internals>/**", "**/node_modules/**"],
|
|
||||||
"sourceMaps": true,
|
|
||||||
"resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// Starts the server itself (no separate task). Runs Vite directly so
|
|
||||||
// the inspector owns the SSR process (running via `npm run dev` puts
|
|
||||||
// the inspector on npm instead, and your breakpoints never hit).
|
|
||||||
"name": "Backend: Launch Dev Server",
|
|
||||||
"type": "node",
|
|
||||||
"request": "launch",
|
|
||||||
"program": "${workspaceFolder}/node_modules/vite/bin/vite.js",
|
|
||||||
"args": ["dev", "--port", "5173", "--strictPort"],
|
|
||||||
"cwd": "${workspaceFolder}",
|
|
||||||
"console": "integratedTerminal",
|
|
||||||
"env": {
|
|
||||||
"NODE_OPTIONS": "--enable-source-maps",
|
|
||||||
"NODE_EXTRA_CA_CERTS": "./digital-ocean.crt"
|
|
||||||
},
|
|
||||||
"skipFiles": ["<node_internals>/**", "**/node_modules/**"],
|
|
||||||
"sourceMaps": true
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
// ── FRONTEND (client-side Svelte/browser code) ───────────────────
|
|
||||||
// Launches Google Chrome wired to the Vite dev server (starts it for
|
|
||||||
// you). Set breakpoints in .svelte <script> blocks and $lib/**.
|
|
||||||
// Requires Chrome (or another Chromium browser) to be installed.
|
|
||||||
"name": "Frontend: Chrome",
|
|
||||||
"type": "chrome",
|
|
||||||
"request": "launch",
|
|
||||||
"preLaunchTask": "Start Dev Server",
|
|
||||||
"url": "http://localhost:5173",
|
|
||||||
"webRoot": "${workspaceFolder}",
|
|
||||||
"sourceMaps": true,
|
|
||||||
"sourceMapPathOverrides": {
|
|
||||||
"vite:///src/*": "${webRoot}/src/*",
|
|
||||||
"/@fs/*": "*"
|
|
||||||
},
|
|
||||||
"skipFiles": ["<node_internals>/**"]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// Chrome only, no dev-server start — used by the Full Stack compound.
|
|
||||||
"name": "Frontend: Chrome (no server start)",
|
|
||||||
"type": "chrome",
|
|
||||||
"request": "launch",
|
|
||||||
"url": "http://localhost:5173",
|
|
||||||
"webRoot": "${workspaceFolder}",
|
|
||||||
"sourceMaps": true,
|
|
||||||
"sourceMapPathOverrides": {
|
|
||||||
"vite:///src/*": "${webRoot}/src/*",
|
|
||||||
"/@fs/*": "*"
|
|
||||||
},
|
|
||||||
"skipFiles": ["<node_internals>/**"]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// Attach to a Chrome you are already using (with your logged-in
|
|
||||||
// session). Chrome must have been started with a debugging port.
|
|
||||||
// Easiest path: run the "Launch Debuggable Chrome" task once, log in,
|
|
||||||
// navigate to http://localhost:5173, then start this profile.
|
|
||||||
// It does NOT start the dev server or a browser for you.
|
|
||||||
"name": "Frontend: Chrome (attach)",
|
|
||||||
"type": "chrome",
|
|
||||||
"request": "attach",
|
|
||||||
"port": 9222,
|
|
||||||
"url": "http://localhost:5173/*",
|
|
||||||
"webRoot": "${workspaceFolder}",
|
|
||||||
"sourceMaps": true,
|
|
||||||
"sourceMapPathOverrides": {
|
|
||||||
"vite:///src/*": "${webRoot}/src/*",
|
|
||||||
"/@fs/*": "*"
|
|
||||||
},
|
|
||||||
"skipFiles": ["<node_internals>/**"]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// If you specifically want Edge instead of Chrome.
|
|
||||||
"name": "Frontend: Edge",
|
|
||||||
"type": "msedge",
|
|
||||||
"request": "launch",
|
|
||||||
"preLaunchTask": "Start Dev Server",
|
|
||||||
"url": "http://localhost:5173",
|
|
||||||
"webRoot": "${workspaceFolder}",
|
|
||||||
"sourceMaps": true,
|
|
||||||
"sourceMapPathOverrides": {
|
|
||||||
"vite:///src/*": "${webRoot}/src/*",
|
|
||||||
"/@fs/*": "*"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"compounds": [
|
|
||||||
{
|
|
||||||
// Backend + frontend together, starting exactly one dev server.
|
|
||||||
"name": "Full Stack (Backend + Chrome)",
|
|
||||||
"configurations": ["Backend: Attach (no server start)", "Frontend: Chrome (no server start)"],
|
|
||||||
"preLaunchTask": "Start Dev Server (Node Inspector)",
|
|
||||||
"stopAll": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// Start the dev server, then attach to your already-open, logged-in
|
|
||||||
// Chrome. Run the "Launch Debuggable Chrome" task once beforehand.
|
|
||||||
"name": "Frontend: Attach to my Chrome (starts server)",
|
|
||||||
"configurations": ["Frontend: Chrome (attach)"],
|
|
||||||
"preLaunchTask": "Start Dev Server",
|
|
||||||
"stopAll": true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
Vendored
-10
@@ -1,10 +0,0 @@
|
|||||||
{
|
|
||||||
// Keeps the JS debugger from stepping into node_modules / internal frames.
|
|
||||||
"debug.javascript.autoAttachFilter": "onlyWithFlag",
|
|
||||||
"debug.javascript.terminalOptions": {
|
|
||||||
"skipFiles": ["<node_internals>/**", "**/node_modules/**"]
|
|
||||||
},
|
|
||||||
// Lets the Node debugger map Vite's served modules back to your source files.
|
|
||||||
"debug.javascript.usePreview": true,
|
|
||||||
"debug.javascript.breakOnConditionalError": false
|
|
||||||
}
|
|
||||||
Vendored
-63
@@ -1,63 +0,0 @@
|
|||||||
{
|
|
||||||
"version": "2.0.0",
|
|
||||||
"tasks": [
|
|
||||||
{
|
|
||||||
"label": "Start Dev Server",
|
|
||||||
"detail": "Vite dev server, no inspector (use with the Frontend launch configs).",
|
|
||||||
"type": "shell",
|
|
||||||
"command": "NO_COLOR=1 FORCE_COLOR=0 NODE_EXTRA_CA_CERTS=./digital-ocean.crt ./node_modules/.bin/vite dev --port 5173 --strictPort",
|
|
||||||
"isBackground": true,
|
|
||||||
"presentation": {
|
|
||||||
"reveal": "always",
|
|
||||||
"panel": "dedicated",
|
|
||||||
"clear": true
|
|
||||||
},
|
|
||||||
"problemMatcher": [
|
|
||||||
{
|
|
||||||
"owner": "vite",
|
|
||||||
"pattern": [{ "regexp": "^.*$", "file": 0, "location": 0, "message": 0 }],
|
|
||||||
"background": {
|
|
||||||
"activeOnStart": true,
|
|
||||||
"beginsPattern": "^\\s*VITE .*ready",
|
|
||||||
"endsPattern": "^\\s*.*Local:.*http"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Start Dev Server (Node Inspector)",
|
|
||||||
"detail": "Vite dev server with the Node inspector on :9229. Run Vite directly (not via npm) so the inspector owns the process that actually executes the SSR code.",
|
|
||||||
"type": "shell",
|
|
||||||
"command": "NO_COLOR=1 FORCE_COLOR=0 NODE_OPTIONS='--inspect=9229 --enable-source-maps' NODE_EXTRA_CA_CERTS=./digital-ocean.crt ./node_modules/.bin/vite dev --port 5173 --strictPort",
|
|
||||||
"isBackground": true,
|
|
||||||
"presentation": {
|
|
||||||
"reveal": "always",
|
|
||||||
"panel": "dedicated",
|
|
||||||
"clear": true
|
|
||||||
},
|
|
||||||
"problemMatcher": [
|
|
||||||
{
|
|
||||||
"owner": "vite",
|
|
||||||
"pattern": [{ "regexp": "^.*$", "file": 0, "location": 0, "message": 0 }],
|
|
||||||
"background": {
|
|
||||||
"activeOnStart": true,
|
|
||||||
"beginsPattern": "^\\s*VITE .*ready",
|
|
||||||
"endsPattern": "^\\s*.*Local:.*http"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Launch Debuggable Chrome",
|
|
||||||
"detail": "Opens Google Chrome with the remote-debugging port on :9222, using a separate profile so it can run alongside your normal Chrome. Log in once; then use the 'Frontend: Chrome (attach)' launch profile. Leaves Chrome open (not a background task).",
|
|
||||||
"type": "shell",
|
|
||||||
"command": "\"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome\" --remote-debugging-port=9222 --user-data-dir=\"${userHome}/.chrome-rw-debug\" http://localhost:5173",
|
|
||||||
"isBackground": false,
|
|
||||||
"presentation": {
|
|
||||||
"reveal": "always",
|
|
||||||
"panel": "dedicated"
|
|
||||||
},
|
|
||||||
"problemMatcher": []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user