Skip to content

matsinet/step-debugger-walk-through

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

How to debug JavaScript with VSCode

  • Clone this repo to your computer
  • Install live-server
    • npm install -g live-server
  • Open project in VS Code
  • Server project with live-server
    • live-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

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published