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.
Mozilla has also improved JavaScript inspection and debugging. “When developing JavaScript, the Console and Debugger are your windows into your code’s execution flow and state changes. Over the past releases we’ve focused on making debugging work better for modern toolchains. Firefox 65 continues this theme,” Mozilla explained.
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.
It also introduced reverse search to let developers browse recent commands that match an input string, the ability to use JavaScript getters to inspect return values, and the ability to pause during XHR/Fetch breakpoints.
In the future, Mozilla will continue to improve JavaScript debugging features. It is already working on heavily requested features such as column breakpoints, logpoints, event, and DOM breakpoints. It also plans on adding a multi-line editing mode and better autocomplete.
