![]() ![]() In Firefox, you can toggle the Flexbox overlay by clicking on the flex tag in the Inspector, clicking the little 2-box icon next to the display value of flex in the Rules panel or directly from the Layout panel. ![]() “Flexbox, where nobody knows the exact size of anything”įlexbox explained by □□ #ViewSourceConf /2zE7ay6VSa- Milica Mihajlija OctoFirefox Flexbox inspector I admit I too have made a joke about that on stage but it was to highlight the importance of having a Flexbox inspector in DevTools. Flexbox inspectorĭata on support for the mdn-css_properties_flex feature across the major browsersįlexbox is a feature that has been around for a long time now, but can still be confusing to wrap your head around. Now, it’s time for what we have on hand in 2021. More story in this Smashing Magazine article, if you’re interested. And now, Webkit has joined the party, as Safari Technology Preview 123 adds Grid inspecting features as well. Chrome added a basic grid inspector tool in Chrome 62 that let developers highlight elements using grid layout, but more robust features were only added in Chrome 87. And now, more than 2 years later, Chrome is adding that feature to its DevTools as well.įirefox’s grid inspector was pretty full-featured from the get-to and released together with CSS grid in Firefox 52. They came out with the Flexbox inspector in Firefox 65, in January 2019. I have spoken about DevTools for CSS at a couple of conferences and had always used Firefox for them because it had the most features for CSS layouts since 2019. And with the way things are going, I think this might be becoming a thing. I’m personally convinced that DevTools can be more than just a debugging tool, it can potentially be a source of guidance right in our browsers. And they have been really generous with their time and knowledge. Recently, I’ve been seeing updates from both the Webkit and Chrome team about updates to layout-related DevTools features and thought it’d be nice to do a write-up about them.Įven though I’ve never gotten a job at any of the browser companies before, I have been incredibly lucky to have had numerous opportunities to meet and chat with folks from Mozilla, Google and Apple. As someone who loves and works with CSS on an almost daily basis, DevTools are something near and dear to my heart. ![]()
0 Comments
Leave a Reply. |