3 Tips for Chrome DevTools Users

Months ago, Keith Peters, instructor of the excellent JavaScript course for our free online school Aquent Gymnasium, was available to do a new Gym Short (one of our hour-long courses) for us. Now, Keith is a pretty sharp guy and could have taught a course on any number of subjects, but when I proposed the topic of “Chrome Developer Tools” and he agreed, I couldn’t have been happier.

Every web browser these days has a set of built-in developer tools which allows anyone to interact with the code of a web page or web application. These tools are used to troubleshoot common issues, and developers use them primarily to inspect and modify HTML, CSS, and JavaScript code. This process can also be done with a separate text-editing application, but developer tools speed up this process immeasurably.

DevTools can also do things that text editors typically don’t, such as show which assets a web page has requested or emulate a mobile device to help improve a responsive design. We chose to focus on Chrome’s version of developer tools because that browser is the most widely used — just keep in mind that its developer features are very similar to all other browsers.

Why a course on DevTools is worth taking

The first reason is that, as a designer/developer who’s been using web developer tools for over a decade, I’ve gotten a bit complacent in keeping up with the advances in browser technology. Inspecting a page and modifying the HTML and/or the CSS is something I do by habit, but it’s a bit like making a painting with a palette of only two colors, there’s a whole other spectrum out there that I’ve been neglecting.

The second reason is that as a producer of courses on web design and development at Gymnasium, I’ve seen all of our instructors use dev tools in interesting ways while teaching their courses. I wanted a way to collect these different techniques into a unified course because I knew it would be a valuable set of resources for our students.

Our version of a Greatest Hits album

In the spirit of discovery, here are 3 browser dev tips from our various courses that made me sit up and take notice when I first saw them. Please feel free to explore the courses themselves for more context, but if you currently know how to access Chrome DevTools, try these tips out now. You should be able to experiment with them on almost any web page you visit.

1) The first tip is from the aforementioned Chrome Developer Tools course, and while basic, it’s also one I wish I had known earlier. In the following snippet you can see a developer who has just encountered an external CSS file that has been minified and is displayed as a single line stretching from here to Omaha, making it virtually impossible to do anything with. How do we turn this code into something easy to understand and work with?

• In the Sources tab, click on the double brackets in the lower-left corner in order to instantly format the CSS into something readable by humans.

Bonus Tip: This technique is not just for CSS — it will work with JavaScript as well.

2) This next tip comes from Aaron Gustafson’s Modern Web Design course and is actually a two-for-one deal. In the following snippet, a developer wants to understand how a specific paragraph affects the layout of her page. So in the first example she simply hides the paragraph to see the effect, and in the second example, she takes it a step further by deleting it altogether, thereby reflowing the content of the page.

• In Chrome, to hide an element, locate it in the Elements tab, then right-click or ctrl+click it, and choose “Hide Element.”
• In Chrome, to delete an element, locate it in the Elements tab, then right-click or ctrl+click it, and choose “Delete Element.”

Bonus Tip: Remember that deleting an element is just temporary. If you want to get it back you can always use the designer and developer’s best friend Ctrl+Z (PC) or Cmd+Z (Mac). Alternatively, you can always reload the entire page to get everything back to normal.

3) This tip is a sneak peek from our upcoming Responsive Web Design course with Jason Pamental who uses the Network tab in Chrome to debug and improve the performance of his web pages. At its most basic, the Network tab analyzes every single resource that is loaded onto a page (such as images, fonts, and more) and then allows you to view those resources by type, if desired.

• Once you are in the Network tab, the first step is to click the “Disable cache” checkbox. What this does is forces your web browser to treat the web page as if it’s never seen it before and all of the resources will be downloaded from scratch, thereby simulating what a first time visitor to the site might experience.
• Next, reload your web page and the Network tab will start to download everything on the page. When it’s complete, you’ll see important information in the status bar, such as the total amount of data transferred.
• You’ll also see a list of every single file downloaded, as well as when it was downloaded in relation to other assets, and a whole lot of other stuff. In this example, we click on the Font category to see what fonts are being used, and specifically, we might be interested in the file size of those fonts to help us make some decisions about the size of this page.

Bonus Tip: After you are done recording your network activity, be sure to uncheck the “Disable cache” option or you’re going to have a bad time surfing the web for the rest of the day.

Inspect and optimize your dev tool game

I could do this all day, so I hope you’re inspired to take a closer look at the development tools your browser has to offer. Even if you’re using them daily, I’m willing to bet there are a lot of surprising features in there that you might find useful. If you’ve got a favorite tip or trick, let us know in the comments.