Menu
Select the "CSS" option in the Web Developer extension and click "Disable All Styles," or click the "Style Sheets" option in Pendule and click "Disable All Styles." After you click the option, the page will re-display without the styles.
You can open the Network tab in Dev Tools and find the particular CSS file that you want to disable. Right click on it and select "Block request URL", then refresh the page (make sure "disable cache" is checked at the top of your dev tools as well).
Hit Alt, then go to View>Page Style. From there you can select Basic or No Style, easily disabling CSS.
But first, here's how to disable CSS Firefox: View > Page Style > No Style. Safari: Safari > Preferences... > Show Develop menu in menu bar . Then go to the Develop dropdown and select the “Disable Styles” option.
In Chrome/Chromium you can do this in the developer console.
The Web Developer plugin for Firefox and Chrome is able to do this
Once you have installed the plugin the option is available in the CSS menu. For example, CSS > Disable Styles > Disable All Styles
Alternatively with the developer toolbar enabled you can press Alt+Shift+A.
Firefox (Win and Mac)
If the Web Dev Toolbar is installed, people can use this keyboard shortcuts: Command + Shift + S (Mac) and Control + Shift + S (Win)
This script works for me (hat tip to scrappedcola)
var el=document.getElementsByTagName('*');for(var i=0;i<el.length; i++){if (el[i].getAttribute("type")=="text/css") el[i].parentNode.removeChild(el[i]); };
inline style stays intact, though
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>getElementsByTagName('*') and have to check and act on each individually.$('style,link[rel="stylesheet"]').remove() when the extra javascript is not overwhelmingly cumbersome.Install Adblock Plus, then add *.css rule in Filters options (custom filters tab). The method affect only on external stylesheets. It doesn't turn off inline styles.
Disable all external CSS
This method does exactly what you asked.
<head> with a bookmarkletFor pages that rely on external CSS (most pages nowadays) you can delete the head element:
document.querySelector("head").remove();
Usage: right-click the page (in Chrome/Firefox), select Inspect, paste the code above 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 in your Bookmarks bar will (hopefully) strip all the css stylesheets.
<head> via devtoolsAnother way to achieve it is to right-click the page (in Chrome/Firefox), select Inspect, in devtools panel, Elements tab select the <head> tag (see screenshot), right-click it, and pick Delete element:
Note: Removing the head will not work for pages that use inline styles.
If you happen to use Safari on MacOS then:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With