Docs: Show how to attach debugger for both server + client code

[marvinhagemeister]

See title

[csvn]

Could it be helpful to also generate a launch.json via the init script if the VSCode option is set to true?

[marvinhagemeister]

Sure, that's a good idea.

[evilmonkey19]

Is there a way at the moment to attach the debugger on the server-side? Using the default launch.json using deno doesn't work

[marvinhagemeister]

Not sure about launch.json but doing it from the CLI works like this to attach a debugger to the server:

deno run -A --inspect npm:vite

[evilmonkey19]

I have tried and i didn't work in the launch.json. The issue is that it doesn't stop at the breakpoint.

[csvn]

You may need to use --inspect-wait if your breakpoint is very early. Just --inspect may run past the code before the inspector has time to attach.

Debugging options:
      --inspect[=<HOST_AND_PORT>]       Activate inspector on host:port [default: 127.0.0.1:9229]        
      --inspect-brk[=<HOST_AND_PORT>]   Activate inspector on host:port, wait for debugger to connect and break at the start of user script
      --inspect-wait[=<HOST_AND_PORT>]  Activate inspector on host:port and wait for debugger to connect before running user code

[evilmonkey19]

Still doesn't work. This is the config i'm using:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

        {
            "request": "launch",
            "name": "Launch Program",
            "type": "node",
            "cwd": "${workspaceFolder}",
            "env": {},
            "runtimeExecutable": "~/.deno/bin/deno",
            "runtimeArgs": [
                "run",
                "-A",
                "--inspect-wait",
                "npm:vite"
            ],
            "attachSimplePort": 5173
        }
    ]
}

[Roberto286]

I'm experiencing a similar issue with debugging in Fresh applications. When I try to attach the VSCode debugger to inspect the application code, I only see the Deno runtime and Vite processes, but not the actual TypeScript/JSX source code from my Fresh app.

My Setup:

• Fresh application using Deno as the runtime
• Vite as the development server (via deno run -A npm:vite)
• VSCode with debugger configured to attach to port 9229
• macOS with the latest versions of Deno and Fresh

What I've Tried:
Added source maps to deno.json:

"compilerOptions": {
  "sourceMap": true,
  // ... other options
}

Modified the inspect command to use --inspect-wait:

"inspect": "deno run -A npm:vite -- --inspect-wait=0.0.0.0:9229"
Configured VSCode launch.json:

{
  "type": "node",
  "request": "attach",
  "name": "Attach to Frontend (Vite)",
  "port": 9229,
  "localRoot": "${workspaceFolder}/frontend",
  "skipFiles": ["<node_internals>/**", "node_modules/**"]
}

Added source maps to vite.config.ts:

export default defineConfig({
  build: {
    sourcemap: true,
  },
  // ... other config
});

Attempted different inspector targets:

• Inspecting the Vite process (for client/server-side code)
• Inspecting the Fresh server directly with deno run -A --inspect-brk main.ts
  The Problem:
  The debugger attaches successfully to the correct process, but instead of showing my source TypeScript/JSX files (like main.ts, route handlers, islands), it displays compiled JavaScript from the Deno runtime or Vite's internal code. Breakpoints in my source files are ignored, and I can't step through my application logic.

Additional Notes:
Client-side debugging works better in browser dev tools, but server-side debugging in VSCode is problematic
The issue persists across different Fresh versions and doesn't seem related to specific code in my app
This makes debugging Fresh applications quite challenging, especially for server-side code. Is there a recommended configuration or workaround to get proper source map support for Fresh apps in VSCode?

Feature Request:
As an additional improvement, it would be very helpful if the Fresh Vite plugin had a built-in inspect flag that automatically configures the inspector for debugging Fresh applications, similar to how Next.js provides next dev --inspect. This would simplify the debugging setup and ensure proper source map support out of the box.