How to debug firebase cloud functions in WebStorm?

Question

I've started a firebase cloud functions project and want to know how i can get the debugging within the WebStorm IDE running?

I've read that i can archive my goal using @google-cloud/functions-emulator. Therefore I installed it and followed this documentation

After running functions inspect myFunction, I got following output.

Warning: You're using Node.js v10.6.0 but the Google Cloud Functions runtime is only available in Node.js 6 and Node.js 8. Therefore, results from running emulated functions may not match production behavior.
Debugger for app listening on port 9229.

I assume debugging should work now. Open myFunction in the browser (e. g. http://localhost:8010/my-project/us-central1/myFunction/) works fine.

Now I'm struggling. What do I have to do to connect the IDE to the debugger or the debugger to the IDE? I have no clue how debugging works.

Expected result: I want to open the function in Chrome Browser following by pausing on the break points in the WebStorm IDE.

Thanks for helping in advance ;)

Answer 1

1. Configuration

Add this npm run script to package.json:

"dev": "npm run build && firebase emulators:start --only functions --inspect-functions 10001 & tsc --watch"

• This will build and run the functions emulator
• this will recompile TypeScript files to JavaScript when they are saved, so that the Firebase emulator can reload them while running.
• If you don't use TypeScript, remove & tsc --watch from above
• Allows a debugger to connect at port 10001 (you can update this number)

You can create a WebStorm run configuration for this:

Then, create a debug configuration for Firebase functions, telling WebStorm to connect to the port number you specified earlier (10001):

2. How to launch

1. Run npm run dev in a terminal, or launch from WebStorm the npm dev configuration you've created bove.

   You'll need to launch this using WebStorm or manually before the next step, every time, unless you use compound run configurations (see last section)

2. Connect WebStorm's debugger to the Firebase emulator you launched at the previous step, by running the Debug Firebase functions configuration from the dropdown:

   

To test the debugger, make a curl call to your Firebase function.

Extra tip: compound run configurations

You can create a Compound run configuration, which starts all the things you might need. In this case you'd have the npm dev command, and the Debug Firebase functions command:

Answer 2

As of firebase-tools v7.11.0, the Firebase emulator now supports attaching a debugger with the --inspect-functions option. This allows you to use WebStorm to debug locally-running firebase functions while using the rest of the (much improved) emulator tools.

First make sure you have the necessary firebase-tools:

$ npm install firebase-tools@latest

Now you can start your functions in the Firebase emulator from your project directory:

$ firebase emulators:start --inspect-functions

The output will show something like:

$ firebase emulators:start --inspect-functions
i  emulators: Starting emulators: functions, hosting
⚠  functions: You are running the functions emulator in debug mode (port=9229). This means that functions will execute in sequence rather than in parallel.
✔  functions: Using node@10 from host.

Note the "port=9229" in the output above. This is the port to which we're going to tell WebStorm to attach.

Open your project in WebStorm, then:

1. select Run | Edit Configurations...
2. In the "Run/Debug Configurations" window, click the "+" button and select "Attach to Nodejs/chrome" option.

3. Select your new configuration, and configure it to attach to the port shown in the output above (9229 in my case):

4. Click Apply and OK. Your configuration is saved.

From the main WebStorm menu, you can now select Run | Debug... and select your new configuration. WebStorm will attach to the process hosting your functions, and you can use debug features (breakpoints, etc.) just like a normal debug session from within WebStorm.

Answer 3

UPDATE 2020:

As of firebase-tools v7.11.0 the Firebase emulator allows debugging of hosted functions with the --inspect-functions flag. This has many advantages over using functions-framework as described below. See this answer for details.

ORIGINAL ANSWER:

Configuring WebStorm to debug a Firebase function can be confusing because there are a couple of different ways to run Firebase functions locally.

Here's what works for me:

1. npm install --save-dev @google-cloud/functions-framework
2. In WebStorm create a Node.js debug configuration
   • Run | Edit Configurations... | + | Node.js
3. Name it as you please (eg, "Debug Function").
4. In the "JavaScript file:" box, specify: node_modules/@google-cloud/functions-framework/build/src/index.js
5. In "Application Parameters", specify --target=<your-function-name>
6. Click OK

It should look something like this:

(In my example, I'm also specifying the --port switch to set the port the function will listen on).

After that, running Run | Debug | Debug Function from the WebStorm menu will load up your function and hit any breakpoints you've set.