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

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.

Answer 2

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.

Answer 3

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"

Answer 4

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

Answer 5

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).

Answer 6

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.