- To open DeVTools on Windows: Press Ctrl + Shift + J
- Click sources tab to debug JavaScript
- The File Navigator pane. Every file that the page requests is listed here.
- The Code Editor pane. After selecting a file in the File Navigator pane, the contents of that file are displayed here.
- The JavaScript Debugging pane. Various tools for inspecting the page's JavaScript. If your DevTools window is wide, this pane is displayed to the right of the Code Editor pane.
- Line number: click line number in code editor page to set breakpoint in code. Line-of-code breakpoints are the most common type of breakpoint. When you've got a specific line of code that you want to pause on, use a line-of-code breakpoint.
- Fetch/AJAX
- DOM
- Global
- Event: Event listener breakpoints let you stop JavaScript code on event
One common cause of bugs is when a script executes in the wrong order. Stepping through your code enables you to walk through your code's execution, one line at a time, and figure out exactly where it's executing in a different order than you expected.
- Resume Script (F8) - The script continues executing until it reaches until next breakpoint.
- Step OVER next Function (F10) - confident a function is working. Function executes but you do not step into it line by line. Runs function without detailed line by line analysis. Executes a function without stepping into it.
- Step INTO next Function (F11) - to step through the execution of a function, one line at a time.
- Step OUT of next Function (Shift + F11) - if function is not relevant. DevTools will run rest of function without line by line analysis
- Step (F9)
- Deactivate Breakpoints (Shift + F8)
- Pause on Exceptions
In JavaScript Debugging pane, call stack shows list of functions that caused current function to run.
When you're paused on a line of code, the Scope pane shows you what local and global variables are currently defined, along with the value of each variable. It also shows closure variables, when applicable. Double-click a variable value to edit it. When you're not paused on a line of code, the Scope pane is empty.
The Watch Expressions tab lets you monitor the values of variables over time. As the name implies, Watch Expressions aren't just limited to variables. You can store any valid JavaScript expression in a Watch Expression. For example: "typeof(x)."
In addition to viewing console.log() messages, you can also use the Console to evaluate arbitrary JavaScript statements. In terms of debugging, you can use the Console to test out potential fixes for bugs. When paused on a line of code, Console has access to all variables currently in scope.
You've found a fix for the bug. All that's left is to try out your fix by editing the code and re-running the demo. You don't need to leave DevTools to apply the fix. You can edit JavaScript code directly within the DevTools UI.
- Make change in code editor and press: CTRL + S.
- Deactivate breakpoints to run app
- Resume script execution