In this article, we’ll focus on Firefox and Google Chrome’s DevTools, as they tend to be the choice for most professional developers. As DevTools now also include plenty of features for web designers and front-end developers to edit things visually, we especially look at CSS, animation and layouts before digging into performance. We also cover accessibility, debugging TypeScript applications and cutting-edge automation techniques. Most of the resources are must-read articles to bookmark, and at the end we also round up some useful books, newsletters, and video channels to help you master DevTools.
Let’s get started!
DevTools for designers
Lisa Tweedie describes how DevTools can be a designer’s best friend. She goes over various features and what impact they’ve had on her work as a UX designer and also recommends a few Chrome extensions.
An interesting discussion about in-browser tooling that could help web designers do their job. CSS-Tricks rounds up perspectives from a wide array of people and companies who have shared thoughts on this topic. For example, you can the shape path editor in Firefox can be used to explore interesting designs:
Overviews and CSS
In this article here on the Heart Internet blog, Louis Lazaris compiles a number of CSS-related features and tricks available via developer tools that will take your CSS development to a new level. Most are based on Chrome’s DevTools, but there are also a few Firefox tips.
Over at Smashing Magazine, Victoria Wang, a UX designer at Mozilla, runs through seven tools (including Grid Inspector) the Layout Tools team has come up with to help solve the problems of the modern web, with stories from the design process and practical steps for trying out each tool, and takes a peek at potential future projects.
A roundup of some of the excellent tools Firefox has in its collection of Developer Tools. Tools covered include fonts and accessibility inspectors, a shape editing tool, a CSS filters editor, a CSS transform visualiser, an inbuilt eyedropper, and lots more.
Developer Loftie Ellis uses Chrome DevTools pretty much daily, but there are a few things he wishes he knew earlier. Here he rounds up 10 quick-fire features you may not have stumbled across, including easily getting a reference to any inspected element and creating live expressions pinned to your console. Also check out 10 Chrome Developer Tool Features You May Have Missed.
In this article you’ll learn how to use two new features available in Firefox DevTools to help you find out what’s wrong with your CSS: the new “inactive CSS” messages and how to list all elements related to a CSS warning with the console. At the end you’ll also get a peek at some recently added functionality.
A tutorial on how DevTools can help with your CSS authoring and inspecting in the browser. The 11 topics covered in the article include the Shape Path editor, CSS filters, the Responsive Design Mode, working with preprocessors, and much more.
The Shape Path editor in Firefox DevTools is very useful if you want to create clipping paths and shape-outside effects. This article explains what you can do with it and visualises it with the help of some short videos.
Chen Hui Jing explains a variety of modern CSS layout techniques and concepts — such as Flexbox, Grid and Box Alignment — with the help of DevTools. She provides real-world use cases of how such techniques allow designs to better adapt across a broad range of viewports. Also watch her accompanying talk featuring live demonstrations:
Developer advocate Chris Nwamba looks at a few ways you can debug CSS Grid by using the inbuilt developer tools in Firefox. You’ll build a demo CSS Grid app that displays a grid of cat images and then walk through the debug processes step by step.
In this post, you’ll learn which animation dev tools are available in Chrome, how to access them, and what they can do for you. These tools can provide much needed insight into your animations, as well as real time feedback, to help you make them look just right.
In this post by Milica Mihajlija on the blog of web performance monitoring tool Calibre you’ll learn how browser rendering works and how to navigate DevTools to diagnose animation performance issues. It uses Chrome DevTools, but other browsers have very similar features and the high-level concepts are the same everywhere.
Chrome DevTools can now visualise ‘Long Tasks’ (code that causes the main thread to freeze, breaking the user experience) making it easier to debug and optimise away any problems. Performance expert Addy Osmani, an engineering manager on the Google Chrome team, explains how to diagnose costly work preventing user interaction.
Front-end performance consultant Harry Roberts (also see our interview with him) discovered that the cloud.typography site wasn’t quite as fast as it could be, so he analysed the waterfall performance chart in DevTools. In this post, he explains what he found and how — if you use cloud.typography — you can make your own sites faster with just a few changes.
More useful advice from Harry Roberts! Here he shares a DevTools tip to determine whether your assets would benefit most from an increase in bandwidth or a reduction in latency. As a rule of thumb, improvements in latency would be more beneficial than improvements in bandwidth, and that bandwidth optimisations are noticed more when dealing with larger files.
An overview of the Accessibility Inspector that in Firefox 70 has become auditing facility, which helps identify and fix many common mistakes and practices that reduce site accessibility.
This guide by Google aims to help users who primarily rely on assistive technology like screen readers access and use Chrome DevTools. Note that the accessibility of DevTools is a work-in-progress — this article walks you through the panels which are the most accessible and highlights specific issues you may encounter along the way.
In this conference talk, Trent Willis, a senior UI engineer at Netflix, explains how you can start using the Chrome DevTools Protocol to unlock powerful automation techniques for your web application. Trent also dives into the really exciting possibilities that open up when using this in conjunction with headless browsers, such as holistic end-to-end testing, the collection of code usage metrics, and new service paradigms.
Books, newsletters and videos
Browser development tools have evolved from basic consoles to fully integrated development environments, but few of us venture beyond the basics. In this guide by Craig Buckler, you’ll explore the features you may not have considered. Part of SitePoint Premium, but the first chapter (Start-up, Network and Performance) is available to read for free.
This is the essential newsletter to subscribe to if you want to learn more about DevTools. Every week Uma Hansa sends you a developer tip (mostly focused on Chrome DevTools), in the form of a GIF with a short explanation. Recent topics have included the CSS Overview Panel, debugging your push notifications workflow, and overriding your geolocation with predefined areas or custom locations.
Last year frontend trainer Tomek Sułkowski published a series of short articles with tips on how to use DevTools in more performant and fun ways. There are 70 tips in total — a real DevTools treasure trove!
Mozilla’s developer YouTube channel is crammed with excellent short videos to help you get the most out of Firefox DevTools. Presented by amazing experts such as Jenn Simmons and Miriam Suzanne, you’ll discover things like a way to see HTML in one pane, CSS in another pane, and a third Developer Tool at the same time in Firefox:
Of course Google has a similar channel and with every new browser release publishes a short video explaining what’s new in DevTools. There’s also a related New in Chrome playlist for developers as well as more specific ones about improving web performance and building progressive web apps.
For more information about the latest DevTools, check out the overviews of Firefox releases and Firefox Developer Tools articles as well as What’s New in Chrome DevTools (scroll to the bottom for a list of everything that’s been covered in this series).