Developer Tools Articles
-
Firefox 71: A year-end arrival
Please welcome Firefox 71 to the stage! This time around, we have a plethora of new developer tools features including the web socket message inspector, console multi-line editor mode, log on events, and network panel full text search! And as if that wasn’t enough, there are important new web platform features available, like CSS subgrid, column-span, Promise.allSettled, and the Media Session API.
-
Auditing For Accessibility Problems With Firefox Developer Tools
In Firefox 70, the Accessibility Inspector has become an auditing facility to help identify and fix many common mistakes and practices that reduce site accessibility. In this post, Marco Zehe offers an overview of what is available in this latest release.
-
Quickly Alter Typography with Firefox Font Editor
Have you ever landed on a web page and wondered what fonts are being used? Have you asked yourself where those fonts come from or why a particular font isn't loading? The font editor in Firefox provides answers and insights, and gives you the ability to make font changes directly, with a live preview.
-
Firefox’s New WebSocket Inspector
The Firefox DevTools team and our contributors were hard at work over the summer, getting Firefox 70 jam-packed with improvements. We are especially excited about our new WebSocket inspection feature. To use the inspector now, download Firefox Developer Edition, and open the DevTools’ Network panel to find the Messages tab. Then, keep reading to learn more about WebSockets and the tricks that the new panel has up its sleeve.
-
Video Shorts from Mozilla Developer
Today we’re launching a new video channel, with a selection of shorts to kick things off. Get started with an intro to Dark Mode on the web, by Deja Hodge. Then, Jen Simmons shows us how to access a handy third-panel in the Firefox Developer Tools. Miriam Suzanne has a video all about the
::marker
pseudo-element and list counters. No matter your experience level or job description, we’re all working together towards the future health of the web, and Mozilla is here to help. -
WebHint in Firefox DevTools: Improve Compatibility, Accessibility and more
Creating experiences that look and work great across different browsers is one of the biggest challenges on the web. It can also be the most rewarding part, as it gets your app to as many users as possible. Testing legacy browsers late in the development process can break a feature that you spent hours on, even requiring rewrites to fix. What if the tools in your primary development browser could warn you sooner? With Webhint in Firefox DevTools, we can do exactly that, and more.
-
Debugging TypeScript in Firefox DevTools
Firefox Debugger has evolved into a fast and reliable tool chain over the past several months and it’s now supporting many cool features. Though it's primarily used to debug JavaScript, did you know that you can also use Firefox to debug your TypeScript applications? Jan 'Honza' Odvarko walks through some real world examples.
-
Firefox 69 — a tale of Resize Observer, microtasks, CSS, and DevTools
For our latest excellent adventure, we’ve gone and cooked up a new Firefox release. Version 69 features a number of great new additions including JavaScript public instance fields, the Resize Observer and Microtask APIs, CSS logical overflow properties (e.g. overflow-block) and @supports for selectors.
-
Faster smarter JavaScript debugging in Firefox DevTools
Script debugging is one of the most powerful and complex productivity features in the web developer toolbox. Done right, it empowers developers to fix bugs quickly and efficiently. The DevTools Debugger team – with help from our tireless developer community – has just landed updates that significantly improve performance and reliability.
-
Firefox 66: The Sound of Silence
Firefox 66 is out, and brings with it a host of great new features like screen sharing, scroll anchoring, autoplay blocking for audible media, and initial support for the Touch Bar on macOS.