30 DevTools resources to help you get the most out of Firefox and Chrome - Heart Internet Blog - Focusing on all aspects of the web

DevTools are powerful sets of web developer tools built directly into major web browsers. They help you edit websites on-the-fly and quickly diagnose problems. You can manipulate DOM elements, gauge performance and debug JavaScript — all from within the browser window in real time. DevTools have become essential to web development, and new tools are being added all the time.

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

Using DevTools to Improve the UX Design to Development Process

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.

DevTools for Designers

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:

Morphing with clip-paths from Mikael Ainalem on Vimeo.

Overviews and CSS

16 DevTools Tips and Tricks Every CSS Developer Needs to Know

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.

A Guide to New and Experimental CSS DevTools in Firefox

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.

14 Firefox Developer Tools You Might Not Know About

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.

Things You May Not Know About Chrome DevTools

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.

Find Out Why Your CSS isn’t Working! New Firefox DevTools Features

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.

Firefox DevTools for CSS Authors

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.

8 Little Videos About the Firefox Shape Path Editor

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.

Using DevTools to Understand Modern CSS Layout Techniques

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:

Debugging CSS Grid with Firefox DevTools

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.

How to Use the Animation Inspector in Chrome DevTools

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.

Web performance

Animation Performance 101: Measuring with Dev Tools

Learn how to measure and diagnose performance bottlenecks in web animations with Chrome DevTools. Also check out part 1 of this ultimate guide to animation performance, which covers how the browser renders elements and what you should and shouldn’t animate, and part 2, which covers how to optimise JavaScript.

Investigate Animation Performance with DevTools

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.

Are Long JavaScript Tasks Delaying Your Time to Interactive?

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.

Making Cloud.typography Fast(er)

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.

Bandwidth or Latency: When to Optimise for Which

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.

Hands on Performance Debugging with the Browser in DevTools 

In this video JavaScript developer advocate Alex Lakatos presents a no-slides, hands-on, live debugging session using only the browser developer tools on a website he picked from the audience. He dives deep into spotting performance bottlenecks into any website and how to fix them.

Debugging JavaScript and TypeScript

Debugging Javascript Like a Pro

This article aims to explain the most useful tools and techniques provided by the Chrome DevTools to debug your Javascript code better and faster than ever before. Topics covered include setting breakpoints to debug code at a specific line, navigating the call stack, pausing/resuming the script execution, and more.

Faster Smarter JavaScript Debugging in Firefox DevTools

The Firefox DevTools team is designing a more productive debugging experience and in this article explores inline breakpoints for fine-grained pausing and stepping, seamless debugging for JavaScript Workers, human-friendly variable names for source maps and more.

 

Debugging TypeScript in Firefox DevTools

This article explains how to use Firefox to debug TypeScript applications. As today’s browsers can’t run TypeScript code directly, you’ll learn how to compile TypeScript into JavaScript before it’s included in an HTML page and how to generate a source-map that can be used to debug the TypeScript code with DevTools.

Miscellaneous

Get Started with Viewing and Changing the DOM

An interactive tutorial by Google to teach you the basics of viewing and changing a page’s DOM using Chrome DevTools. Topics covered include editing the DOM, accessing nodes in the Console, and adding breakpoints when the JavaScript modifies the DOM.

Auditing for Accessibility Problems with Firefox Developer Tools

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.

Navigate Chrome DevTools with Assistive Technology

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.

Powerful Automation with the Chrome DevTools Protocol

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 DevTool Secrets

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.

Dev Tips

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.

The DevTools Advent Calendar

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 Developer Video Channel

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:

Google Chrome Developers Video Channel

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

Subscribe to our monthly Heart Internet newsletter, filled with the latest articles about web design, development, building your business, and exclusive offers.

Subscribe now!

Comments

Please remember that all comments are moderated and any links you paste in your comment will remain as plain text. If your comment looks like spam it will be deleted. We're looking forward to answering your questions and hearing your comments and opinions!

Leave a reply

Drop us a line 0330 660 0255 or email sales@heartinternet.uk