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’s truly, showing you exactly how to complete each task. Even if you’re not a developer, this will be useful.

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 Network. 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.

 

Mobile Emulation

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

Let’s say that your boss is checking out the site on his tablet, and one of the headings is wrapping in a really awkward manner. You check it out on your Nexus 7, the department’s iPad, 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.

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 dowloaded 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.

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.

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

Just right-click and choose 'Open Link in New Tab'

 

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!

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 web sites, it can be used for some down to earth tasks like the ones outlined in this post. Did I miss something? Do you have a favorite capability of DevTools? Let me know in the comments.

 

Comments
  • francismakes

    Under the Sources Panel, there are execution control buttons that allow a user to “step through code.” I find it helpful for reverse engineering beautiful interfaces and debugging my own code. http://bit.ly/1CoYjRN

    • Jamie Hamel-Smith

      Indeed. We use these for the more challenging JavaScript race conditions and such.

  • Solid Gold As always. Thought I knew it all about the dev tool. Thanks for the video too! I am thinking it may not be a bad idea to do more videos. I like to watch rather than read.

  • yhn

    Awesome! Thank you Jamie! I had no idea about the Network Traffic Inspection; quite useful!