Step Debugging Javascript

with Visual Studio Code

https://where.matsinet.codes/presentations/step-debugging-js

How we all get started debugging

console.log('Hello World');

This is ok simple application logic
Advanced logic === more console.log statements
console.log output statements then become overwhelming

As complexity grows console becomes too verbose:

console.log('function begin', variable);
console.log('function end', variable);
console.group();
    console.log('another function begin', variable);
    console.log('another function end', variable);
    // Numerous other console.log calls
console.groupEnd();

Advantages & Disadvantages

of console.log

  • Easy (NO) setup
  • Have to add code wherever you need output
  • The output is only after execution has completed
  • There is no way to update the variable values interactively
  • There is no way to pause execution interactively
  • Requires clean up code once debugging completed

What is Step Debugging

...is an interactive connection between the IDE and browser allowing the IDE to control the JavaScript execution within the browser.

Advantages & Disadvantages

of step debugging

  • Harder to setup initially
  • Can evaluate variable values during execution
  • Can update the variable values interactively
  • Can pause execution interactively, using breakpoints
  • Can debug compiled code referencing the source code such as TypeScript or Elm
  • No clean up required

Getting VS Code

...ready to debug

Prerequisites

Configuration

  • Click Debug -> Add Configuration -> Chrome: Launch
  • Alternately: Click Debug -> Open Configuration -> Chrome: Launch
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}
  • Restart VS Code

Where is the configuration stored

By default, the launch configuration is stored in project
in the .vscode folder

The launch configuration can be stored across projects (globally) in the settings.json under the "launch" key.

Sample Parcel Configuration

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome w/Parcel",
    "url": "http://localhost:1234",
    "webRoot": "${workspaceFolder}",
    "trace": true,
    "breakOnLoad": true,
    "sourceMapPathOverrides": {
        "*": "${webroot}/src/*"
    }
}

Ready the code base

...source code and server

Start debugging

Debugger Operations

Debug Toolbar
Pause/Continue
Pause or continue the execution of the code
will stop at the next breakpoint
Step Over
Execute the current line without introspection
Step Into
Execute the current line, "diving" into any scopes (functions)
Step Out Of
Execute the code "climbing out" of the current scope
Restart
Reset the debugging session, including refreshing the browser
Stop
End the debugging session, code execution will continue

Demo

Sample code, instructions and configuration
https://github.com/matsinet/step-debugger-walk-through

Where to go from here...

Visual Studio Code Manual : Debugging