Debugging sveltekit in vscode

A SvelteKit project!

To debug your SvelteKit project using VSCode, you'll need to set up three things:

1. Launch configuration: Create a launch configuration file in .vscode/launch.json.
2. Debug configuration: Configure the launch.json file to attach to the vite dev process.
3. VSCode debugger: Set breakpoints in your code and start the debugger.

Here's a step-by-step guide:

Step 1: Create a launch configuration file

In your VSCode project folder, create a new file called .vscode/launch.json. Add the following content:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Vite",
            "preLaunchTask": "npm run dev -- --open",
            "outFiles": ["out/**/*.js"]
        }
    ]
}

This configuration tells VSCode to attach to the vite dev process, which is started by the npm run dev -- --open command.

Step 2: Configure the debug configuration

In the same launch.json file, update the configuration to specify the source map and break on load options:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Vite",
            "preLaunchTask": "npm run dev -- --open",
            "outFiles": ["out/**/*.js"],
            "sourceMaps": true,
            "breakOnLoad": true
        }
    ]
}

Step 3: Set breakpoints in your code

Open your src/routes/api/conversation/[id]/+server.ts file in VSCode and set a breakpoint where you want to stop. You can do this by clicking in the left margin of the editor or by pressing F9.

Starting the debugger

1. Open the Command Palette in VSCode by pressing Ctrl + Shift + P (Windows/Linux) or Command + Shift + P (macOS).
2. Type Debug: Start Debugging in the Command Palette and select the Attach to Vite configuration.
3. VSCode will attach to the vite dev process, and the debugger will start.

When you set a breakpoint and run the debugger, your code execution will pause at the breakpoint, allowing you to inspect variables and step through your code.

Note: Make sure you have the vscode-node-debug2 extension installed in VSCode. If you don't have it, you can install it from the Extensions panel in VSCode.

To set up debugging for a SvelteKit project in VS Code, especially for your src/routes/api/conversation/[id]/+server.ts file, you'll need to create a debugging configuration in VS Code that hooks into your development server started by Vite. Here are the steps you need to follow:

1. Install Necessary Extensions

Make sure you have the following VS Code extensions installed:

• Debugger for Chrome or Debugger for Firefox for front-end debugging.
• Svelte for VS Code for enhanced Svelte language support.
• JavaScript Debugger (Nightly) for debugging Node.js applications.

2. Update Your package.json Scripts

Ensure your dev script opens the application with source maps enabled for better debugging. Fortunately, Vite generates source maps by default in development mode, so you usually do not need any special configuration for that.

"scripts": {
    "dev": "vite dev --open",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
    "lint": "prettier --plugin-search-dir . --check . && eslint .",
    "format": "prettier --plugin-search-dir . --write .",
    "test": "MONGODB_URL=mongodb://127.0.0.1:27017/ vitest",
    "updateLocalEnv": "node --loader ts-node/esm scripts/updateLocalEnv.ts",
    "updateProdEnv": "node --loader ts-node/esm scripts/updateProdEnv.ts",
    "populate": "vite-node --options.transformMode.ssr='/.*/' scripts/populate.ts"
}

3. Create a launch.json File

In VS Code, set up your debugging configuration in the .vscode/launch.json file.

1. Press Ctrl+Shift+P (or Cmd+Shift+P on Mac).
2. Select Debug: Open launch.json.
3. Choose Node.js environment if prompted.

Add the following configuration to the launch.json file:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Vite",
            "skipFiles": ["<node_internals>/**"],
            "program": "${workspaceFolder}/node_modules/vite/bin/vite.js",
            "args": ["dev"],
            "cwd": "${workspaceFolder}",
            "sourceMaps": true,
            "protocol": "inspector",
            "console": "integratedTerminal",
            "env": {
                "NODE_ENV": "development"
            }
        }
    ]
}

4. Running the Debugger

1. Open the src/routes/api/conversation/[id]/+server.ts file and set breakpoints by clicking in the gutter to the left of the line numbers.
2. Go to the Debug view by clicking on the Debug icon in the Activity Bar on the side of the window.
3. Select Launch Vite from the dropdown menu at the top of the Debug pane.
4. Click the green play button (or press F5) to start the debugging session.

VS Code will open the integrated terminal, start your Vite development server, and attach the debugger.

5. Debugging in the Browser

If you need to debug the client-side code as well:

1. Install the "Debugger for Chrome" or "Debugger for Firefox" extension based on your browser.
2. Add another configuration in launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Vite",
            "skipFiles": ["<node_internals>/**"],
            "program": "${workspaceFolder}/node_modules/vite/bin/vite.js",
            "args": ["dev"],
            "cwd": "${workspaceFolder}",
            "sourceMaps": true,
            "protocol": "inspector",
            "console": "integratedTerminal",
            "env": {
                "NODE_ENV": "development"
            }
        },
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Debug in Chrome",
            "url": "http://localhost:3000",  // Ensure this matches your Vite dev server URL
            "webRoot": "${workspaceFolder}",
            "breakOnLoad": true,
            "sourceMaps": true
        }
    ]
}

To use this configuration, ensure your Vite server is running (either through the previous configuration or manually using npm run dev -- --open) then select Debug in Chrome and start the debugger.

These steps will set up a VS Code environment for debugging both server-side and client-side code in a SvelteKit project, allowing you to effectively debug your application.