Chrome DevTools is one of the most advanced assistants that lets you discover, analyze and fix bugs. It can be easily reached in the following ways.
- Click on “More Tools” in the top-right corner menu and select “Developer Tools.”
- Use the F12 key on your keyboard.
- Use Ctrl + Shift + I or Cmd + Opt + I on Mac.
- Right-click the desired element on your page and click “Inspect element.”
You are all set! Let’s now see at least some of the opportunities it offers.
Setting breakpoints in DevTools
One of the ways to set a breakpoint is to find the desired file in the “Sources” tab, select the desired line of code in the section containing code, and left-click this line number. It should then change its color.
You may not need breakpoints to work all the time, so you can choose to set:
- Conditional breakpoints that depend on some condition: right-click the line number and select “Edit breakpoint.”
- Event breakpoints that only work when some event happens: you can select these events in Sources — Event Listener Breakpoints.
Step over, step into, step out: sure steps through your code
- The button resembling a classic pause-and-play button will pause and resume the script execution.
- The button with a bent arrow lets you step over the next function call.
- The button with a downward arrow leads you into the next function call.
- The button with an upward arrow takes you out of the current function.
Restoring the minified code