Writing (and debugging) a Hello World app in Node on a Raspberry Pi

This post follows my post on Setting up a Raspberry Pi for development and will demonstrate how to create a simple Hello World app in Node and debug it using Chrome's DevTools.

Configuring Chrome DevTools

You will need to make Chrome on your laptop aware that it should be monitoring a particular IP and port on your LAN for a debugging stream.

Enable discovering network targets by navigating to chrome://inspect. Ensure Discover network targets is enabled and click the Configure button. Enter your Raspberry Pi's IP address and port, and click Done.

Coding our Hello World app

At this point you should have a share mounted on your Pi exposed to your laptop. I will be using VS Code to build the app. We will need to ssh into the Raspberry Pi using Putty or similar. We will create and enter a HelloWorld directory under our mount point:

mkdir /home/pi/Documents/Repos/HelloWorld

cd /home/pi/Documents/Repos/HelloWorld

We will create a Node skeleton app with a typical:

npm init (just accept all the defaults)

In VS Code, click File -> Open Folder and navigate to \\<RPi_IP>\PiShare\HelloWorld

Open package.json for editing and add a start-with-debug script:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "start-with-debug": "node --inspect=0.0.0.0:9229 --inspect-brk index.js"
  },

start-with-debug does a couple things. The --inspect flag makes Node listen for a debugging client. --inspect-brk forces your app to break on the very first line of code, allowing you to attach you debugging client in time.

Create an index.js file with the following:

console.log("Hello");
debugger;
console.log("World");

Debugging our Hello World app

From within our Raspberry Pi shell, we execute npm run start-with-debug This will start our app, listen for a debugging client, and also break on the first line until a debugging client attaches.

If we switch back to our Chrome window on our laptop, we will see it has observed a debugging stream we can inspect:

Click the inspectlink and we will be greeted with a familiar debugging window:

There are three breakpoints set here. The --inspect-brk flag put a breakpoint on the first line. I added a debugger statement on the second line. Finally I added a manual breakpoint on the third line. Each one of them was respected and were broken on as expected.