How to disable CSS in Browser for testing purposes

web-development

browser-testing

css-disabling

developer-tools

byAnton Shumikhin·Jan 25, 2025

To immediately disable all CSS on a webpage:

Press F12 to open the DevTools.
Navigate to the "Elements" panel and look for <style> tags or <link> tags associated with CSS files.
Right-click these style tags and choose to "Delete" them.
For inline styles, go to the "Styles" section of the sidebar and uncheck individual properties to make them ineffective.

How to disable inline CSS? See the example below:

/* Before: Colorful like a unicorn */
element {
  color: blue;
}

/* After: Grayscale, like an old TV. Uncheck in DevTools */

Browser-specific methods to disable CSS

Different browsers have unique methods to disallow CSS. Here's a comprehensive way of doing this for different browsers:

Google Chrome

Developer Tools: Hit Ctrl+Shift+J, traverse to the Sources tab, and zap the CSS content from there.
Bookmarklet: A bookmarklet is essentially saved JavaScript code as bookmarks. You could code one to remove <style> and <link> tags dynamically.

Mozilla Firefox

No Style option: It is available under View > Page Style. The “beauty” of your page is just one click away from becoming a plain text document.
Web Developer Toolbar: Firefox users can use this to hit a button and bam! - All styles are disabled.

Safari and Opera

Safari: Launch Safari DevTools, go to Develop > Disable Styles.
Opera: A "User Mode" under Page > Style will get rid of the CSS.

Internet Explorer

For IE 11 and lower, utilize available toolbars that can help disable all styles. Yes, even good old Internet Explorer has some tricks up its sleeve!

Web Developer Extensions

The Web Developer plugin for Firefox and Chrome is fantastic. It offers a feature to disable all styles at once using the shortcut Alt+Shift+A. It’s like playing hide-and-seek with your styles!

Efficient ways of disabling CSS

Disabling CSS can make your workflow smooth. Here are some tips:

Dealing with inline styles

Inline styles won't disappear by just disabling external styles; they are like stubborn stains. You must disable them individually in the "Styles" sidebar of the Developer Tools.