I finally had the time to sit and click my way through the Google DevTools course I mentioned in the most recent Today’s Readings.

While the first several chapters were certainly more entry-level, they were exceptionally well-done, and I would say still worth the time, even for advanced developers. My feeling has always been that, regardless of the experience and proficiency of the topic, you can always find something you didn’t know beforehand. And anything new learned, to me, is worth it.

So, speaking of learning something new, here is a quick list of things that I did not previously know about Google DevTools, but now do… Hope you find them useful as well!

• Ctrl/Cmd+Alt+i toggles the DevTools open/closed (i ~= Inspect, I guess?)
• $ is referred to as bling… oy.
• Console has a built-in $() selector that works just like jQuery’s (except jQuery’s returns an array, where DevTools’ returns a single item), but if $ is already in the page from some other library that uses $, the library’s version will override DevTools’ version
• $0 will select and highlight the most recent DOM element you interacted with, in the Elements panel; $1 will select the one before that, $2 before that, etc.
• Console has an inspect() method that selects any DOM element, such as:
  inspect($1)
• console.assert() is a great way to verify something, like:
  console.assert(1 == 1) // will return true
console.assert(1 == 2) // will return false
• From the Sources panel, Ctrl/Cmd+S saves any changes you’ve made within Sources files into the browser storage; right-click in the Source panel to use Save As to save to the hard-drive
• Not much else that’s interesting until you get to Chapter 6, Profiling, where they deal with Timeline and Profiling, and how to use them together to really find issues
• Continue watching each Chapter from there, pretty advanced stuff for Profiling & Memory Leak detection
• At the end of the videos, this was a large resource link

At any rate, this course was great, really well-done, and pretty informative! Couple that with the Paul & Paul video, and we should all have a pretty good understanding on how to check the state of our pages, find any glaring issues, and in the end, help make the web a better place to surf!

Happy DevTooling,
Atg

Top⇪