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

[Logpoints](https://developers.google.com/web/updates/2019/01/devtools) are one of the features recently released in Chrome 73. They allow you to easily log and debug your code (both on local environment and on production) without cluttering your code with `console.log()` statements everywhere and without using a debugger which might be an overkill when you simply want to log something.

In this lesson we are going to learn how to create Logpoints in Chrome DevTools to catch a bug in a JavaScript function.

Instructor: [00:00] We have an array of people objects, each one of these objects containing a name and a surname. Our goal is to create a method called Get by Surname where we take a surname as an argument.

[00:10] We would like to return an array containing only those people who happen to share the same surname as an argument. Here we're calling this method with the surname.dessert visible in the console over here, we have an empty array. This is not something that we want, so we clearly have a bug.

[00:25] We might start by adding a whole bunch of console log statements into our code. In case if we don't want to do that there's a solution written in Chrome DevTools.

[00:33] The solution is called logpoints. To use that open up Sources, open up your file, and find the line that you would like to debug. In this case, I'm going to try to build a log of these people that filter operation.

[00:46] To do that I right-click on the line in question and click on Add Logpoint. Here we can type in our message that we would like to log into the console. I'm going to log in People by Surname in curly brackets because I want to convert it to an object.

[01:02] After clicking away from this window, you're going to see that this logpoint has been added. If I switch to console and refresh this page, you're going to see that I have managed to log in this People by Surname array which is empty. You can see that the source of this console log is actually the Chrome browser itself.

[01:21] The bug is probably in this filter function. Let's debug this one as well. Go back to Sources, create another logpoint over here, and I'm going to log in the person object. Then we click away, refresh this page. Now I finally notice the bug.

[01:37] I've been using person.name where instead I should be using person.surname, so let me do that. Now our function works perfect, and we've managed to debug it without adding any additional console statements into our code.

Course

Chrome DevTools tips & tricks

Use Logpoints to log messages without cluttering up your code with console.log() statments

Share this video with your friends