Debugging with WebStorm

Table of Contents

• The WebStorm Debugger
• Debugging functions
• Additional WebStorm reading

The WebStorm Debugger

WebStorm provides a full range of facilities for debugging your source code:

• Breakpoints in HTML, and JavaScript.
• Customizable breakpoint properties: conditions, pass count, etc.
• Frames, variables, and watches views in the debugger UI.
• Runtime evaluation of expressions.

Debugging functions

Each deployed function has its own worker process, separate from the main Emulator process. This is more secure and safer for the Emulator and simulates production, but it means there's a different debugger running for each deployed function.

For more information on the standard Node.js Debugger, see Node.js Debugger.

1. Open WebStorm in your project folder.

2. Create a new Run/Debug Configuration:

   

   Select "Node.js Remote Debug" for the new configuration:

   

   Name the configuration "Debug Function" and click "OK" to save it:

   

3. Open the file that you want to debug and set a breakpoint by clicking to the left of the line number of the line where you want to set the breakpoint.

4. Deploy the function you want to debug, e.g.:

   functions deploy helloWorld --trigger-http
   

   See Deploying functions.

5. To debug a function using the standard Node.js debugger, run the following:

   functions debug helloWorld
   

   You should see something like the following printed to the console:

   Debugger for helloWorld listening on port 5858.
   

   You can also configure the Debugger's port and/or force the function to pause execution until you attach to the Debugger. Run functions debug --help for details.

6. In WebStorm, run the "Debug Function" configuration that you created earlier to attach to the debugger.

7. Call your function to start debugging it, seen below:

   

8. WebStorm will disconnect from the debugger automatically when the function worker process shuts down, or you can click the red "Stop process" button to disconnect.

9. To take your function out of debug mode, run the following:

   functions reset helloWorld
   

   or to restart the function and keep its debugging settings, run the following:

   functions reset helloWorld --keep
   

   Run functions debug --help for details.

Additional WebStorm reading

• https://www.jetbrains.com/help/webstorm/2016.3/debugging.html
• https://www.jetbrains.com/help/webstorm/2016.3/running-and-debugging-node-js.html#debugLocal