CSS Flexbox debugging tools #DevToolsTips

Tips on debugging CSS Flexbox with Chrome DevTools.

Chapters:
0:00 - Intro
0:08 - Flexbox editor
0:49 - Flex badge and overlay
1:41 - Context-aware icons and overlay
2:15 - Flex icons in the Flexbox properties’ dropdown
2:30 - Layout pane
3:09 - Badge settings
3:26 - Learn more

Links:

Questions? Tweet to us:

#DevToolsTips #Chrome #Developer

[evan-brass]

I was just using this yesterday. It was sooo helpful, especially when combined with filesystem in the sources so I could save the changes to my CSS files. Dev tools is so great!

[windmaomao]

I have to say this is so useful. Because to be honest, every time I'm using a flex is the time I check documentation online. Who the heck can remember all the similar spacing attributes. Thank you!

The features is very nice...but what even nicer seeing a GDG t-shirt... loving to see that the community gets featured like that

[OneBrokeBloke]

2:58 any way to have this setting on permanently? Im coding my pages in realtime, and for any change i make, the page refreshes and i have to enable flexbox markers again

[truvc]

The release notes for Chrome 98 say erroneous PNA preflight requests will only generate an warning in the console but in reality all my dev sites were broken until I wrote some quick webpack-dev-server middleware to serve preflight requests

[stephen.cabreros]

oh so thats how the flex frames or guides works, there just a toggle flex button beside the html element, ive been looking for the solution to get rid of that flexbox frames that I accidentally turn on, so it is just only in the right side, thanks

[worldclasscode]

Flexbox debugging, amazing ! :) Thanks

[TheNewton]

Another useful visual tool is flexbox froggy which is a browser gamified way to learn flexbox.

[nicolas.britos]

Something I recently realized is missing from the CSS flexbox debugging tools is an "!important" toggle button next to each of the button groups. Otherwise, in certain scenarios, the style won't be applied, which leads to confusion.

[brandoncroberts]

Useful!
I was laughing during the video though with the example of 2 H1's, since isn't 2 H1's the cardinal sin of HTML and SEO etc.?

[dmitrypichugin]

mb now I can use devtools to edit flexbox without using cheat sheets.