Chrome DevTools: not just for Developers

First question: what browser do you normally use when surfing the web?

If you said Internet Explorer you can close this tab right now, shutdown your computer and cry in shame.

Jokes aside, you’ll get the best possible web experience using Firefox or Chrome, period.

I’m a Chrome fan myself but it’s well known it sometimes drains battery life or uses too much RAM/CPU. In its defense they’re working very hard every version to fix this major issues. Furthermore, in the latest Chrome 45 the memory consumption has been reduced by an average 10%.

I use Google Chrome on a daily basis to render my HTML slices and debug any web page, it is my first choice. Why? The Chrome DevTools.

All hail the Chrome DevTools

Chrome’s built-in authoring and debugging tool.

If you’re a developer you already know what I’m talking about. If you’re a power user you might have heard about it or even seen it.

Basically it’s a tool that allows us to do magic inside our browser. We can see the source code, see how long takes to load a page, what scripts is it using… It has a lot of goodies. Honestly, there’s options I’ve barely used or never seen.

I would like to do a quick introduction to some of the tools I use when working on projects to speed up development. Some of this tips can be used even if you’re not a developer. A Delivery or Project Manager can make use of them to do their jobs.

Emulate Mobile or Tablet

On of the things you might want to do is see how a website is displayed on a mobile device. If you don’t have a real device with you, you can use the DevTools Device Mode.

If comes with a set of predefined devices that not only will resize the screen to the device size but will also change the User Agent to actually trick the site into thinking you’re using the real device.

Even more, you can also emulate how a website would load on a 3G or 4G network.

Live change any HTML

You might want to try a different heading text real quick without having to log in to your CMS and actually doing the changes.

Use the DevTools to do the changes live:

devtools-live-html-edit

Pick any color

Long gone are the days when we had to use a browser extension or Photoshop to pick colors from a website.

The DevTools will help you identify and change element colors with ease. Apply live changes to the site without exiting your browser.

Just select an element with a color, click on the color box and hover anywhere:

Hover or Focus states

Some CSS effects are only visible when we hover our mouse or click on an element. For instance a menu or a dropdown.

With the DevTools you can select an element, go to the pin and mark the “hover” state, it will simulate a mouse hover for you.

Page size by type

Speed and page size matters. Now more than ever with everybody browsing through a mobile device.
It’s a good selling point and practise to check your website footprint.

To do that open the DevTools, go to Network, make sure the Filters are turned on and then filter by type.
You can see how much Kb’s of CSS, JavaScript or images, among others, is your site loading.

network-filter-types-2

Unminify the Minified

A little extra for the developers out there who might not know this trick.

Open the DevTools, click on a the CSS or JavaScript and then look for the {} icon on the bottom left. It will unminify the content for you.

Your thoughts

Have you already used the DevTools before? Will you use it from now on?

Share

Published by

Ricard Torres

Ricard is a Senior UI/UX Developer @ TBSCG. Based in Barcelona he also plays guitar, takes photographs and teaches Haidong Gumdo.