Step Debugging JavaScript

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.

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

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/*"
    }
}

Step Debugging Javascript

with Visual Studio Code

How we all get started debugging

console.log('Hello World');

Advantages & Disadvantages

of console.log

What is Step Debugging

Advantages & Disadvantages

of step debugging

Getting VS Code

...ready to debug

Prerequisites

Configuration

Where is the configuration stored

Sample Parcel Configuration

Ready the code base

...source code and server

Start debugging

Debugger Operations

Demo

Where to go from here...

Documentation

Video Tutorial

Questions?

Feedback...