require vscode debugger configuration to add in launch.json

[xkeshav]

using honojs with openAPI, normally we have a launch.json file in projec/.vscode file and can debug any file using breakpoint but when running hono application and want to attach a debugger to stop and see the request response within vscode debug optons ( vs code v 1.95 in ubuntu 24.04 with node v 22)

here are my 3 different kind of launch,json configuration; none of them not working as expected.

"Debug Hono with tsx script run s but it does not stop at given breakpoint and also do some changes in package.json script for this but does not work

Attch script script attach but when add breakpoint it say outbound brerakpoint inm vsode

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Hono  Server",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npm",
      "runtimeArgs": [
        "run",
        "start"
      ],
      "skipFiles": [
        "<node_internals>/**"
      ],
      "sourceMaps": true,
      "outFiles": [
        "${workspaceFolder}/dist/**/*.js"
      ],
      "preLaunchTask": "tsc: build - tsconfig.json"
    },
    {
        "name": "Attach",
        "port": 9229,
        "request": "attach",
        "skipFiles": [
          "<node_internals>/**"
        ],
        "type": "node"
    },
    {
      "name": "Debug Hono with tsx",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npx",
      "args": [
        "tsx",
        "watch",
        "src/index.tsx"
      ],
      "env": {
        "NODE_ENV": "local"
      },
      "sourceMaps": true,
      "outFiles": [
        "${workspaceFolder}/dist/**/*.js"
      ],
      "console": "integratedTerminal",
      "runtimeArgs": [
        "--inspect-brk"
      ]
    }
  ]
}

what I want is when run npm run start it should attach the debugger and I have index.tsx file is main file

package.json script part

"scripts": {
    "dev": "tsx watch src/index.tsx",
    "start": "NODE_ENV=local tsx watch --inspect src/index.tsx",
    "nuke": "rm -rf node_modules local dist coverage",
    "lint": "eslint ./src",
    "lint:fix": "eslint . --fix",
    "build": "pkgroll"
  },
  "dependencies": {
    "@hono/node-server": "1.13.2",
    "@hono/zod-openapi": "0.16.4",
    "@hono/zod-validator": "0.4.2",
    "@logtape/logtape": "0.6.3",
    "@scalar/hono-api-reference": "0.5.156",
    "axios": "1.7.7",
    "bcryptjs": "2.4.3",
    "crypto": "1.0.1",
    "dotenv": "16.4.5",
    "dotenv-expand": "11.0.6",
    "hono": "4.6.20",
    "hono-pino": "0.4.0",
    "jsonwebtoken": "9.0.2",
    "mongoose": "8.9.5",
    "multer": "1.4.5-lts.1",
    "pino": "9.5.0",
    "zod": "3.23.8"
  },

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx",
    "lib": [
      "esnext"
    ],
    "baseUrl": "./",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "paths": {
      "@/*": ["./src/*"],
      "@/db/*": ["./src/db/*"]
    },
    "typeRoots": ["./node_modules/@types"],
    "types": [
      "node"
    ],
    "strict": true,
    "outDir": "./dist",
    "esModuleInterop": true,
    "sourceMap": true,
    "skipLibCheck": true
  },
  "tsc-alias": {
    "resolveFullPaths": true
  }
}

[xkeshav]

does anyone maintain this discussion page?

[Waldemar-as]

I'm having the same problem and can't get the example Hono project https://hono.dev/docs/ to debug with breakpoints.

As a workaround, I'm using @hono/node-server as a second option and launching it with "Debug Hono with Node" when I need debugging.

Hope someone has an example of successfully debugging without node-server.

My example with @hono/node-server as second option:

server.js

import { OpenAPIHono } from '@hono/zod-openapi'
import { logger } from 'hono/logger'
import { authenticateToken } from './middleware/auth'
import { securityHeaders } from './middleware/security'
import { corsMiddleware } from './middleware/cors'
import { errorHandler } from './middleware/errorHandler'
import publicRoutes from './routes/public'
import apiRoutes from './routes/api'
import { setupSwagger } from './config/swagger'

// Create a typed Hono instance
const app = new OpenAPIHono()

// Global middleware
app.use('*', errorHandler)
app.use('*', corsMiddleware)
app.use('*', logger())
app.use('*', securityHeaders)

// Setup Swagger documentation
setupSwagger(app)

// Mount routes
app.route('/', publicRoutes)

//Protected routes
app.use('/api/*', authenticateToken)
app.route('/api', apiRoutes)

// 404 handler for routes that don't exist
app.notFound((c) => {
  return c.json({
    error: `Route '${c.req.path}' not found`,
    status: 404
  }, 404)
})

// For Bun
export default {
  port: 8002,
  fetch: app.fetch
}

// For Node.js
if (process.env.npm_lifecycle_event === 'dev:node') {
  import('@hono/node-server').then(({ serve }) => {
    serve({
      fetch: app.fetch,
      port: 8002
    }, (info) => {
      console.log(`Server is running on http://localhost:${info.port}`)
    })
  })
}

package.js

{
  "name": "hono",
  "scripts": {
    "dev": "bun run --hot src/index.ts",
    "dev:node": "tsx watch --inspect src/index.ts",
    "db:generate": "bunx --bun drizzle-kit generate:pg",
    "db:migrate": "bun run src/db/migrate.ts"
  },
  "dependencies": {
    "@hono/swagger-ui": "^0.5.0",
    "@hono/zod-openapi": "^0.18.4",
    "@hono/zod-validator": "^0.4.3",
    "@supabase/supabase-js": "^2.48.1",
    "@types/memory-cache": "^0.2.6",
    "@types/pg": "^8.11.11",
    "dotenv": "^16.4.7",
    "drizzle-orm": "^0.39.3",
    "hono": "^4.7.1",
    "memory-cache": "^0.2.0",
    "pg": "^8.13.3",
    "zod": "^3.24.2"
  },
  "devDependencies": {
    "@hono/node-server": "^1.13.8",
    "@types/bun": "latest",
    "drizzle-kit": "^0.30.4",
    "tsx": "^4.7.1"
  }
}

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "backend",
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "npm",
            "runtimeArgs": ["run", "dev"],
            "cwd": "${workspaceFolder}/backend",
            "console": "integratedTerminal",
            "skipFiles": [
                "<node_internals>/**"
            ]
        },
        {
            "name": "frontend",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceFolder}/frontend",
            "runtimeExecutable": "npm",
            "runtimeArgs": ["run", "dev"],
            "console": "integratedTerminal"
        },
        {
            "name": "Debug Hono with Node",
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "npm",
            "runtimeArgs": ["run", "dev:node"],
            "cwd": "${workspaceFolder}/backend",
            "skipFiles": ["<node_internals>/**"],
            "console": "integratedTerminal"
          },
          {
            "name": "Debug Hono with Bun --BREAKPINTS NOT WORKING",
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "bun",
            "runtimeArgs": ["--inspect", "src/index.ts"],
            "cwd": "${workspaceFolder}/backend",
            "skipFiles": ["<node_internals>/**"],
            "console": "integratedTerminal"
          }
    ],
    "compounds": [
        {
            "name": "Full Stack",
            "configurations": ["backend", "frontend"]
        }
    ]
}

[leivadev]

Hello! I had this issue for months as i love working with breakpoints and scope contexts while debugging. The debugger is now exposed automatically on port 9229 whenever you run wrangler dev, no extra flags needed. I've found two ways to debug effectively:

---

Option 1: Using Chrome DevTools

Start your dev server normally:

npx wrangler dev

You see that Wrangler prints this menu in the terminal:

╭──────────────────────────────────────────────────────────────────────╮
│  [b] open a browser [d] open devtools [c] clear console [x] to exit  │
╰──────────────────────────────────────────────────────────────────────╯

The fastest way to access is clicking the[d] key in the terminal. If clicked, Chrome DevTools opens directly for the Worker in a browser.
Alternatively, you can open chrome://inspect in Chrome and click inspect under the Remote Target on localhost:9229.

Once DevTools is open, breakpoints work out of the box. To set them on your source files:

Go to Sources → Cloudflare → Authored → [worker-name] → codebase directory or go to Sources → Page → file:// if opened with the alternative. You will se that the directory structure mirrors your codebase.
You can now click any line of your codebase to set a breakpoint, trigger a request, and you'll get full scope inspection and call stack.

---

Option 2: Using VSCode Debugger (launch.json)

Add this to .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Wrangler Dev",
      "port": 9229,
      "skipFiles": ["<node_internals>/**"],
      "outFiles": ["${workspaceFolder}/.wrangler/**"],
      "restart": true
    }
  ]
}

NOTE: outFiles route should point to your .wrangler file of the desired workspace (in my case, im working in a monorepo, so have it at "${workspaceFolder}/apps/backend/.wrangler/**")

After adding the launch.json:

1. Run wrangler dev in a terminal
2. Open the Run and Debug panel (Ctrl+Shift+D)
3. Select Attach to Wrangler Dev and hit F5

restart: true is important as Wrangler hot-reloads on file saves which drops the connection, with this flag VSCode automatically re-attaches after each reload.

Optional: tasks.json for one-click debugging

If you want F5 to start the server and attach the debugger in one shot, add .vscode/tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Start Wrangler Dev",
      "type": "shell",
      "command": "wrangler dev",
      "isBackground": true,
      "problemMatcher": {
        "owner": "wrangler",
        "pattern": { "regexp": "^$" },
        "background": {
          "activeOnStart": true,
          "beginsPattern": "Starting local server",
          "endsPattern": "Ready on http"
        }
      },
      "presentation": {
        "reveal": "always",
        "panel": "dedicated",
        "close": true
      }
    },
    {
      "label": "Stop Wrangler Dev",
      "type": "shell",
      "command": "pkill -f 'wrangler' || true",
      "windows": {
        "command": "taskkill /F /IM wrangler.exe /T 2>nul & exit /b 0"
      },
      "presentation": {
        "reveal": "never",
        "close": true
      }
    }
  ]
}

Then update the launch config to wire the tasks:

{
  "type": "node",
  "request": "attach",
  "name": "Attach to Wrangler Dev",
  "port": 9229,
  "skipFiles": ["<node_internals>/**"],
  "outFiles": ["${workspaceFolder}/.wrangler/**"],
  "restart": true,
  // here
  "preLaunchTask": "Start Wrangler Dev",
  "postDebugTask": "Stop Wrangler Dev"
}

Now F5 starts the server and attaches the debugger, while Shift+F5 stops both.

---

Bonus — Official Hono VSCode Extension

There's an official Hono VSCode extension that adds CodeLens links above route definitions, letting you run and debug requests directly from the editor without leaving VSCode. It also has a debug mode that launches hono request with the Node inspector attached.

I haven't tested it myself so can't confirm whether it works well for Cloudflare Workers specifically, it may be more suited to Node.js runtimes. Worth checking out if the manual setup above feels like too much.