Developer Tools Articles
-
DevTools: What you need to know
Many things changed in Firefox DevTools last year, particularly towards the end of the year. The effort to refactor some of our tools started to pay off and we landed some great re-designs that should make web developers’ lives easier.
-
Firebug lives on in Firefox DevTools
Firebug, the original browser developer tool, has been discontinued as a separate Firefox add-on, and will go forward as Firebug.next atop Firefox DevTools. The spirit of Firebug lives on in all of the browser developer tools we build and use today.
-
CSS Grid and Grid Highlighter Now in Firefox Developer Edition
CSS Grid has just been uplifted to Firefox 52 Developer Edition. With Chrome (and hopefully Safari and Edge) implementations coming shortly, using grid to build websites will soon be possible in release browsers across the board. Grid allows users to decouple HTML from layout concerns, expressing those concerns exclusively in CSS. Reducing the risks of fragility, code bloat, and high maintenance costs inherent in how we currently build on the web, grid really does have the potential to change the way we do layouts.
-
Visualize animations easing in DevTools
The easing (or timing function) of an animation is what dictates the way it progresses through time. For example, a linear easing means that an animation runs at the same speed throughout its duration. This means that if an element isn’t moving at first and then starts to move, it will do so instantly, as […]
-
New Responsive Design Mode: RDM Lands in Firefox Dev Tools
Firefox Developer Tools now includes a completely redesigned Responsive Design Mode (RDM for short) that’s just landed in Firefox Developer Edition, thanks to hard work from the DevTools team. In a mobile-first world, it’s essential to prioritize performance for low-bandwidth and offline mobile experiences and design progressive web apps that can deliver across a range […]
-
Introducing debugger.html
debugger.html is a modern JavaScript debugger from Mozilla, built as a web application with React and Redux. This project was started early this year in an effort to replace the current debugger within the Firefox Developer Tools. Also, we wanted to make a debugger capable of debugging multiple targets and functioning in a standalone mode. […]
-
Developer Edition 50: Console, Memory Tool, Net Monitor and more
Firefox Developer Edition 50 is here. It has numerous improvements that will help you work with script-initiated network requests, tweak indexedDB data, and much more. It also introduces something special we’ve all been really wanting for a while, so let’s get right to it: Console A long awaited feature is finally coming to the dev […]
-
Make the Web Work For Everyone
Updated 2016/07/22: Commenters found a few data errors (thanks!) which have now been corrected. Millions of websites have compatibility problems on one or more of the major browsers, leading to a poor user experience. The web developer community can fix this. The web has changed immensely in the past 20 years. In 1996 there were […]
-
Developer Edition 49: Network Request Stack Traces and more
This week marks the release of Firefox Developer Edition 49! This post covers some of the big changes that landed in this release. Request stack traces in Network Monitor The Network Monitor now has a new “Cause” column that shows how a given network request is initiated. The column shows the type of the request, […]
-
Developer Edition 48 – Firebug features, editable storage, inspector improvements and more…
This week marks the release of Firefox Developer Edition 48. In preparation for the arrival of multiprocess Firefox and the deprecation of the Firebug add-on, we are porting Firebug features to the built-in tools. We have also made tweaks to the current tools that we’ll cover in this post. Firebug theme As part of porting […]