Chrome DevTools

Google Chrome

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

Blackboxing