5 Hidden Gems in Chrome DevTools that Anyone Can Use

Chrome’s DevTools section is super powerful, and it’s not just for developers. Designers, project managers, and visitors can use it too! Here are five things that you can use it for, along with a screencast featuring your truly, showing you exactly how to complete each task. Even if you’re not a developer, this will be useful.

Dev tools tabs
Here’s what DevTools looks like, along with the basic tabs.

DevTools has quite a few tabs. For this post, we will only be focusing on Elements and Networks. The Sources tab is used for editing the CSS, JavaScript, and other files in real-time. The Console tab gives you a JavaScript console where you can compose and execute scripts right on the current page. Timeline, Profiles, and the others are geared towards finding performance issues and bugs, then fixing them.

Now, here are the five DevTools tasks that I’d love to share with you.

Read Also: Why Developers Always Say No

Mobile Emulation

No longer do we have to use multiple devices to create responsive websites! Do you need to see what our blog looks like on the latest Samsung Galaxy phone? How about an iPhone?

Let’s say that your boss is checking out the site on his tablet, and one of the headings is wrapped in a really awkward manner. You check it out on your Nexus, the department’s iPad, and your phone, it all looks good! Oh yeah, the boss has a Kindle Fire. Just choose one of the Fire variants from the device menu and find the offending screen size/layout issue.

Device emulation
A great way to test out your site on other devices is to use the Chrome Inspector device emulator.

You can even emulate a slower 3G connection to see if a page loads strangely when the assets are being downloaded slowly.

Network Traffic Inspection

What if your site is taking forever to load? It’s probably a really large asset or a rogue JavaScript from a third party. Aside from staring at the tiny line of text in the lower-left corner of your browser, how can you tell what is slowing the page down?

The Network Tab (shown below) can tell you when the site’s assets loaded, and how long they took.

Mint network tab
Here we see a font file taking a while to load. The download is quick, but for some reason, it’s waiting for half a second before the download starts.

Figure out what is causing the slowdown; maybe someone used a bunch of images that are 7MB each; perhaps it’s something more complex (such as an external script timing out or refusing to load). If your assets are too large, then replace them with smaller, compressed versions. If it’s something more complex, you should speak with your developers and see if it’s normal.

Downloading Images

Perhaps an image is a background image instead of an <img> element. If that’s the case, you can view the element and then download the image from the CSS or Network panel.

Download tricky image

Alternatively, you can grab it straight from the network tab we looked at earlier!

download tricky image-2

Tweaking the Text on a Page

This is really useful if you are in charge of coming up with alternate headlines for a blog post or marketing page. Will the new copy fit? How much space is available until the text wraps? After tweaking the copy, you may find that the font size needs to be adjusted too; depending on how the CSS is written, you can simply tweak it in the panel on the right. Once that’s done, you can go to your developers with concrete info: “I want to change the headline on this section. It will make things wrap to a third line, but it looks good if we reduce the font size to 19px. Here’s a screenshot.” Developers love that stuff!

Bootstrap copy change
Just double-click to enter editing mode, then enter what you want.

Any changes you make using this method will only stick around until you refresh the page, so be careful.

Rearrange the DOM!

OK, so the DOM is short for “The Document Object Model”. When I say you can rearrange the DOM, what I mean is that you can drag and drop elements in the HTML structure to change their order. On a Bootstrap site, you can make the third column actually be the first column… just to see how it would look. This is much better illustrated in video form, so be sure to check out my super-informative screencast below; I promise you’ll love it!

Screencast Showing These Five Tasks

Chrome’s DevTools are constantly changing, and new features are always being added. In addition to all of the groovy JavaScript goodness that one can get from using it to debug websites, it can be used for some down-to-earth tasks like the ones outlined in this post.

Ruben Harutyunyan

Back to top