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.
Now, here are the five DevTools tasks that I’d love to share with you.
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.
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
The Network Tab (shown below) can tell you when the site’s assets loaded, and how long they took.
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.
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!
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!
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