Can't Debug Azure JavaScript Function using Visual Studio Code

Question

I am using VS code first time and trying to create a azure function with JavaScript language. I followed this article .

Environment:

• NodeJS v16.x installed
• Azure Functions Extensions installed
• Azure Functions Core Tools 4.x installed

Problem:

I created one sample azure function. When running the app with f5 it shows the following error

I removed extension bundle configuration from the host.json and tried again. This time, I got the following error

Can anyone please help on me this

Update:

host.json

    {
  "version": "2.0",
  "logging": {
    "applicationInsights": {
      "samplingSettings": {
        "isEnabled": true,
        "excludedTypes": "Request"
      }
    }
  },
  "extensionBundle": {
    "id": "Microsoft.Azure.Functions.ExtensionBundle",
    "version": "[2.*, 3.0.0)"
  }
}

local.settings.json

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "node"
  }
}

index.js

module.exports = async function (context, req) {
    context.log('JavaScript HTTP trigger function processed a request.');

    const name = (req.query.name || (req.body && req.body.name));
    const responseMessage = name
        ? "Hello, " + name + ". This HTTP triggered function executed successfully."
        : "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.";

    context.res = {
        // status: 200, /* Defaults to 200 */
        body: responseMessage
    };
}

Answer 1

---

Here is the workaround I did to run the Azure Functions of JavaScript Stack using Visual Studio Code by following the same documentation given in the question

Pre-requisites:

1. Install VS Code and Install the Azure Account , Azure Functions , Azure Storage , Azurite , Extension from Extensions Menu and Sign-in to Azure Account from VS Code.
2. Download and Install NodeJS Version 14 (and 16 is in preview I guess), Source: https://nodejs.org/en/download/ and https://phoenixnap.com/kb/install-node.js-npm-on-windows

• Verify the installation from command prompt using the commands node -v and npm -v .
• If you think, you have installed old NodeJS and NPM versions, go ahead to update them. (Reference: https://phoenixnap.com/kb/update-node.js-version and https://www.npmjs.com/package/npm-upgrade ).

3. Install the Azure Storage Emulator (it is deprecated but still using for local development and testing) from here by clicking on the standalone installer. -After Installing the Azure Storage Emulator, make sure it is running. If it is shutdown, then run it manually. To start the Azure Storage Emulator:

   • Select the Start button or press the Windows key.
   • Begin typing Azure Storage Emulator .
   • Select the emulator from the list of displayed applications.
   • Type Start > Enter and Close the Window.

4. Install the Azure Functions Core Tools v3 as well as v4 used for both Old Version and New Version Stack Development from the source and check the version using func --versio n command from command prompt.

5. Install the Azure CLI from the source and PowerShell Module from the source .

6. Follow this prerequisite check before going to the IDE (VS Code/Visual Studio).

---

Steps for running the Azure Functions with/without debugging:

1. Created the workspace folder in the file explorer and opened VS Code from that folder path.
2. Created Azure Functions Project of JavaScript Stack using Azure Functions extension. Here is the boilerplate code which is not modified:

Index.js

module.exports = async  function (context, req) {
context.log('JavaScript HTTP trigger function processed a request.');

const  name = (req.query.name || (req.body && req.body.name));

const  responseMessage = name
? "Hello, " + name + ". This HTTP triggered function executed successfully."
: "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.";

context.res = {
// status: 200, /* Defaults to 200 */
body:  responseMessage
};
}

local.settings.json

{
"IsEncrypted": false,
"Values": {
"AzureWebJobsStorage": "UseDevelopmentStorage=true",
"FUNCTIONS_WORKER_RUNTIME": "node"
}
}

host.json

{
"version": "2.0",
"logging": {
"applicationInsights": {
"samplingSettings": {
"isEnabled": true,
"excludedTypes": "Request"
}
}
},
"extensionBundle": {
"id": "Microsoft.Azure.Functions.ExtensionBundle",
"version": "[2.*, 3.0.0)"
}
}

• No need to remove the extension bundles from host.json

To Run the Function, go to Run Menu > Select either of options Start Debugging or Run without Debugging and I have run this without starting the VS Code, it runs successful in locally.

To Debug the Code:

Put a breakpoint at any line of the code and select the Start Debugging option from the Run Menu

Note: For the errors like: A host error has occurred during startup operation , Value cannot be null , few resolution steps were:

• Use Azure Storage emulator in local development and testing purpose.
• Make Sure You have the latest version of Azure Functions Core Tools along with old if you have (You can install multiple version of AF Core Tools and use according to the requirement).
• In local.settings.json , value of AzureWebJobsStorage is empty by default but if we're using the project locally, it is better to use like "AzureWebJobsStorage": "UseDevelopmentStorage=true"

You can download the above project from my GitHub Repository .

---