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

you can block any request (even for a single css file) from inspector with the following:
    Right click > block request URL
without disabling other css files > https://umaar.com/dev-tips/68-block-requests/ It's a standard inspector feature, no plugins or tricks needed

Answer 2

I tried in Chrome Developer tools and the method is valid only if the CSS are included as external files and it won't work for inline styles.

Array.prototype.forEach.call(document.querySelectorAll('link'), (element)=>element.remove());

Or

var linkElements = document.querySelectorAll('link');
Array.prototype.forEach.call(linkElements, (element)=>element.remove());

Explanations

1. document.querySelectorAll('link') gets all the link nodes. This will return array of DOM elements. Note that this is not Array object of javascript.
2. Array.prototype.forEach.call(linkElements loops through the link elements
3. element.remove() removes the element from the DOM

Resulting in plain HTML page

Answer 3

For those who don't want any plugin or other stuffs, We can use the document.styleSheets to disable/enable the css.

// code to disable all the css

for (const item in document.styleSheets) {
  document.styleSheets[item].disabled=false;
}

If you use chrome, you can create a function and add to your snippets. So that you can use the console to enable/disable the css for any sites.

// Snippets -> DisableCSS

function disableCss(value = true){
  for (const item in document.styleSheets) {
    document.styleSheets[item].disabled=value;
  }  
}

// in console

disableCss() // by default is disable
disableCss(false) // to enable

Answer 4

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.

Answer 5

Another way to achieve @David Baucum's solution in fewer steps:

1. Right click -> inspect element
2. Click on the stylesheet's name that affect your element (just on the right side of the declaration)
3. Highlight all of the text and hit delete.

It could be handier in some cases.

Answer 6

Expanding on scrappedocola/renergy's idea, you can turn the JavaScript into a bookmarklet that executes against the javascript: uri so the code can be re-used easily across multiple pages without having to open up the dev tools or keep anything on your clipboard.

Just run the following snippet and drag the link to your bookmarks/favorites bar:

<a href="javascript: var el = document.querySelectorAll('style,link');
         for (var i=0; i<el.length; i++) {
           el[i].parentNode.removeChild(el[i]); 
         };">
  Remove Styles 
</a>

• I would avoid looping through the thousands of elements on a page with getElementsByTagName('*') and have to check and act on each individually.
• I would avoid relying on jQuery existing on the page with $('style,link[rel="stylesheet"]').remove() when the extra javascript is not overwhelmingly cumbersome.