Chrome developer tools

I do all my Javascript development in Chrome. But I never really sat down to learn about the Chrome developer tools other than learning how to open the console. Here’s some bits I learned reviewing the docs.

  • Ctrl-shift-C lets you inspect DOM elements with mouseover. This is the same as clicking the little magnifying glass in the tools.
  • In Elements, the panels on the right show the live state of the DOM, CSS, etc. Most bits are editable as well as inspectable.
  • In Scripts, you can set breakpoints by clicking on the line numbers.
  • The docs describe a cool-sounding network page that I don’t have in my Chrome/stable. May be only available in developer for now?
  • There’s ridiculously powerful performance tools built in. Learning it all would take hours, but quickly: go to Timeline, click the round record button, reload your page, then click record again to turn off recording. There’s a profiler too, for statistical profiles. Both seem to work better in Incognito mode so you don’t have any extensions.
  • The console scripting prompt has some limited support for jQuery-like DOM identification of elements.