kit
kit copied to clipboard
Documentation on how to debug frontend and backend code with source maps
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
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
Upvoting this, truly essential.
Oh yes this is a big need for SvelteKit
Someone posted this workaround on Reddit (but I haven't been able to get it to work. Maybe a Windows+git bash issue?).
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.
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
@theetrain that only works for client-side debugging, but not for server-side code, for example inside a +page.server.ts
file
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;
😭😭😭
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
andruntimeExecutable
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!
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: