Chrome DevTools tips & tricks

Chrome DevTools are incredibly useful for a frontend developer, sometimes we spend more time using them than our text editor of choice.
That's why it's so important to understand this tool better - those quick lessons will teach you things that will help you to become a more effective developer.
You will learn how to:
Use (experimental) CSS Overview to learn all about CSS used on a page in a minute
Style console.log messages with CSS - a crucial skill for any senior developer (j/k)
Debug your code (on production and local environment) with logpoints
Run a Lighthouse audit of your site
Choose accessible colors for your website that have an AAA contrast ratio rating
Force a DOM element state in Chrome DevTools
Use Console utilities to make debugging easier
Copy a network request as fetch or cURL with Chrome DevTools
Have fun!

• Use (experimental) CSS Overview in Chrome to get an overview of CSS used on a site
• Style console.log messages with CSS
• Use Logpoints to log messages without cluttering up your code with console.log() statments
• Run a Lighthouse audit in Chrome Devtools
• Choose accessible colors for text using Chrome DevTools Color Picker contrast ratio score
• Use Chrome DevTools console utilities to make debugging easier
• Force a DOM element state in Chrome DevTools
• Copy a network request as fetch or cURL with Chrome DevTools