Developer Tools Articles
-
Powerful New Additions to the CSS Grid Inspector in Firefox Nightly
CSS Grid is revolutionizing web design. It’s a flexible, simple design standard that can be used across all browsers and devices. That's why we built CSS Grid Inspector. We’ve been working hard on the Firefox Developer Tools Layout panel, adding powerful new features to the Grid Inspector and Box Model. The latest enhancements are now available in Firefox Nightly.
-
Network Monitor Reloaded (Part 1)
The Network Monitor tool has been available in Firefox since the earliest days of Firefox Dev Tools. It’s an invaluable tool for anyone who cares about page load performance and fast modern web pages. Now the monitor has been re-architected for a more modern web development workflow using standard web technologies
-
Hacking on the Network Monitor Developer Tool (Part 2)
Go hands-on with the Network Monitor! We'll walk you through the process of running this dev tool on top of the Launchpad and utilizing the hot-reload feature to see code changes instantly.
-
Debugger.html Call Stack Improvements
Debugger.html is an open source project, built on top of React and Redux, that functions as a standalone debugger for Firefox, Chrome and Node. The debugger is also being integrated into the Firefox Developer Tools offering. Currently it is available in the Firefox 53 release behind the devtools.debugger.new-debugger-frontend preference.
-
Fathom: a framework for understanding web pages
Meet Fathom, a mini-language for writing semantic extractors, that you can use client- or server-side to extract meaning from the content of a web page. Scoop up all those ideas you threw away because they required too much understanding by the browser. We can do that now.
-
Developer Edition 54: New inspector and debugger features, MDN help in the netmonitor, and more
A roundup of great new developer tool features and fixes released in Firefox Developer Edition 54 - for debugging, inspecting, monitoring, and generally making your workflow smarter and better.
-
A new CSS Grid demo on mozilla.org
With CSS Grid shipping across browsers this spring (already in Firefox 52 and Chrome 57; Safari, and hopefully Edge, soon to follow) some of Mozilla's in-house designers and developers decided to experiment with the technology on mozilla.org. The result is a live demo site that shows CSS Grid features and provides links to our favorite resources.
-
Firefox 52: Introducing WebAssembly, CSS Grid and the Grid Inspector
We cover some of the most innovative features to land in Firefox 52, including WebAssembly, CSS Grid, the CSS Grid Inspector Tool, an improved Responsive Design Mode, and Async and Await support for JavaScript.
-
Previewing the WebAssembly Explorer
Unlike JavaScript, WebAssembly is a binary format, which means developers need new tools to help understand and experiment with WebAssembly. Discover the basic functions of the WebAssembly Explorer, which lets developers type in simple C or C++ programs and compile them to WebAssembly.
-
Doubling Down on Cross-Browser Testing
Mozilla has partnered with BrowserStack to offer free testing on mobile Firefox for Android (iOS upcoming). Not every developer owns a device bank or has the time to test on every OS. Mozilla is committed to ensuring a healthy and robust web. Cross-browser compatibility is a key component of that commitment.