Today I Learned

Visual Studio Code debugging configuration for React

Hi, I want to share my proposition of config for debugging JavaScript in vs code. The first config is for debugging files in React JS
in my opinion, the most important line is “url” and “skipFiles” url: includes your application starting point by default is on port 3000 skipFiles: this is the place where you inform the debugger what location should skip.

{
 "version": "0.2.0",
  "configurations": [
{
 "type": "chrome",
 "request": "launch",
 "name": "React in browser",
 "url": "http://localhost:3000",
 "webRoot": "${workspaceFolder}",
 "skipFiles": [
   "${workspaceFolder}/node_modules/**/*.js",
   "${workspaceFolder}/yourLibToSkip/**/*.js",
   "<node_internals>/**/*.js"
   ]
  }
 ]
}

The second config includes NEXT server-side, NEXT client-side, and NEXT full-stack.

{
"version": "0.2.0",
 "configurations": [
{
 "name": "Next.js: debug server-side",
 "type": "node-terminal",
 "request": "launch",
 "command": "npm run dev"
},
{
 "name": "Next.js: debug client-side",
 "type": "chrome",
 "request": "launch",
 "url": "http://localhost:3000"
},
{
 "name": "Next.js: debug full stack",
 "type": "node-terminal",
 "request": "launch",
 "command": "npm run dev",
 "internalConsoleOptions": "openOnSessionStart",
 "serverReadyAction": {
   "pattern": "started server on .+, url: (https?://.+)",
   "uriFormat": "%s",
   "action": "debugWithChrome"
    }
   }
  ]
 }

On those templates, you could build your debugger configuration. Have a great time with the debugger in vs code and for more info visit vs code debugger