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