Debugging Node Google Cloud Functions Locally in VS Code!

Published in

Google Cloud - Community

4 min readJul 22, 2019

The Google Cloud Functions Framework (FF) is a powerful developer tool that allows developers to debug serverless functions within their favorite IDE!

In this blogpost, we’ll learn how to debug Google Cloud Functions locally using breakpoint support in VS Code via the V8 Inspector Protocol (--inspect).

Setup your project

From your terminal, create a new Node project with the FF using the npm CLI:

package.json

npm init: Create a new npm module with the default settings. (Keep pressing <ENTER>)
npm i @google-cloud/functions-framework: Install the FF

index.js

Open VS Code with code . and create a new file called index.js with the following stubbed content:

A very simple Node function for testing purposes.

Setup VS Code

VS Code comes with a built-in Node debugger! But we still need to create config files.

To create a bare-bone project, create a.vscode directory with the following launch.json and settings.json files:

.vscode/launch.json

Note: port 9229 is the default port number for node --inspect.

.vscode/settings.json

This option will automatically attach the Node debugger to VS Code. Useful.

Run the Functions Framework

Open the Terminal in VS Code using the menu item View > Terminal. Run the Functions Framework with:

node --inspect node_modules/@google-cloud/functions-framework --target=listGoogleAPIs

Let’s break that down:

node --inspect: The Node flag for using the Inspector API. See the docs.
node_modules/@google-cloud/functions-framework: This is the location of the FF npm module (which includes a package.json bin property).
--target=listGoogleAPIs: A flag we pass into the FF with our method.

You’ll see something like this:

node --inspect node_modules/@google-cloud/functions-framework --target=listGoogleAPIsDebugger listening on ws://127.0.0.1:9229/a391af83-9e3a-4c87-a2d5-dce855afca7c
For help, see: https://nodejs.org/en/docs/inspectorServing function...
Function: listGoogleAPIs
URL: http://localhost:8080/
Debugger attached.

You’re running the Functions Framework locally with the debugger attached. Go to localhost:8080 to run the function locally!

You’ll notice VS Code’s status bar turns orange when the debugger is attached.

You should {"sum":45}. But how do we debug? Read on!

Adding Breakpoints

While your node process is running, use VS Code’s Debugger tool by clicking:

Note: If you didn’t create a .vscode/settings.json file, you need to manually attach the debugger using the top-left ▶ icon after running the FF.

To add a breakpoint, click left of the line number to kindle a bright red 🔴.

Then run the function with http://localhost:8080/ to see useful information in the debug side panel. Hover over variables to see their values or look left.

Sure, you could console.log these values, but now you can see every variable on the stack, copy values, and even inject you own variable values. It’s really helpful when trying to solve issues.

Wise words from TypeScript’s Program Manager

Do Something Interesting

OK. So a for loop is something, I guess. But let’s build something more impressive.

The Google Discovery API is a meta-API that lists Google APIs. Calling the API does not require auth (not even a Google account is needed!). Let’s query the API and list out all Google (discoverable) APIs:

Install the Google API Client Library:

npm install googleapis

2. Replace index.js with the following code.

A short piece of code that lists Google’s APIs

3. Now re-run the function. You should see a large JSON response with a list of Google services.

Tip: Use this Chrome extension for pretty JSON formatting!

Cool beans!

Deploy to Google Cloud

Deploying this function to Google Cloud is easy. Just run the following gcloud command:

gcloud functions deploy listGoogleAPIs --trigger-http --runtime nodejs10

Then after a bit, you’ll get a httpsTrigger URL like:

https://us-central1-my-project.cloudfunctions.net/listGoogleAPIs

Easy peasy (lemon squeezy).

Advanced Debugging

We can even do fancy things like conditional debugging:

Only break when api.id.startsWith(‘cloud’)

Tired of accidentally committing console.log test code in your PRs? Add a Logpoint and keep your code clean. Just right-click to the left of a line number.