Developer Tools Articles
-
Web Design Survey Findings and Next Steps
In November, I wrote about my team’s work on experimental new web design tools and introduced a survey to rank the challenges of web design and development. The insights you shared continue to inform priorities for the Firefox DevTools' 2019 roadmap. Our main takeaway: developers and designers of every experience level want a better understanding of CSS debugging. We're on it.
-
New in Firefox DevTools 65
We just released Firefox 65 with a number of new developer features that make it even easier for you to create, inspect and debug the web. Among all the features and bug fixes that made it to DevTools in this new release, we particularly want to highlight our brand new Flexbox Inspector and all the features and enhancements that deliver smarter JavaScript inspection and debugging.
-
Firefox 65: WebP support, Flexbox Inspector, new tooling & platform updates
Firefox 65 ships today with some notable Firefox Devtools updates, including the release of the CSS Flexbox Inspector, a new changes panel, and more. We're shipping CSS platform improvements and updates to a variety of JavaScript APIs. Firefox 65 supports the WebP image format, and support for AV1, an open and royalty-free video compression format, is shipping now in Firefox 65 for Windows.
-
Designing the Flexbox Inspector
CSS Flexbox is an increasingly popular layout model that helps in building robust dynamic page layouts. However, it has a big learning curve! The new Flexbox Inspector, created by Firefox DevTools, helps developers understand the sizing, positioning, and nesting of Flexbox elements. You can try it out now in Firefox Nightly or Dev Edition.
-
The Power of Web Components
Web Components comprises a set of standards that enable user-defined HTML elements. These elements can go in all the same places as traditional HTML. Despite the long standardization process, the emerging promise of Web Components puts more power in the hands of developers and creators.
-
New & Experimental Web Design Tools: Feedback Requested
We’re currently hard at work on some new tools for web designers: a comprehensive Flexbox Inspector as well as CSS change-tracking. Tell us about your biggest CSS and web design issues and pain points in the first-ever Design Tools survey from Mozilla! We want to hear from developers and designers, no matter what browser you use.
-
Cross-language Performance Profile Exploration with speedscope
speedscope is a fast, interactive, web-based viewer for large performance profiles, inspired by the performance panel of Chrome developer tools and by Brendan Gregg’s FlameGraphs. Jamie Wong built speedscope to explore and interact with large performance profiles from a variety of profilers for a variety of programming languages. speescope runs totally in-browser, and does not send any profiling data to any servers.
-
Firefox 62 – Tools Cool for School!
From the new Firefox Shape Path Editor, which lets floated content sculpt the flow of content, to the Variable Fonts, which enable fine-grained adjustment of font rendering, to more efficient Firefox Dev Tools view options, Firefox 62 delivers a cornucopia of features.
-
New in Firefox 61: Developer Edition
The latest release -- Firefox 61 Developer Edition -- comes with a darker dark theme, more powerful and customizable developer tools, the new Accessibility Inspector, and numerous performance improvements like better CSS stylesheet parsing and improved time to first paint.
-
CSS Grid for UI Layouts
In this article I’ll show you how to use CSS Grid to improve application layouts that need to respond and adapt to user interactions and changing conditions, and always have your panels scroll properly.