The css chrome dev tool you didnt know of

Did you know that chrome dev tools has a css overview panel to identify flaws inside your css?

You can find it when you open your dev-tools in chrome (F12) and than More options() More > More tools > CSS Overview.

Here you can get an high…

Did you know that chrome dev tools has a css overview panel to identify flaws inside your css?

You can find it when you open your dev-tools in chrome (F12) and than More options() More > More tools > CSS Overview.

Image description

Here you can get an high level overview of you page’s css

Image description

In the colors section you can see all the colors you used and it even indicates bad contrasts in your css.

Image description

I hope you learned something just as i did =)

✅ If you liked this post, you may like my 🏠 blog or even want to connect 💬 on twitter 📢 for more information about building web applications or saas development or 💻 software development in general.


Print Share Comment Cite Upload Translate
APA
| Sciencx (2024-03-29T07:06:41+00:00) » The css chrome dev tool you didnt know of. Retrieved from https://www.scien.cx/2021/10/23/the-css-chrome-dev-tool-you-didnt-know-of/.
MLA
" » The css chrome dev tool you didnt know of." | Sciencx - Saturday October 23, 2021, https://www.scien.cx/2021/10/23/the-css-chrome-dev-tool-you-didnt-know-of/
HARVARD
| Sciencx Saturday October 23, 2021 » The css chrome dev tool you didnt know of., viewed 2024-03-29T07:06:41+00:00,<https://www.scien.cx/2021/10/23/the-css-chrome-dev-tool-you-didnt-know-of/>
VANCOUVER
| Sciencx - » The css chrome dev tool you didnt know of. [Internet]. [Accessed 2024-03-29T07:06:41+00:00]. Available from: https://www.scien.cx/2021/10/23/the-css-chrome-dev-tool-you-didnt-know-of/
CHICAGO
" » The css chrome dev tool you didnt know of." | Sciencx - Accessed 2024-03-29T07:06:41+00:00. https://www.scien.cx/2021/10/23/the-css-chrome-dev-tool-you-didnt-know-of/
IEEE
" » The css chrome dev tool you didnt know of." | Sciencx [Online]. Available: https://www.scien.cx/2021/10/23/the-css-chrome-dev-tool-you-didnt-know-of/. [Accessed: 2024-03-29T07:06:41+00:00]
rf:citation
» The css chrome dev tool you didnt know of | | Sciencx | https://www.scien.cx/2021/10/23/the-css-chrome-dev-tool-you-didnt-know-of/ | 2024-03-29T07:06:41+00:00
https://github.com/addpipe/simple-recorderjs-demo