Chrome DevTools
Chrome DevTools is a set of web developer tools built directly into Google Chrome.
- Browser Debugging Phase 1: View Source + alert
- Browser Debugging Phase 2: Firebug (Add On to Firefox), sunset now
- Browser Debugging Phase 3: Browser DevTools
We will use Chrome DevTools on BugBook, a site built with jquery (by me).
Editing
Let’s open Chrome DevTools by Right Click > Inspect or press F12.
Elements & Styles
- modify DOM
- modify CSS
- force state
DOM Breakpoints
- breakpoint
Saving Changes in Overrides
- Sources > Overrides
Debugging
console.log
Step Through Debugging
debugger