Documentation on how to debug frontend and backend code with source maps

[TimoWilhelm]

Describe the problem

I'm trying to setup a full stack debugging environment for SvelteKit.

I'm using the following launch.json and I'm starting the server with NODE_OPTIONS='--inspect' vite dev but I'm unable to hit any breakpoints.

See Code

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "sourceMaps": true,
      "webRoot": "${workspaceFolder}/src",
    },
    {
      "name": "node:attach",
      "type": "node",
      "request": "attach",
      "sourceMaps": true,
      "skipFiles": [
        "<node_internals>/**"
      ],
    },
  ]
}

If I manually insert some debugger statements, I end up in the generated chunk js and the source maps do not seem to apply properly

There also seem to be many different options to enable source map generation. I'm having a hard time understanding which option will affect what files.

svelte.config.js

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: sveltePreprocess({
    sourceMap: true,
    ...
  }),
  compilerOptions: {
    enableSourcemap: true,
  },

  kit: {
    ...
  },
};

vite.config.ts

const config: UserConfig = {
  plugins: [...],
  build: {
    sourcemap: true,
  },
};

tsconfig.json

{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
  }
}

Describe the proposed solution

Something like https://nextjs.org/docs/advanced-features/debugging that explains how you can debug your SvelteKit frontend and backend code with full source maps support using either the VS Code debugger or Chrome DevTools.

Alternatives considered

I've found a few different sources for how to set up debugging:

• https://stackoverflow.com/questions/67276886/how-to-get-sourcemaps-working-with-svelte-preprocess-typescript-sourced-ts-fi
• https://github.com/sveltejs/kit/discussions/6374
• https://github.com/vitejs/vite/issues/3288 (Is this issue blocking SSR debugging?)
• https://github.com/sveltejs/kit/issues/1144

Importance

would make my life easier

Additional Information

No response

[jayfresh]

Agree this would be a big plus. Looks like the vite change that was supposed to unblock #1144 hasn't gone through - https://github.com/vitejs/vite/pull/3928

[gigitalz]

Upvoting this, truly essential.

[jerriclynsjohn]

Oh yes this is a big need for SvelteKit

[Leftium]

Someone posted this workaround on Reddit (but I haven't been able to get it to work. Maybe a Windows+git bash issue?).

[fen89]

Agree this would be a big plus. Looks like the vite change that was supposed to unblock #1144 hasn't gone through - vitejs/vite#3928

Looks like the vite issue has been gone through if I inspected it correctly. What is the state of this issue at the moment?

I really would love to get this working with sveltekit without the help of any third party tool - this should be a core functionality.

[theetrain]

This is currently possible in VSCode with the following .vscode/launch.json config:

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

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

Replace runtimeArgs and runtimeExecutable with your respective dev script and package manager.

Running 'Both' will open Chrome and run your Node.js/Vite server in debug mode, allowing you to add breakpoints for all client and server code, including JS code within <script> in .svelte files. It's important to use the provided browser that launches with Vite sine it attaches source maps and your Node.js server. And here's my video walkthrough: https://youtu.be/OG70PKD0hEU?t=211

[ranjan-purbey]

@theetrain that only works for client-side debugging, but not for server-side code, for example inside a +page.server.ts file

[ftognetto]

It works on server side if you put debugger; on the contrary, with vavite-loader breakpoints work on the server but on the client you have to use debuggers;

😭😭😭

[YugoCode]

This is currently possible in VSCode with the following .vscode/launch.json config:

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

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

Replace runtimeArgs and runtimeExecutable with your respective dev script and package manager.

Running 'Both' will open Chrome and run your Node.js/Vite server in debug mode, allowing you to add breakpoints for all client and server code, including JS code within <script> in .svelte files. It's important to use the provided browser that launches with Vite sine it attaches source maps and your Node.js server. And here's my video walkthrough: https://youtu.be/OG70PKD0hEU?t=211

For me this launch.json works for client- and server-side debugging simultaneously 😊 Thanks!

[hugotox]

Not sure if this is still relevant, but on VSCode you can debug server side code with the built-in JS Debug Terminal, no config needed. Just run your dev command from that terminal and it just works: