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

Sometimes when debugging our CSS styles it's useful to be able to see what a DOM element is going to look like in a given state (e.g. `:focus`, `:active, `:hover`) etc.

Unfortunately it's not possible to both hover over an element and debug it in Chrome DevTools at the same time (since we only have a single cursor!).

In this quick lesson we're going to learn how to address this problem by explicitly forcing an element state to `:hover` with DevTools

https://app.egghead.io/api/v1/lessons/egghead-force-a-dom-element-state-in-chrome-devtools/subtitles

Tomasz Łakomy: [0:00] We have a list of elements on this page. In this example, this is a list of folks who have been recording egghead.io lessons, and we can see that we get a different style on :hover.

[0:10] Suppose we would like to modify this :hover state somehow. The problem is that if I select this item in DevTools, I am not able to see the :hover styles right now, because if I hover over the element and go back to DevTools, I am obviously not hovering over this element anymore.

[0:25] There's a way to address that. If we right-click on the element, we can force the state to be as :hover. Right now, we can see the :hover state of this element over here without hovering over it. For instance, I am able to modify the :hover styles by introducing a background-color, so I'm going to set the background to pink, much better.

[0:48] Right now, if I want not to force the :hover state anymore, I can go over here and click on Hover once more. If I hover on any of those elements, I will get this beautiful shade of pink.

[1:01] Bear in mind that we can also force other states, such as :active, :focus, :visited, :focus-within, and :focus-visible.

Force a DOM element state in Chrome DevTools

Share this video with your friends

Course

Chrome DevTools tips & tricks