Menu
Active4 years ago
I have read an interesting article about css selector profiling but I haven't found any way how to actually enable this feature. Is there something I am completely missing ?
Tomas VanaTomas Vana
11.3k99 gold badges4646 silver badges6161 bronze badges
3 Answers
This Answer is no longer valid. Please refer to Johns answer.
May 1, 2018 - Chrome DevTools allows web developers to live edit the HTML and CSS. Also be lost upon page refresh unless you enable persistent editing.
Im on Chrome 18.something Dev and its there under Developer Tools.Click the wrench / Tools / Developer Tools and then click the Profile tab....now to learn what it all means ;)
PAEzPAEz7,21722 gold badges2828 silver badges2525 bronze badges
The CSS Selector Profiler was removed from Chrome 30:
CSS selector matching is now reasonably fast for the absolute majority of common selectors that used to be slow at the time of the profiler implementation. This time is also included into the Timeline 'Recalculate Style' event.
As such, I believe the CSS selector profiler is not as useful as it [might have been] used to and can safely be dropped. This will also reduce the fraction of developers trying to micro-optimize already fast selectors.
JohnJohn18.9k99 gold badges6464 silver badges7474 bronze badges
Just in case anyone still needs the CSS selector profiler, you can find it in the Web Inspector of, I believe, any Webkit-based browser except Safari (qupzilla is just one example).
Alexander PavlovAlexander Pavlov27.2k33 gold badges5858 silver badges8585 bronze badges
Not the answer you're looking for? Browse other questions tagged cssgoogle-chromegoogle-chrome-extensiongoogle-chrome-devtools or ask your own question.
Active10 months ago
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> entries, but what if I have a lot of linked pages?
Robert Harvey♦153k3838 gold badges294294 silver badges433433 bronze badges
ATOzTOAATOzTOA21k1717 gold badges6969 silver badges103103 bronze badges
15 Answers
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
.Community♦
JoelKuiperJoelKuiper2,08222 gold badges1414 silver badges2929 bronze badges
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 <domain>→css→<css file you want to eliminate>
- Highlight all of the text and hit delete.
- Rinse and repeat for each stylesheet you want to disable.
David BaucumDavid Baucum
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' > 'DisableStyles'
- Opera (Win): Via the menu, choose 'Page' > 'Style' > 'User Mode'
- Chrome (Win): Via the gear icon, choose the 'CSS' tab > 'Disable AllStyles'
- Internet Explorer 8: Via the menu toolbar, choose 'View' > 'Style' >'No Style'
- Internet Explorer 7: via the IE Developer Toolbar menu: Disable > AllCSS
- Internet Explorer 6: Via the Web Accessibility Toolbar, choose 'CSS' > 'Disable CSS'
Aravind NCAravind NC
This script works for me (hat tip to scrappedcola)
inline style stays intact, though
renergyrenergy38311 gold badge44 silver badges1313 bronze badges
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:
- 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.
62.1k4040 gold badges271271 silver badges433433 bronze badges
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.
yakuninsyakunins
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.
Community♦
Raphael LarrinagaRaphael Larrinaga
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.
Dániel Kis-NagyDániel Kis-Nagy
For pages that rely on external CSS (most pages nowadays) a simple and reliable solution is to kill the
head
element: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:
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.
13.9k88 gold badges9292 silver badges9595 bronze badges
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.
Or
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 elementselement.remove()
removes the element from the DOM
Resulting in plain HTML page
Tunaki97.1k2424 gold badges224224 silver badges306306 bronze badges
VetrivelVetrivel
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).
Jukka K. KorpelaJukka K. Korpela159k2727 gold badges205205 silver badges308308 bronze badges
you can block any request (even for a single css file) from inspector with the following:
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
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
PdorPdor
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.
devXendevXen2,37633 gold badges2727 silver badges4242 bronze badges
While inspecting HTML with the Browser Development tool you prefer (eg Chrome Devtools) find the
<head>
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.
TheodorosPloumisTheodorosPloumis2,27611 gold badge1313 silver badges2626 bronze badges
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
phillyslickphillyslick