How to disable CSS in Browser for testing purposes

Question

Is there any way I can disable all external CSS in a browser (Firefox, Chrome...)?

When using slower internet connection, sometimes only the bare HTML is loaded by t

Answer 1

For pages that rely on external CSS (most pages nowadays) a simple and reliable solution is to kill the head element:

document.querySelector("head").remove();

Right-click this page (in Chrome/Firefox), select Inspect, paste the code in the devtools console and press Enter.

A bookmarklet version of the same code that you can paste as the URL of a bookmark:

javascript:(function(){document.querySelector("head").remove();})()

Now clicking the bookmark on in your Favorites bar will show the page without any css stylesheets.

Removing the head will not work for pages that use inline styles.

If you happen to use Safari on MacOS then:

1. Open Safari Preferences (cmd+,) and in the Advanced tab enable the checkbox "Show Develop menu in menu bar".
2. Now under the Develop menu you will find a Disable Styles option.