CODEWITHSUNDEEP
javascriptnode.jsdebuggingwebstormazure-functions
Doug
Doug

Reputation: 7067

Azure Functions: How to debug in WebStorm?

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?

Upvotes: 7

Views: 3309

Answers (3)

Nikita
Nikita

Reputation: 4686

To make it easier to work with it make sense to add following lines to package.json enter image description here

npm run build && func start --inspect=5858

Then need to setup debug to tool to connect to port 5858 (number doesn't really matter) enter image description here

With this settings you should be able to setup breakpoints and run you function in debug mode like this

yarn debug

and click on debug button after process up and running.

Upvotes: 0

Doug
Doug

Reputation: 7067

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.

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

enter image description here

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

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

  3. Add some breakpoints.

  4. 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). enter image description here

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.

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

  2. Add some breakpoints.

  3. 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

Upvotes: 13

Ahmed Elsharif
Ahmed Elsharif

Reputation: 181

  1. Add this to your local.setting.json file under values: "languageWorkers:node:arguments": "--inspect=5858"
  2. Click Edit configuration. Click the plus icon and choose Attachto Node.js/Chrome
  3. Fill in these values for the options: host: localhost - Port: 5858 and set Attac to option to "Crhome or Nod.js>6.3 started with --inpect"
  4. Start the function and run the debugger

See this picture: https://i.sstatic.net/hnC74.png

Upvotes: 13

Related Questions