Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
TimoWilhelm opened this issue Nov 23, 2022 · 10 comments · Fixed by #12212
Closed

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

TimoWilhelm opened this issue Nov 23, 2022 · 10 comments · Fixed by #12212
Labels
Milestone

Comments

@TimoWilhelm
Copy link
Contributor

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:

Importance

would make my life easier

Additional Information

No response

@dummdidumm dummdidumm added this to the post-1.0 milestone Nov 23, 2022
@benmccann benmccann added documentation Improvements or additions to documentation vite labels Nov 24, 2022
@jayfresh
Copy link

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

@benmccann benmccann removed the documentation Improvements or additions to documentation label Nov 28, 2022
@gigitalz
Copy link

Upvoting this, truly essential.

@jerriclynsjohn
Copy link

Oh yes this is a big need for SvelteKit

@Leftium
Copy link

Leftium commented Mar 4, 2023

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

@fen89
Copy link

fen89 commented Apr 18, 2023

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
Copy link
Contributor

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
Copy link
Contributor

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

@ftognetto
Copy link

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
Copy link

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
Copy link

hugotox commented May 1, 2024

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:
Screenshot 2024-04-30 at 10 06 56 PM
Screenshot 2024-04-30 at 10 07 57 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.