How to disable CSS in Browser for testing purposes

html css browser
ATOzTOA picture ATOzTOA · Dec 26, 2012 · Viewed 227.2k times · Source

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 <link rel='stylesheet'> entries, but what if I have a lot of linked pages?

Answer

David Baucum picture David Baucum · Jul 27, 2013

In Chrome/Chromium you can do this in the developer console.

  1. Bring up the developer console by either ctrl-shift-j or Menu->Tools->Developer Console.
  2. Within the developer console browse to the Sources tab.
  3. In the top-left corner of this tab is an icon with a disclosure triangle. Click on it.
  4. Browse to <domain>→css→<css file you want to eliminate>
  5. Highlight all of the text and hit delete.
  6. Rinse and repeat for each stylesheet you want to disable.

Related questions

Disabling browser print options (headers, footers, margins) from page?

I have seen this question asked in a couple of different ways on SO and several other websites, but most of them are either too specific or out-of-date. I'm hoping someone can provide a definitive answer here without pandering to …

Read More
css 'pointer-events' property alternative for IE

I have a drop down navigation menu in which some of the title should not navigate to other page when clicked(these title open a drop down menu when clicked on) while others should navigate (these dont have dropdown and …

Read More
Why do browsers match CSS selectors from right to left?

CSS Selectors are matched by browser engines from right to left. So they first find the children and then check their parents to see if they match the rest of the parts of the rule. Why is this? Is it …

Read More