Debugging a Firebase function on Visual Studio Code
Matheus Webler
May 17, 2018 · 3 min read

This is one thing I struggled a lot when I started working with Firebase Functions. How do I debug my functions if I need to use firebase CLI to serve and test my functions locally?

Luckily, we have the Google Cloud Functions Emulator to save us (as a workaround) 🙌

First of all, we need to have Google Cloud Functions emulator module installed globally:

npm install -g @google-cloud/functions-emulator

Then we will get our Firebase project configuration.
For that, we need to go to the Firebase Functions project folder, log in to a project and run the `setup:web` command:

firebase login
firebase setup:web

The result will be something like this:

{
"apiKey": "YOUR-API-KEY",
"databaseURL": "https://YOUR-FIREBASE-PROJECT.firebaseio.com",
"storageBucket": "YOUR-FIREBASE-PROJECT.appspot.com",
"authDomain": "YOUR-FIREBASE-PROJECT.firebaseapp.com",
"messagingSenderId": "SENDER-ID",
"projectId": "YOUR-FIREBASE-PROJECT"
}

Now, we are gonna use that information to run our Firebase functions with Google Cloud Functions emulator.

First, we need to escape special characters, to be able to pass in the configuration as an environment variable.
You can easily achieve this by using node to stringify the configuration object:

$ node
>> console.log(JSON.stringify(JSON.stringify({
"databaseURL": "https://YOUR-FIREBASE-PROJECT.firebaseio.com",
"storageBucket": "YOUR-FIREBASE-PROJECT.appspot.com",
"projectId": "YOUR-FIREBASE-PROJECT"
})))
>> "{\"databaseURL\":\"https://YOUR-FIREBASE-PROJECT.firebaseio.com\",\"storageBucket\":\"YOUR-FIREBASE-PROJECT.appspot.com\",\"projectId\":\"YOUR-FIREBASE-PROJECT\"}"
Getting the project configuration string

Now that we have our configuration string we just need to discover how to run the function, let’s do this:

Start cloud functions emulator:

functions start

Deploy your Firebase function code, using the configuration we got on last step as FIREBASE_CONFIG environment variable:

On Mac OS / Linux:

FIREBASE_CONFIG="{\"databaseURL\":\"https://YOUR-FIREBASE-PROJECT.firebaseio.com\",\"storageBucket\":\"YOUR-FIREBASE-PROJECT.appspot.com\",\"projectId\":\"YOUR-FIREBASE-PROJECT\"}" functions deploy --trigger-http --timeout 600s YOUR_FUNCTION_NAME

On Windows:

$ set FIREBASE_CONFIG="{\"databaseURL\":\"https://YOUR-FIREBASE-PROJECT.firebaseio.com\",\"storageBucket\":\"YOUR-FIREBASE-PROJECT.appspot.com\",\"projectId\":\"YOUR-FIREBASE-PROJECT\"}"$ functions deploy --trigger-http --timeout 600s YOUR_FUNCTION_NAME

Remember using a long timeout to be able to debug your function without getting a timeout error.

Running functions deploy command

Now we just need to start the function debugger:

functions debug YOUR_BEAUTIFUL_FUNCTION_NAME [--port 6000] [--pause true]

You can use the optional arguments:

  • port to change the debugger port.
  • pause to pause the function execution until the a debugger is connected, so you can debug your function setup code.

Finally, we create an attach run configuration on VS Code to attach the debugger to the running function:

{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 5858
}

Now run the Attach configuration on debug mode and see the magic happening!


Thanks Ryan G. for pointing and testing the deploy on Windows platforms!

Matheus Webler

Written by

I am a generalist software developer, with a passion for embedded applications and web development.

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