Hono•6mo ago

How to debug Hono/HonoX in Visual Studio Code?

I always run the code via npm run dev or bun dev. Since I am building a web app in HonoX and most of it is SSR, how can i use the IDE debugger so I can hit breakpoints and etc in Visual Studio Code? Ex: next.js has this guide: https://nextjs.org/docs/pages/building-your-application/configuring/debugging How do I do this for Hono/X? Thank you!

Configuring: Debugging | Next.js

Learn how to debug your Next.js application with VS Code or Chrome DevTools.

1 Reply

Mickaël•6mo ago

Hello @chip ! This setup works for me : - First I run my project with this command in package.json :

{
  "scripts": {
    "dev": "tsx watch --inspect --env-file=.env.dev src/main.tsx"
  }
}

{
  "scripts": {
    "dev": "tsx watch --inspect --env-file=.env.dev src/main.tsx"
  }
}

If you use other tool than tsxthe important part is --inspect, available on Node.js too

- Then I have this launch.json in .vscode folder :

{
  "configurations": [
    {
      "name": "Attach",
      "port": 9229,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "node"
    }
  ]
}

{
  "configurations": [
    {
      "name": "Attach",
      "port": 9229,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "node"
    }
  ]
}

- So you just npm run dev and click on "attach" command in vscode debug tool and your breakpoints should works 🙂 - (Optional) you can auto-attach on npm run dev with this vscode setting :

"debug.javascript.autoAttachFilter": "onlyWithFlag"

"debug.javascript.autoAttachFilter": "onlyWithFlag"

Gaming

Programming

How to debug Hono/HonoX in Visual Studio Code?