.vscode/DEBUGGING.md

@@ -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

.vscode/launch.json

@@ -82,10 +82,11 @@
 			"skipFiles": ["<node_internals>/**"]
 		},
 		{
-			// Attach to a Chrome you started yourself with:
-			//   /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
-			//     --remote-debugging-port=9222 --user-data-dir=/tmp/rw-chrome
-			// Handy when Chrome is already open with your logged-in session.
+			// 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",
@@ -96,7 +97,8 @@
 			"sourceMapPathOverrides": {
 				"vite:///src/*": "${webRoot}/src/*",
 				"/@fs/*": "*"
-			}
+			},
+			"skipFiles": ["<node_internals>/**"]
 		},
 		{
 			// If you specifically want Edge instead of Chrome.
@@ -120,6 +122,14 @@
 			"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
 		}
 	]
 }

.vscode/tasks.json

@@ -5,7 +5,7 @@
 			"label": "Start Dev Server",
 			"detail": "Vite dev server, no inspector (use with the Frontend launch configs).",
 			"type": "shell",
-			"command": "NODE_EXTRA_CA_CERTS=./digital-ocean.crt ./node_modules/.bin/vite dev --port 5173 --strictPort",
+			"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",
@@ -18,8 +18,8 @@
 					"pattern": [{ "regexp": "^.*$", "file": 0, "location": 0, "message": 0 }],
 					"background": {
 						"activeOnStart": true,
-						"beginsPattern": "^.*VITE.*v",
-						"endsPattern": "^.*Local:.*$"
+						"beginsPattern": "^\\s*VITE .*ready",
+						"endsPattern": "^\\s*.*Local:.*http"
 					}
 				}
 			]
@@ -28,7 +28,7 @@
 			"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": "NODE_OPTIONS='--inspect=9229 --enable-source-maps' NODE_EXTRA_CA_CERTS=./digital-ocean.crt ./node_modules/.bin/vite dev --port 5173 --strictPort",
+			"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",
@@ -41,11 +41,23 @@
 					"pattern": [{ "regexp": "^.*$", "file": 0, "location": 0, "message": 0 }],
 					"background": {
 						"activeOnStart": true,
-						"beginsPattern": "^.*VITE.*v",
-						"endsPattern": "^.*Local:.*$"
+						"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": []
 		}
 	]
 }