DevTools Tips (2024)

To remove all CSS styles on a webpage, for example to test the accessibility of a page when styles are disabled, or to verify the order in which content is displayed, you can use the techniques below. Don't worry, the styles will be re-enabled when you refresh the page.

By running JavaScript in the console #

1. Open the Console tool in your browser DevTools.

2. Enter the following JavaScript expression:

   See Also

   Test by disabling CSS - Orange digital accessibility guidelinesHTML Cleaner Tool - Remove Inline CSS Styles OnlineCSS Comments – How to Comment out CSSRemove all styling with one line of CSS

   document.querySelectorAll('style, link[rel="stylesheet"]').forEach(e => e.remove());

   The expression above finds all <style> elements and <link rel="stylesheet"> elements on the page, and removes them.

3. Press Enter to run the expression. The page is now displayed without any CSS styles:

   

   See Also

   How to remove global CSS file from a particular page using jQuery?

By using Firefox's Style Editor tool #

Firefox has a tool named Style Editor, which lists all the stylesheets used on the page. To disable the styles on the page:

1. Open the Style Editor tool in Firefox DevTools.
2. Click the Toggle style sheet visibility buttons (the eye icons) next to each stylesheet to disable it.

By using the Sources tool in other browsers #

1. Open the Sources tool in Chrome or Edge DevTools.

2. Find the CSS files that you want to disable, for example by pressing Ctrl+P (or Command+P on macOS) to open the Command Menu and by typing .css to filter the CSS files.

3. Select the entire text in the CSS file and delete it.

4. Repeat with the other CSS files you want to disable.

By using Polypane's Disable CSS option #

In Polypane, you can disable all CSS styles by using the Disable CSS option:

1. In the pane where you want to disable CSS styles, open the Debug tools menu.
2. Click Disable CSS in the menu.