First open your DevTools console tab:
- Mac: Option + CMD + J
- Windows: Shift + CTRL + J
document .querySelectorAll('style,link[rel="stylesheet"]') .forEach(item => item.remove())
This will remove both inline and linked (external) CSS styling from the website you’re on.
How is removing all CSS styling from a page useful?
It gives you an instant insight into how any given website is structured with HTML, which can be useful for anyone who is new to HTML, or development in general.
It can also expose weaknesses, such as redundant content (have you ever hidden something temporary with CSS
In my case, as of writing this tutorial, I got reminded that some of my image files are way too big for their purpose, which slows my website down unnecessarily. Whoops... Yes, it’s on my to-do list, and I better get it fixed asap to avoid further empressement 🙈