Debugging with Visual Studio Code

Table of Contents

• The Visual Studio Code Debugger
• Debugging functions in childprocess isolation mode
• Debugging functions in inprocess isolation mode
• Additional Visual Studio Code reading

The Visual Studio Code Debugger

One of the key features of Visual Studio Code is its great debugging support. VS Code's built-in debugger helps accelerate your edit, compile and debug loop.

Debugging functions in childprocess isolation mode

In childprocess isolation mode, functions are invoked in their own processes, separate from the main Emulator process. This is more secure and safer for the Emulator, but it means a debugger must be started and shutdown for every function invocation.

1. Open Visual Studio Code in your project folder.

2. Create a new launch configuration (in the launch.json file) for your project:

    {
      "version": "0.2.0",
      "configurations": [
        {
          "name": "Debug Function",
          "type": "node2",
          "request": "attach",
          "port": 9229
        }
      ]
    }
   

   Be sure to set type to node2.

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. Switch to childprocess isolation mode.

    functions config set isolation childprocess
   

5. Enable debugging:

    functions config set inspect true
   

6. Restart the Emulator:

    functions restart
   

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

    Inspect mode is enabled for the Supervisor. During function execution the debugger will listen on port 9229 and the Chrome debugging URL will be printed to the console.
   

7. Deploy your function, if you haven't already.

8. Call your function.

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

    Function execution paused. Connect to the debugger on port 9229 (e.g. using the "node2" launch type in VSCode), or open the following URL in Chrome:
   
        chrome-devtools://devtools/remote/serve_file/@60cd6e859b9f557d2312f5bf532f6aec5f284980/inspector.html?experiments=true&v8only=true&ws=localhost:9229/fae86ac1-2e59-46b8-9b08-3e997104662c
   

9. In Visual Studio Code, go to the Debug View and select your "Debug Function" launch configuration.

10. Click the green arrow button to start debugging.

11. Script execution will be paused on the first line of the Emulator's worker.js file, seen below:

    

12. At this point your function code has not yet been loaded into the worker.

    Click "Continue" once to load your function into the debugger prior to invoking your function. The script will pause again right before the line that would invoke your function, seen below.

    

13. Click "Continue" again to invoke your function and move the debugger into your code, seen below:

    

14. Click the red "Disconnect" button when your function exits to close down the debugger and release your terminal, which will print any function output.

Debugging functions in inprocess isolation mode

In inprocess isolation mode, functions are invoked within the main Emulator process, which is possibly dangerous to the Emulator, but allows a single debugger instance to handle multiple function invocations.

1. Open Visual Studio Code in your project folder.

2. Create a new launch configuration (in the launch.json file) for your project:

    {
      "version": "0.2.0",
      "configurations": [
        {
          "name": "Debug Function",
          "type": "node2",
          "request": "attach",
          "port": 9229
        }
      ]
    }
   

   Be sure to set type to node2.

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. Switch to inprocess isolation mode.

    functions config set isolation inprocess
   

5. Enable debugging:

    functions config set inspect true
   

6. Restart the Emulator:

    functions restart
   

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

    Started in inspect mode. Connect to the debugger on port 9229 (e.g. using the "node2" launch type in VSCode), or open the following URL in Chrome:
   
        chrome-devtools://devtools/remote/serve_file/@60cd6e859b9f557d2312f5bf532f6aec5f284980/inspector.html?experiments=true&v8only=true&ws=localhost:9229/87d62bf0-e12e-43f5-96ec-e253e45ebf34
   

7. In Visual Studio Code, go to the Debug View and select your "Debug Function" launch configuration.

8. Click the green arrow button to start debugging the Emulator and all function invocations.

9. Deploy your function, if you haven't already.

10. Call your function.

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

     Function execution paused. Connect to the debugger on port 9229 (e.g. using the "node2" launch type in VSCode).
    

11. Script execution will be paused right before the line that would invoke your function, seen below.

    

12. Click "Continue" to invoke your function and move the debugger into your code, seen below:

    

    Note that you won't be able to invoke another function until the paused function finishes executing.

Additional Visual Studio Code reading