Learn how to remove all the CSS styling (internal & external) from a website with one JavaScript command.
If you quickly want to see how any website looks without a CSS stylesheet, JavaScript is your friend.
First open your DevTools console tab:
- Mac: Option + CMD + J
- Windows: Shift + CTRL + J
Now paste this JavaScript code in your console’s command line and hit enter:
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.
Example:
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 display: none;?).
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 🙈
