DEV Community

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

Posted on

13

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).

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

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!

Sentry image

See why 4M developers consider Sentry, β€œnot bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay