Mozilla recently released Firefox 65, and with it came several new features in DevTools.
The release last week introduced better ways to master CSS layouts with its new Flexbox Inspector. “We want you to go from ‘trying things until they work’ to really understanding how your browser lays out a page,” Mozilla wrote in a post.
A flexbox provides a flexible way for developers to organize and distribute elements on a web page. Flexbox Inspector highlights elements that make up a flexbot layout, such as the container, lines, and items. It will display a dotted outline to highlight the flex container, solid lines to show where flex items are, and background pattern to represent free space between items.
It released an enhanced stack trace that identifies third-party code and collapses it by default, significantly reducing the code displayed and letting developers focus on their own code.