A Visual Studio Code (VSCode) launch config for SvelteKit that allows you to set breakpoints and debug your code inside VSCode. This works for both server side and client side debugging.

Assuming that you have an updated default SvelteKit project where the dev command is defined as "dev": "vite dev".

Create a new launch config with the following content:

{
	"version": "0.2.0",
	"configurations": [
		{
			"name": "Launch server",
			"request": "launch",
			"runtimeArgs": ["run-script", "dev"],
			"runtimeExecutable": "npm",
			"skipFiles": ["<node_internals>/**"],
			"type": "node",
			"console": "integratedTerminal"
		},

		{
			"type": "msedge",
			"request": "launch",
			"name": "Launch Edge",
			"url": "http://127.0.0.1:5173",
			"webRoot": "${workspaceFolder}"
		}
	],
	"compounds": [
		{
			"name": "Both",
			"configurations": ["Launch server", "Launch Edge"]
		}
	]
}

This will give you 3 launch configs:

• Launch Server - This will run the dev server in dev mode, allowing you to set breakpoints for server side code.
• Launch Edge - This will use the Edge Tools for VSCode and allows you to set breakpoints for client side code inside of VSCode. You can swap this for Chrome if you prefer.
• Both - Allows for debugging for both the server side and the client side.

That's it. happy debugging.