Debug server-side Remix using VSCode

README.md

💡 HOWTO: Debug your server-side Remix code using VSCode

In VSCode, I'm using the Attach by Process ID config, so I can select the node process running Express, and voila!

Debugging session even survives edits and Live Reload.

View screencast on YouTube: https://youtu.be/pf9A9nBOnRc

🐛 Launch VSCode debugger

Pick the node process that is running the ./server/index.js file

🛑 Set breakpoints in server side code

Currently breakpoints set directly on a route module don't get triggered. It seems to work if you export a function from another module and set the breakpoint in there. Once the "debug" breakpoint is hit, you can disable that and your loader/action breakpoints will set as usual.

// app/utils/index.ts
export function debug() {
  console.log('debugging') // set breakpoint here
}
// index.tsx
import { debug } from '~/utils'
export let loader: LoaderFunction = () => {
  debug();
  // set breakpoint on code here

👀 View local variables

launch.json

{
  "configurations": [
    {
      "command": "npm run dev",
      "name": "Run npm run dev",
      "request": "launch",
      "type": "node-terminal",
      "cwd": "${workspaceFolder}"
    },
    {
      "name": "Attach by Process ID",
      "processId": "${command:PickProcess}",
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "pwa-node"
    }
  ]
}