Azure Functions: How to debug in WebStorm?

Question

The azure-functions-cli offers a way to kickoff debugging, but these instructions seem to be Visual Studio specific.

I tried using a similar trick to serverless by setting up a run config in WebStorm to point the JavaScript file to:

\node_modules\azure-functions-cli\lib\main.js

And then passing the Application args:

run myFunctionName --debug

This successfully runs the functions with Azure's tools, but both WebStorm tries to set a debugging port; and when the Azure window opens up it sets its own debugging port.

From Webstorm:

C:\Program Files (x86)\JetBrains\WebStorm 2016.2.3\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" --debug-brk=60168 --expose_debug_as=v8debug C:\Users\username\AppData\Roaming\npm\node_modules\azure-functions-cli\lib\main.js run myfunction --debug Debugger listening on [::]:60168 System.Net.Http.HttpRequestException: An error occurred while sending the request. ---> System.Net.WebException:

Likewise, Azure-cli says it opens a debugging port, but they do not match.

As a result, breakpoints set are ignored when the functions are called (Though it does successfully run).

Anybody know how to configure this properly to be able to use WebStorm to debug?

Answer 1

Azure-Functions-CLI was renamed to azure-functions-core-tools. If you still have the Azure-Functions-CLI see my legacy response at the end of this post.

If you're running the new azure-functions-core-tools it looks like they broke the capability to run a remote debugger :-(.

I have the following issue opened and I will update if they tell me otherwise: https://github.com/Azure/azure-functions-core-tools/issues/378

Fortunately, the new Beta version of the azure-functions-core tools doesn't have all of this C# craziness that prevents it from running on other OSes and requires a remote debugger. To install that version, you can use:

npm i -g azure-functions-core-tools@core

With that version installed, you can launch things with the good 'ol standard Node runtime.

1. Within WebStorm from Run -> Edit Configurations create a new "Node.JS".
2. Give the debugging some type of name.
3. Set the JavaScript file to: ~\AppData\Roaming\npm\node_modules\azure-functions-core-tools\lib\main.js

NOTE: The above assume you installed Azure Functions on a Windows machine with the global flag.

4. Set the Application Parameters to: start --debug VSCODE

5. Edit the file ".vscode\launch.json" and change the debug port to 9229 for node.

6. Within WebStorm choose Run-> Debug:"What_You_Named_the_Remote_Profile"

7. Add some breakpoints.

8. Navigate to your API end-point and see that the break-points work.

NOTE: By default it appears the function will be at http://localhost:7071/api/functionName

------------------- EDITED But Below Held for Posterity --------------

Okay, it looks like you can not do this with local debugging, but can with "Remote Debugging" within WebStorm.

1. Within WebStorm from Run -> Edit Configurations create a new "Node.JS Remote Debug".
2. Give the debugging some type of name.
3. Hit the + Sign where it says, "Before Launch: External Tool" and choose "Run External Tool".
4. Hit the + Sign again and fill it out like the screen-shot (This is assuming you installed the Azure Function CLI globally).

NOTE: The above screenshot has been updated based on the latest version of Azure Functions CLI/. Earlier versions required you to state an app name, and did not require --debug to debug. As a result if you are not updated to the latest version of Azure Functions CLI (now known as Azure-Functions-Core-Tools) you may need to have "run MyApp" in the Parameters field.

5. Within WebStorm choose Run-> Debug:"What_You_Named_the_Remote_Profile"

6. Add some breakpoints.

7. Navigate to your API end-point and see that the break-points work.

NOTE: By default it appears the function will be at http://localhost:7071/api/functionName