Skip to content

Instantly share code, notes, and snippets.

@kiliman
Last active Nov 16, 2022
Embed
What would you like to do?
Debug server-side Remix using VSCode

💡 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

image

Attaching to a process

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

👀 View local variables

image

{
// 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"
}
]
}
@kiliman
Copy link
Author

kiliman commented Jun 20, 2022

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.

image

image

@EarthMan123
Copy link

EarthMan123 commented Aug 28, 2022

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

@kiliman
Copy link
Author

kiliman commented Aug 28, 2022

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

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

@quanghuy9289
Copy link

quanghuy9289 commented Nov 16, 2022

Debug success with npm run dev command, thanks @kiliman

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment