Debugging Firebase Functions in VS Code

Introduction

Debugging Firebase Cloud Functions as simple as possible. We will assume that you have already set up your project on your computer and that you are using TypeScript, but it should work for JavaScript too.

The following requires:

firebase-admin version 8.0.0 or higher.

firebase-functions version 3.0.0 or higher.

Building Project

Let’s start by adding the following line in the package.json file inside your project, to include -w:

{
"scripts": {
  ...
  "build:watch": "tsc -w",
...
}

This will help us watch for changes in the code.

Now for the fun part, open the terminal in VS Code, and navigate to the functions folder and build:

cd functions
npm run build:watch

You should get something like the following:

Starting compilation in watch mode...
Found 0 errors. Watching for file changes.

Now keep this terminal screen open as it will be watching for changes in case that you modify the code later.

Admin Credentials

You will need your admin credentials key to access the Firebase and Google APIs locally.

Go to https://console.cloud.google.com/iam-admin/serviceaccounts

and select your current project from the top left, then a few service accounts should appear. Make sure to select App Engine default service account then click the three dots on the right side and select create key.

Download this key and place it where you find it most appropriate. You don’t want it swimming around in GitHub for everyone to see.

Now open a second terminal window inside VS Code by clicking the + sign in the terminal window and point GOOGLE_APPLICATION_CREDENTIALS to the file location. Make sure not to close this terminal window as the credentials are only valid for the current session. You have to load your credentials every time you run an emulator.

Windows:

set GOOGLE_APPLICATION_CREDENTIALS=path\to\key.json

Unix:

export GOOGLE_APPLICATION_CREDENTIALS=/path/to/key.json

If you accidentally close the terminal just set the credentials location again in a new terminal window and continue using that one.

For more information, read: https://cloud.google.com/docs/authentication/getting-started

Running Firebase Emulator

In the same terminal where you just provided your credentials, navigate to your functions folder and start the emulator in inspect functions mode:

firebase emulators:start --inspect-functions

You will see something like this for every http function you have in your project:

functions[myFunction]: http function initialized (http://localhost:5001/project-name/us-central1/myFunction).
✔  emulators: All emulators started, it is now safe to connect.

We will use the link returned here to send requests, so keep it handy.

If you see something like this when calling a function:

Error: Could not load the default credentials. Browse to https://cloud.google.com/docs/authentication/getting-started for more information.

It means you did not load your credentials correctly or you are not using the same terminal where you loaded your credentials. You have to load your credentials every time you run the emulator.

To stop the emulator, simply close this terminal window.

Debugging Configuration

Click on the run/debug icon in VS Code on the left side. Then click the gear to edit the launch.json file.

Edit the file so it looks like this:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Debug",
      "port": 9229
    }
  ]
}

Here we are specifying the debug settings. The debugger should attach to port 9229 (default for firebase emulator) to debug the emulator we previously started.

Now click the green outlined triangle next to “RUN” to attach the the VS Code debugging tools to the emulator.

Now we are all set to go.

Sending Requests

Postman will make it easy to send requests to your functions locally. So let’s install it.

Download Postman App

Create a request in Postman by using the link that the second VS Code terminal returned earlier, which should be something like this:

http://localhost:5001/project-name/us-central1/function

And now VS Code should be able to debug that function whenever you call it. It will show debugging information and stop at any breakpoints that you have set up. That is, as long as the debugger is attached.

Editing Code

To rebuild new code after you have made changes all you have to do is save it and click the green outlined triangle to re-attach the debugging tools to the port.