Adding Visual Studio Code debugging to Node.js JS projects

Published on October 31, 2020 - Tagged: #developer-experience

Follow me on twitter for more posts like this

I find it useful to be able to debug my Node.js application in vscode. It saves you having to write console.log statements to figure out why something isn’t working. I sometimes use the debugger to check my tests too. This is the configuration I use to setup debugging for the main application and the tests.

Launch.json

For vscode you need to set the various launch configurations for your project. These go in a file .vscode/launch.json . You might have to create this file.

Debugging a Node.js application using VSCode

In your package.json startup you need to add the inspector port

npx ts-node-dev --inspect=0.0.0.0:29033

Then in the startup script you can ask vscode to attach to that port when debugging

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Application",
      "port": 29033,
      "type": "node",
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "protocol": "inspector"
    }
  ]
}

Debugging Jest tests using VSCode

You need to add the launch scripts and tell them

  1. Where your jest is located (usually in the node_modules folder
  2. Where your jest config is located (usually in the main application root folder)
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Jest All",
      "program": "${workspaceFolder}/node_modules/.bin/jest",
      "args": ["--runInBand"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "disableOptimisticBPs": true,
      "windows": {
        "program": "${workspaceFolder}/node_modules/jest/bin/jest"
      }
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Jest Current File",
      "program": "${workspaceFolder}/node_modules/.bin/jest",
      "args": ["${fileBasenameNoExtension}", "--config", "jest.config.js"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "disableOptimisticBPs": true,
      "windows": {
        "program": "${workspaceFolder}/node_modules/jest/bin/jest"
      }
    }
  ]
}

To use the debugger you open the debugging menu

SHIFT - COMMAND - D

and select the launch configuration. Then click the green play button.

If you want to debug a jest test, you should have that file open in the editor when you click play.

Darragh ORiordan

Hi! I'm Darragh ORiordan.

I live and work in Sydney, Australia building supporting happy teams that create high quality software for the web.

I also make tools for busy developers! Do you have a new M1 Mac to setup? Have you ever spent a week getting your dev environment just right?

My DevShell tooling will save you 30+ hours configuring your dev environment with all the best modern tools. Get it here

https://darraghoriordan.gumroad.com/l/devshell


Read more articles like this one...

List of article summaries

#developer-experience

How to use SSH with Git and ssh-agent on Windows

I needed to run git natively in windows (no wsl) for a recent project. I use ssh certificates to authenticate with my git provider and it was difficult to get it all working as expected.

I didn’t want to use Git for Windows because it uses GitBash. I couldn’t use WSL because I wanted git to work on any terminal in windows. I also have pass phrases on all my ssh certificates so I needed ssh agent to avoid typing the passphrases all the time.

These are the steps I had to research to use Git on Windows with ssh-agent.

#developer-experience

How to fix custom type definitions not being type checked

If you have a custom types file (e.g. myTypes.d.ts) but you get no errors from the type checker and compiler in typescript even though you know there are issues in the file you might have skipLibCheck turned on.

#developer-experience

Consistent modern shell tooling on MacOS and Windows WSL for developers

I regularly code on both MacOS and Windows machines and I was always annoyed how different the default experiences are on each. I need to use the same tools and the same experience on both.

Windows “WSL” (Windows Subsystem for Linux) is a great tool for this you can use on Windows 10 and newer. The latest version lets you run a full Ubuntu instance that integrates seamlessly with the underlying windows instance.

By using WSL2 you can have a (mostly) identical developer experience jumping between MacOS and Windows.

Better tooling for Developers

Many of the terminal tools that come with unix environments are functionally similar to how they were 20 years ago. But other developer tooling has advanced quite a bit since then.

You can replace tools like ls or cat with modern equivalents that support full colour, unicode icons, git state and more. Terminal prompts can be made git aware and use colour to indicate state so you don’t have to query git so often.

Keeping developer experience consistent across machines

Keeping any shell changes you make on one machine up to date on all the machines you code on is a nightmare without the right tooling.

This article also explains all the tools I use and how I keep the same terminal setup consistent on MacOS and Windows!

Let’s go!

#developer-experience

How engineers can help deliver software effectively

Delivery managers and team leads have the responsibility to deliver a software system via an engineering team.

Your customer wants every feature to work perfectly and they want it delivered yesterday. Your team wants to learn and grow.

It’s a tough role managing all the stakeholders and creators in a project.

Engineers can help drive great delivery by empathising with and supporting the delivery manager or leads in a project team.