Skip to content
Simple walk-through of using the step debugger in VS Code
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
img
src
.gitignore
README.md
favicon.ico
index.html

README.md

How to debug JavaScript with VSCode

  • Clone this repo to your computer
  • Install Debugger for Chrome extension in VS Code
  • Install http-server
    • npm install -g http-server
  • Open project in VS Code
  • Server project with http-server
    • http-server .
  • Add debug configuration
    • Debug -> Add Configuration -> Chrome: Launch
  • Run Debugger
    • Debug -> Start Debugger
    • In VS Code:
      • Debug sidebar will open
      • Debug toolbar will show at top of VS Code
    • VS Code will open a new Chrome window with debugging enabled

Debug Toolbar:

Debug Toolbar

  • Handle - Allows you to move the toolbar
  • (Pause/Pause) Pause/Continue - Pause/Continue the debugger, continue will run the application till it hits the next breakpoint
  • (Step Over) Step Over - Run the code without inspecting
  • (Step Into) Step Into - Run the code and "dive" into any functions
  • (Step Out Of) Step Out Of - Run code till out of the current function
  • (Restart) Restart - Restart the debugging section (refreshes the browser)
  • (Stop) Stop - End the debugger session

Parcel debug configuration

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome w/Parcel",
    "url": "http://localhost:1234",
    "webRoot": "${workspaceFolder}",
    "trace": true,
    "breakOnLoad": true,
    "sourceMapPathOverrides": {
        "*": "${webroot}/src/*"
    }
}
You can’t perform that action at this time.