Grant Timmerman
Jul 22 · 4 min read

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:

Our project directory structure

.vscode/launch.json

.vscode/launch.json

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

.vscode/settings.json

.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/inspector
Serving 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 🔴.

Notice the red dot on the left.

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.

Notice i = 6 and sum = 15.

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:

  1. 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.

All the options for adding a line point.

Next Steps

Thanks for reading! Check out these related posts:

Google Cloud Platform - Community

A collection of technical articles published or curated by Google Cloud Platform Developer Advocates. The views expressed are those of the authors and don't necessarily reflect those of Google.

Grant Timmerman

Written by

Google • Explorer

Google Cloud Platform - Community

A collection of technical articles published or curated by Google Cloud Platform Developer Advocates. The views expressed are those of the authors and don't necessarily reflect those of Google.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade