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 the browser without the CSS info  It looks like the page has been laid raw on the screen  You would have noticed this with StackOverflow too   I want to make sure that my web page shows up OK even if the CSS files are not loaded   I didn t mean I want to convert external CSS to inline  But I want a way to explicitly disable all CSS from the browser so that I can reposition my elements in a better  readable way   I know I can remove the  lt link rel  stylesheet  gt  entries  but what if I have a lot of linked pages

User · Answer

you can block any request  even for a single css file  from inspector with the following    nbsp  nbsp  nbsp  nbsp 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

User · Answer

This script works for me  hat tip to scrappedcola   var el document getElementsByTagName      for var i 0 i lt el length  i    if  el i  getAttribute  type     text css   el i  parentNode removeChild el i         inline style stays intact  though

User · Answer

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 true     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 - gt  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

User · Answer

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    Open Safari Preferences  cmd    and in the Advanced tab enable the checkbox  Show Develop menu in menu bar   Now under the Develop menu you will find a Disable Styles option

User · Answer

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    x000D   x000D   lt a href  javascript  var el   document querySelectorAll  style link    x000D           for  var i 0  i lt el length  i      x000D             el i  parentNode removeChild el i     x000D               gt  x000D    Remove Styles  x000D   lt  a gt  x000D   x000D   x000D     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

User · Answer

All the suggested answers merely eliminate the css for that page load  Depending on your use-case  you may wish to not load the css at all   Chrome Dev Tools   Network Tab   Right click on stylesheet in question   block request url

User · Answer

As most answers seem to be pretty old here  referencing menu items I can t seem to find in the current versions of popular browsers  here s how to do it in the current version in Firefox Developer Edition    Open Developer Tools  CTRL   SHIFT   I  Select the Style Editor tab There you should see all sources of CSS in your document  You can disable each of them by clicking the eye icon next to them

User · Answer

Actually  it s easier than you think  In any browsers press F12 to bring up the debug console  This works for IE  Firefox  and Chrome  Not sure about Opera  Then comment out the CSS in the element windows  That s it

User · Answer

On Firefox  the simplest way is via the menu command View   Page Style   No Style  But this also switches off the effects of some presentational HTML markup  So using plugins as suggested by  JoelKuiper is usually better  they give more flexibility  e g   switching off just some style sheets

User · Answer

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

User · Answer

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   gt element remove       Or  var linkElements   document querySelectorAll  link    Array prototype forEach call linkElements   element   gt element remove       Explanations   document querySelectorAll  link   gets all the link nodes  This will return array of DOM elements  Note that this is not Array object of javascript   Array prototype forEach call linkElements loops through the link elements  element remove   removes the element from the DOM   Resulting in plain HTML page

User · Answer

While inspecting HTML with the Browser Development tool you prefer  eg Chrome Devtools  find the  lt head gt  element and delete it at all   Notice that this will also remove js but for me it is the fastest way to get the page naked

User · Answer

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  gt  Disable Styles  gt  Disable All Styles     Alternatively with the developer toolbar enabled you can press Alt Shift A

User · Answer

Firefox  Win and Mac    Via the menu toolbar  choose   View     Page Style     No Style  Via the Web Developer Toolbar  choose   CSS     Disable Styles     All Styles    If the Web Dev Toolbar is installed  people can use this keyboard shortcuts  Command   Shift   S  Mac  and Control   Shift   S  Win    Safari  Mac   Via the menu toolbar  choose  Develop     Disable Styles    Opera  Win   Via the menu  choose  Page     Style     User Mode    Chrome  Win   Via the gear icon  choose the  CSS  tab    Disable All Styles  Internet Explorer 8  Via the menu toolbar  choose  View     Style     No Style  Internet Explorer 7  via the IE Developer Toolbar menu  Disable   All CSS Internet Explorer 6  Via the Web Accessibility Toolbar  choose  CSS     Disable CSS

User · Answer

Another way to achieve  David Baucum s solution in fewer steps    Right click -  inspect element Click on the stylesheet s name that affect your element  just on the right side of the declaration  Highlight all of the text and hit delete    It could be handier in some cases

User · Answer

In Chrome Chromium you can do this in the developer console    Bring up the developer console by either ctrl-shift-j or Menu- Tools- Developer Console  Within the developer console browse to the Sources tab  In the top-left corner of this tab is an icon with a disclosure triangle  Click on it  Browse to  lt domain gt  rarr css rarr  lt css file you want to eliminate gt  Highlight all of the text and hit delete  Rinse and repeat for each stylesheet you want to disable

[html] How to disable CSS in Browser for testing purposes

Examples related to html

Examples related to css

Examples related to browser