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

Chrome DevTools tips & tricks

Lighthouse is a tool that analyses web apps and web pages, collecting modern performance metrics and insights on developer best practices.

It's built directly into the Chrome DevTools and in this quick lesson we're going to learn how to run the audit, how to read its results and why you should always run the Lighthouse audit in Incognito mode.



Tomasz Łakomy: [0:00] I'm working on our site. In that case, that is my blog, tlakomy.com. I would like to check whether the site does not have any accessibility, performance, or SEO issues. I could, of course, do that manually, but luckily, there are better solutions for that.

[0:16] If we open up DevTools, we can select a tab over here, which is called Lighthouse. Lighthouse is a tool developed by Google, which is built in into Google DevTools, which allows us to identify and fix common problems that affect your site's performance, accessibility, and user experience.

[0:32] We can see that there are different categories that we can audit, Performance, Progressive Web App, Best practices, Accessibility, and SEO. We can decide whether we would like to run the audit on mobile or desktop.

[0:45] I'm going to run it on mobile and click that Generate Report button. This is going to take a minute, because it has to run all kinds of checks, and after a while, we can see the result. I am using Gatsby on this site, and that's why I have high scores in Performance, Accessibility, Best practices, and SEO.

[1:02] Apart from the score, we can also scroll down on that in order to see opportunities. For instance, on this site, I can remove some unused JavaScript in order to achieve an even better performance, same with accessibility.

[1:15] Apparently, background and foreground colors do not have sufficient contrast ratio, and that can make it difficult to read by some folks, and I'm going to update that as soon as I finish recording this lesson. If you're hoping to gain traffic to your site from Google and other search engines, make sure to hit that 100 in Search Engine Optimization category.

[1:35] One last thing, make sure to run your audit in Incognito mode and without any additional Chrome extensions, because if you were to run an audit of the same site with extensions installed, we can see that Chrome extensions did negatively affected this page load performance, and I'm getting a much lower score in the Performance category.

Course

Chrome DevTools tips & tricks

Run a Lighthouse audit in Chrome Devtools

Share this video with your friends