DEV Community

Cover image for How to debug a Remix V2 (Vite) application with VSCode
Jose
Jose

Posted on

How to debug a Remix V2 (Vite) application with VSCode

How to debug a Remix V2 (With Vite) application with Vite.

VS Code Step by Step Debug

  1. Go to the left panel and click the bug icon.
  2. Click Run and Debug.
  3. Select Node.js

(Alternatively create a file called launch.json in <project-root>/.vscode (If the .vscode folder doesn't exist, create it)

Snippet of VSCode window that showcases the launch.json

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"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

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":{} 
}
Enter fullscreen mode Exit fullscreen mode

Just press F5, and you're set!

Breakpoint example

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)

Collapse
 
kiliman profile image
Kiliman

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.

Collapse
 
javiasilis profile image
Jose

Nice! Thanks for the tip!