Firefox 65 will add the Flexbox Inspector developer tools

The Flexbox Inspector feature is scheduled to be included in the Firefox 65 Developer Tools released on the 29th of this month. “The Flexbox Inspector allows you to examine CSS Flexbox Layouts using the Firefox DevTools, discovering flex containers on a page, examining and modifying them, debugging layout issues, and more.”

Image: Mozilla

CSS Flexbox is an increasingly popular layout model. It is a one-dimensional layout method for laying out elements in rows or columns. Elastic elements can fill extra space on the page or fit properly to fit. The smaller space helps build powerful dynamic pages, but its learning curve is very steep. The developer specifically introduced the development background and features of the feature on a blog. The authors say that Flexbox is so difficult that even when the team started the Flexbox Inspector project, they were not sure if they knew enough about Flexbox, and it was not clear what difficulties it would face.

After a series of research and design, the Flexbox Inspector project was finalized. The author said that after spending a lot of energy on this feature, they worried that it would be drowned in the huge Firefox developer toolset, making it impossible for people to find it or Don’t want to use it. So they took a proactive approach: as long as the developer selected the Flex container or other elements in the tag view, the Flexbox information will automatically appear, and the developer can see the content under the Inspector tab in the layout panel.

Currently, this feature can be tried in the Firefox DevEdition.