Five Handy Chrome Dev Tools Tips

1. Search for CSS Selectors and Properties

On the Elements tab, in the Styles sub tab where the css selectors are listed there is a searc box at the bottom that says "Find In Styles". As you type in that box the matching selectors and properties will be highlighted in yellow. No more scanning the list and accidentally missing what you were looking for.

2. Color Picker

If you want to expirement with a color change the color picker is very useful. Simply find a defined color property in the styles tab and click the color square. Bingo pick colors until your heart is satisfied.

3. Query Selectors in Console

You don't need to write out document.getElementsByTagName('img') just to quickly find something in the DOM. You can use document.querySelector('img') which returns the first match and document.querySelectorAll('img') which returns an array of all matches. And that's not all! You don't even have to type the full function name. In chrome there is a defined shortcut of $ for querySelector and $$ for querySelectorAll. I do wish they would have chosen something different than $ because most of the time $ is a reference to jQuery and jQuery('img') and querySelector('img') behave slightly differently. But no matter, they are still a quick way to find that pesky element that you are searching for.

$('img.logo'); //returns the first <img class="logo"/>
$$('img.logo'); //returns [] of all the <img class="logo"/>

4. Local Modifications

After you have made changes to the html or css, you can view your changes per file in Local Modications. Go to sources and right click the file you have changed. Then select the "Local Modications" option. Upon clicking that a "History" sub tab will appear at the bottom of the dev tools pane. There you will see a list of your changes sorted by time edited and have the option of reverting back to a previous state.

5. Right Click Menu in Network Tab

This tip is really multiple tips combined into one. The right click menu for a network call in the Network tab provides many useful features. The below image shows them all. My favorites are Copy Request Headers which gives insight into header values without having to dig for them. And Replay XHR which lets me resend a specific request without refreshing the entire page.

p.s. For more handy chrome dev tool tips check out this site: