In the technology industry, we often take for granted things in our work routine that we do so often we don’t even realize we’re doing them: keyboard shortcuts, program macros or any other “muscle memory” tasks that are second nature to us. Many a time I have found myself working with a partner or helping a coworker with a bit of code and they stop me with a, “Whoa now, what the heck did you just do?” For those people I’ve bullheadedly helped without helping, here is a short list of things you might not have known you could do with Chrome DevTools.
Android Debug Bridge
For starters, a few years ago I wrote a two-part article on how to use the Chrome DevTools to inspect and debug webpages from an Android device. Pretty cool stuff, and useful when developing a responsive web design.
Force Element State
Another helpful feature is the ability to force states on any particular element in the DOM. Do you need to debug the :hover styles of your main navigation, but can’t just leave your mouse hovering over it? Pull up the DevTools, right click the element in question, then go to Force Element State. You can have the browser mimic :active, :focus, :hover and :visited styles on any element. This simple feature saves many a page reload.
The DevTools also have a color picker built into every CSS attribute that accepts a color value (color, background, border, etc). In the Styles pane, right next to your color value it will show a small box that is filled with the color value you’ve specified. That in itself is a handy feature to show you exactly what you’re specifying, but if you click that box it will launch a color picker that will let you extract any color from the entire page. It’s your standard magnifying glass picker, so you can get right down to the pixel level with the color you’re choosing. Great if you’re trying to match styles from one part of your page to another.