Debugging with Chrome DevTools

The most effective debugging tool is still careful thought, coupled with judiciously placed print statements. - Unix for Beginners

Doesn't this sound familiar? How many times did you debug your NodeJS back ends with console.log or similar statements? These practices are not very effective and often take a lot more time than debugging using a dedicated tool. So we encourage you to use VS Code to debug any application, not only NodeJS in particular.

Debugging with Chrome DevTools is really easy. The following paragraphs works for debugging plain JS and TypeScript projects (both front-end and back-end).

  1. Add the --inspect option to your node command, e.g. --inspect=0.0.0.0:9299
  2. Enter chrome://inspect in the address bar
  3. Click Open dedicated DevTools for Node

Chrome inspect page

  1. Add your connection if needed (host + port, like configured with --inspect option of node command)
  2. DevTools will automatically connect to a running node server

Chrome DevTools

  1. Add the project folder under Sources so you can add breakpoints to source code

Sources tab