Debugging with Chrome DevTools

Table of Contents

• The Chrome DevTools Debugger
• Debugging functions in childprocess isolation mode
• Debugging functions in inprocess isolation mode
• Additional Chrome DevTools reading

The Chrome DevTools Debugger

The Chrome DevTools are a set of web authoring and debugging tools built into Google Chrome. As of Node.js v6.3.1 you can use the DevTools to debug and profile your Node.js code.

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 the debugger is started on function invocation.

1. Switch to childprocess isolation mode.

    functions config set isolation childprocess
   

2. Enable debugging:

    functions config set inspect true
   

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

4. Deploy a function.

5. Call the 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
   

6. Paste the printed chrome-devtools URI into a new tab in Chrome.

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

   

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

   Click "Resume script execution" 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.

   

   Take this opportunity to find your source code files in the left pane's file navigator in order to set breakpoints within your code.

9. Click "Resume script execution" again to invoke your function and move the debugger into your code, seen below:

   

10. Close the Chrome tab 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. Switch to inprocess isolation mode.

    functions config set isolation inprocess
   

2. Enable debugging:

    functions config set inspect true
   

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

4. Deploy a function.

5. Call the 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
   

6. Paste the printed chrome-devtools URI into a new tab in Chrome.

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

   

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

   Click "Resume script execution" 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.

   

   Take this opportunity to find your source code files in the left pane's file navigator in order to set breakpoints within your code.

9. Click "Resume script execution" again to invoke your function and move the debugger into your code, seen below:

   

10. Close the Chrome tab when your function exits to close down the debugger and release your terminal, which will print any function output.

Additional Chrome DevTools reading

• https://nodejs.org/api/debugger.html#debugger_v8_inspector_integration_for_node_js
• https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27
• https://mattdesl.svbtle.com/debugging-nodejs-in-chrome-devtools
• https://blog.hospodarets.com/nodejs-debugging-in-chrome-devtools