How to debug a Remix V2 (With Vite) application with Vite.
- Go to the left panel and click the bug icon.
- Click
Run and Debug
. - Select
Node.js
(Alternatively create a file called launch.json
in <project-root>/.vscode
(If the .vscode folder doesn't exist, create it)
Put the following code inside it:
{
"version": "0.2.0",
"configurations": [
{
"command": "pnpm dev",
"name": "Launch Program",
"request": "launch",
"type": "node-terminal",
"cwd": "${workspaceFolder}"
},
{
"name": "Attach by Process ID",
"processId": "${command:PickProcess}",
"request": "attach",
"skipFiles": ["<node_internals>/**"],
"type": "node"
}
]
}
Modify where it says command
, and replace it with your package manager and the dev
command of package.json
Just in case, here's my package.json (Packages omitted)
{
"name": "deploud",
"private": true,
"sideEffects": false,
"type": "module",
"scripts": {
"build": " remix vite:build",
"dev": "remix vite:dev",
"lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
"start": "dotenv wrangler pages dev ./build/client",
"tsc": "tsc",
"extract": "lingui extract --clean",
"compile": "lingui compile",
"db:generate": "drizzle-kit generate",
"db:migrate": "dotenv tsx ./app/.server/db/migrate.ts",
"w:deploy": "npm run build && wrangler pages deploy ./build/client",
"preview": "npm run build && wrangler pages dev ./build/client",
"build-cf-types": "wrangler types",
"icons": "npx @svgr/cli --ext=jsx --out-dir app/assets/generated/icons -- app/assets/icons",
"icons:watch": "npm-watch icons",
"introspect": "dotenv drizzle-kit introspect"
},
"dependencies": {},
"devDependencies": {},
"engines": {
"node": ">=18.0.0"
},
"imports": {
"#*": "./*"
},
"overrides":{}
}
Just press F5, and you're set!
Be sure to follow me on X (Twitter), LinkedIn where I'm building in public and sharing strategies on how to
https://twitter.com/javiasilis
https://www.linkedin.com/in/javiasilis
P.S:
If you're wondering I'm using the peacock extension to color VSCode.
(Warning: don't use it in multi-person projects, as these override their settings even without those using the extension).
Top comments (2)
Another option is to select
Debug: Debug npm script
from the command palette.This will run the specific package.json script from the "Debug Console" with the debugger attached.
Nice! Thanks for the tip!