Debug server-side Remix using VSCode

README.md

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

✨ New in Remix v1.3.5

The latest release of Remix fixes sourcemaps so you no longer need to use any hacks to set breakpoints in your route modules. Simply start the debugger and Remix will hit the breakpoint in your loaders and actions.

Debugging session even survives edits and Live Reload.

🐛 Launch VSCode debugger

There are a couple of options. You can use one of the launch configuration listed below, or simply open the Command Pallete and type: debug npm script. Then select the one you want to run. NOTE: Since this will relaunch your app, make sure you've stopped any running servers.

Debugging npm script

Attaching to a process

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

👀 View local variables

launch.json

{
  // 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": [
    {
      "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"
    }
  ]
}

Can you open an issue on remix to fix that sourcemap issue?

@kentcdodds done
remix-run/remix#367

Hi @kiliman,
When installing a fresh remix app, do you know why it might be the case that the following fields are not enabled by default in the remix.config.js file?

This is what my remix.config.app looks like after a fresh install (using vercel option form CLI)

remix.config.app after a fresh install (using vercel option)

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
module.exports = {
  serverBuildTarget: "vercel",
  // When running locally in development mode, we use the built in remix
  // server. This does not understand the vercel lambda module format,
  // so we default back to the standard build output.
  server: process.env.NODE_ENV === "development" ? undefined : "./server.js",
  ignoredRouteFiles: [".*"],
  // Why is the `appDirectory`

  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // serverBuildPath: "api/index.js",
  // publicPath: "/build/",
  // devServerPort: 8002
};

remix.config.app after a fresh install (using remix server option)

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
module.exports = {
  ignoredRouteFiles: [".*"],
  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // serverBuildPath: "build/index.js",
  // publicPath: "/build/",
  // devServerPort: 8002
};

I believe those are now default values. In 1.2, they tried to make it so all adapters worked the same so it would be easier to switch adapters. Instead of your server entry importing from some build path, they use a virtual module.

import * as serverBuild from '@remix-run/dev/server-build'

Hello :)
I am unable to find the node process that is running the ./server/index.js file. Moreover, nothing shows up in the variable part of my vscode.
I am using Remix 1.6.0 as well as your launch.json file. I have got the package.json file from the remix indie stack.
Thank you very much.

If you're using Remix App Server (like Indie Stack), then you'll need to choose Run npm run dev from the launch configuration. Make sure you stop any running instance of your app before debugging.

@kiliman Sorry if this is irrelevant but can I know what theme and font you are using?

No problem. The theme is Cobalt2 and the font is Operator Mono with Ligatures.

https://github.com/kiliman/operator-mono-lig

Debug success with npm run dev command, thanks @kiliman

Thank you for this! Works like a charm :-)

anyone got steps for webstorm or just the terminal with chrome debugging?

@quantuminformation have you read this? Configure it to debug npm run dev

https://www.jetbrains.com/help/webstorm/run-debug-configuration-npm.html#b5eb85ce

i just need steps for the console if you have

anyone have luck doing the same in the grunge stack?

@kiliman
I've gone through your video on this a few times (https://remix.guide/resources/HAFZri2Zbg1A) and although everything is in place (proper config, sourcemap set to true, debug function (and its import), breakpoint set), when I run the debugger, VSCode does not stop at the breakpoints I set.

They are visible in the 'BREAKPOINTS' section and the Terminal output says 'Debugger attached'. They proper command is being called within VSCode (npm run dev), but again, the Debug Console does not stop at the breaks. Any ideas?

@kiliman I've gone through your video on this a few times (https://remix.guide/resources/HAFZri2Zbg1A) and although everything is in place (proper config, sourcemap set to true, debug function (and its import), breakpoint set), when I run the debugger, VSCode does not stop at the breakpoints I set.

They are visible in the 'BREAKPOINTS' section and the Terminal output says 'Debugger attached'. They proper command is being called within VSCode (npm run dev), but again, the Debug Console does not stop at the breaks. Any ideas?

OK. Found your comment on adding a debugger statement and that worked. Thanks

@mdotmoment11 Interesting. The video was from a very early version of Remix. Debugging and breakpoints should just work. You shouldn't need to use debugger anymore.

Which version of Remix are you on now? Also what adapter are you using: Remix App Server, Express, Vercel, etc.?

Followed the instructions above to create launch.json.
Versions below,

VSCode Version: 1.87.0.
"@remix-run/node": "^2.5.1",
    "@remix-run/react": "^2.5.1",
    "@remix-run/serve": "^2.5.1",

Copied the launch.json form above,

{
  // 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": [
    {
      "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": "node"
    }
  ]
}

Tried pwa-node and just node both but no difference, same results. Debug points are disabled anytime the debugger is attached to the running process or directly started with the debugger.

this appears to do the trick with my setup (fairly default create remix app with vite)

{
      "name": "Debug App",
      "type": "node-terminal",
      "request": "launch",
      "command": "yarn dev",
      "cwd": "${workspaceFolder}"
}