How to debug firebase cloud functions in WebStorm?

问题

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 ;)

回答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.

回答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.

来源：https://stackoverflow.com/questions/54424869/how-to-debug-firebase-cloud-functions-in-webstorm