Is there any way to view a webpage without styles in Chrome?
Disable all CSS style sheets
Given that most modern pages define all styles in external CSS files which are included in the <head>, removing the head tag will effectively remove all the styles (except the explicit inline styles and those set by scripts). Right-click on a page, pick Inspect from the context menu and paste this into the Console tab:
document.head.parentNode.removeChild(document.head);
And here is the bookmarklet version of the code above which can be pasted as the URL of a bookmark (toggle the bookmark bar in Chrome with ⌘+shift+b on Mac or ctrl+shift+b on Linux/Windows):
javascript:(function(){document.head.parentNode.removeChild(document.head);})()
You can also type the code above directly into the address bar but read the note at the end of the answer before you do it..
Removing the <head> can also be done from the devtools Elements tab, by right-clicking the head tag and deleting it via the context menu:
NOTE: Removing the head tag is a bit of a brute force approach since it will kill all styles, javascript, web fonts, etc, and if the page content is rendered by javascript then most likely you'll get an empty page. On the majority of sites it will probably give you the expected results.
A more frequent use case is to remove specific annoying things on a page, such as colors, margins, iframes, etc. In such a case, one of the following bookmarklets will provide more granular control.
Remove colors, backgrounds, margins, paddings, widths
Create a bookmark and add the following snippet as the URL:
javascript:(function(){for(i=0;i<document.styleSheets.length;i++){document.styleSheets.item(i).disabled=true;}all=document.getElementsByTagName('*');for(i=0;i<all.length;i++){el=all[i];el.style.cssText='';el.style.width='';el.style.padding='0px';el.style.margin='2px';el.style.backgroundImage='none';el.style.backgroundColor='#fff';el.style.color='#000';}})()
Now you can click your bookmarklet to clean up the CSS style on the current page to something more readable.
Note: It is, in fact, possible for a page to have a
<style>block inside the<body>tag - the HTML5 standard allows this and most browsers support it. So far this is not common practice, but as web frameworks evolve we might see more 'local style sheets' in the future web.
If you simply want to improve readability then disabling all CSS might not provide the best experience. For such cases the bookmarklets below might give better results:
Remove non-scrolling headers/footers (increases reading area)
javascript:(function(){var elems=document.body.getElementsByTagName("*");var len=elems.length;for(var i=0;i<len;i++){var pos=window.getComputedStyle(elems[i],null).getPropertyValue('position');if(pos=='fixed'||pos=='sticky'){var el=elems[i];el.parentNode.removeChild(el);}}})()
Remove iframes (kills most banners, etc)
javascript:var frames %3D document.getElementsByTagName%28"iframe"%29%3Bfor %28%3Bframes.length%3B%29 %7Bframes%5Bframes.length-1%5D.parentNode.removeChild%28frames%5Bframes.length-1%5D%29%3B%7Dvoid%280%29
This will also kill most embedded videos, comment widgets, etc.
Remove all images (office mode browsing)
javascript:(function(){function toArray(c){var a,k;a=new Array;for(k=0;k<c.length;++k)a[k]=c[k];return a;}var images,img,altText;images=toArray(document.images);for(var i=0;i<images.length;++i){img=images[i];altText=document.createTextNode(img.alt);img.parentNode.replaceChild(altText,img)}var alle=document.getElementsByTagName("*");for(var i=0,max=alle.length;i<max;i++){alle[i].style.backgroundImage='none';}})();
Note: this one needs to be used in combination with Remove iframes above, since most banner images are typically inside iframes and this bookmarklet only works with the top-level document.
The bookmarklets can also be used for sites which won't display content when ad blockers are used.
You can use the Bookmarklet Builder to unminify the code (the Format button), edit it to suit your needs, and minify it back (the Compress button) to something you can paste as the bookmark URL.
The bookmarklets listed above will also work on most mobile web browsers on both iOS and Android. Mobile browsers won't run javascript from the address bar, but you can add a bookmark, paste the js code as the URL, set a label, e.g.
clean, and then run it by tapping the item in the bookmarks menu (for IOS safari) or typingcleanin the address bar and then tapping the corresponding bookmark in the autosuggest dropdown. This can improve readability for pages that have no reading mode.NOTE: If you copy and paste the bookmarklets above directly into the address bar you'll notice that browsers remove the
javascript:prefix — this is a browser security feature, so if you want to test the bookmarklets directly from the address bar, then you'll need to prependjavascript:manually before the js code.
Chrome Extensions
If you are looking for a chrome extension then there is uMatrix where you can click the CSS column to disable all CSS and styles, and Web Developer where under the CSS tab you have an option Disable All Styles.
You can use the Web Developer extension for that:
There is no Chrome version of No Style (yet?), so you have to use another method, such as some of the other extensions that can disable styles.
You can use the Disable Stylesheets extension to disable stylesheets in general or the Web Developer extension to toggle all styles on or off. Pendule is also a popular extension for this purpose.
You can also disable styles with the Developers Tools [1][2]:
Gear Icon -> CSS Tab -> Disable All Styles