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

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.

Answer 2

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 the app in typescript when files 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)

2. How to launch

• Run npm run dev to launch the emulators, or create a npm run config dedicated for this in WebStorm. You'll need to launch this using WebStorm or manually before the next step, everytime, unless you use compound run configurations (see last section)
• Connect WebStorm Debugger to NodeJS application running on port 10001:
  • Click Attach to NodeJS/ Chrome, and update the port
  • Press the debug button while this run config is selected in drop down menu

Extra tip: compound run configurations

• You can create a Compound run configuration, which starts all the things you might need: e.g. I have 4 things running at the same time, my web app client in React, 1 for the NextJS server which serves/ build the react app, my firebase functions (just to run it), and the firebase debugging run configuration (just to debug it).

All breakpoints work!: