© 2020 Matt Thomas

Step Debugging Javascript

with Visual Studio Code


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.log('another function begin', variable);
    console.log('another function end', variable);
    // Numerous other console.log calls

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



  • 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

Debug Toolbar
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
Reset the debugging session, including refreshing the browser
End the debugging session, code execution will continue


Sample code, instructions and configuration

Where to go from here...


Visual Studio Code Manual : Debugging

Video Tutorial

Debugging JavaScript (Google Chrome and Visual Studio Code)
Thanks Bradley



  • Matt Thomas
  • Twitter: @matsinet
  • Website: https://where.matsinet.codes

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

Print the presentation
Created with Reveal.js