Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
img
 
 
src
 
 
 
 
 
 
 
 
 
 

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
  • Restart VS Code
    • This assures the debug configuration is available
  • 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

Console Commands

  • debugger
    • Invoke the debugger at any time from the browser
  • console
    • The log function is just the beginning

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

About

Simple walk-through of using the step debugger in VS Code

Resources

Releases

No releases published

Packages

No packages published