#100DAYSOFCODE Day82

#100DAYSOFCODE Day82

How to Find Unused CSS Styles with Chrome Dev Tools

Using Chrome to find your unused CSS codes

In the Inspect(devTools), you can click the other (three dots) icon to open the Run command. Also, using shortcut(shit +command+ P)works for mac users, then find or search the show coverage. Screen Shot 2021-05-24 at 12.42.26 AM.png

Screen Shot 2021-05-24 at 12.46.34 AM.png

Screen Shot 2021-05-24 at 12.47.24 AM.png

The code has a blue bar to indicate that it is not used.

Also, I found that the chrome dev has a new feature that can easily debug the flex style. Link

hbg2toNQJqIWB30Mo2xt.png

If the website uses flex, you will see the flex icon in the element area. While you choose the flex icon in the style area, it will show options like the image above.