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

• Install live-server node application globally

Configuration

• Click Debug -> Add Configuration -> Chrome: Launch
• Alternately: Click Debug -> Open Configuration -> Chrome: Launch

{
    "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

• Open a terminal in the root source code folder
• Serve your code via live-server

Start debugging

Debugger Operations

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