7 Tips To Use Chrome Dev Tools Like a Pro

Chrome developer tools is one of the best web authoring and debugging tools available. Firebug is also great but personally I think Chrome’s did a better job about the ease of use. For IE, well… I use IE only to test the fallback or graceful degradation.  So, this post is about the tips and tricks for Chrome Developer tools that you might not know. Trust me it will help you work faster! (And also look like a pro)

Capture Mobile Screenshot

If you want to take a screenshot of your site on a mobile device, no need to do that on your actual phone. Just open the developer tools and click the toggle device tools bar button. After that, locate the upper right menu and click “Show device fame”. Or just click “Capture screenshot” to save the image

Expand All Nodes Hot Key

No need to manually click each child node to expand them anymore. Just hold Alt key while click the expand arrow and all child nodes will be expanded. There will be a bit of delay if there are lots of child nodes though

Search all files

Need to find a portion of string but not sure which file to look at? Don’t worry, just press Ctrl + Shift + F and now search will be perform through all available files on website. Result will be collapsed into one line for each file

Design Mode

Need a quick edit to your website without messing up the code? Just turn on the designMode by simply go to developer console and type document.designMode = ‘on’

Dock Mode Swap

Switching your Chrome Dev Tools between dock and undock mode like a ninja by simply press Alt + Shift + D

Multi-Cursor

If you want to edit the same thing over multiple lines, why not having some extra cursor? Just hold Ctrl and click where you want to place an additional cursor and it’s on!

Pretty Print

Many website minified their Javascript and CSS which makes it unreadable for human. But with “Pretty print” feature, you can reformat them in just one click. Just locate and click at the bracket “{ }” button at the lower left corner.

You can see them live in our video below. Feel free to subscribe to our channel for more 🙂

Red Stapler Channel: https://www.youtube.com/c/RedStapler_channel