Chrome DevTools tips & tricks

12m
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.4
256
people completed
Bookmark
Download
RSS

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!

Instructor

Tomasz Łakomy

Frontend Engineer at Stedi, building Cloudash. His interests include React, AWS, testing, Svelte, VR, app performance and... jQuery, which he still thinks is the best library ever.

Learn about Tomasz's story with egghead.

Course content (8 lessons)

    illustration for Chrome DevTools tips & tricks