47

When inspecting a web site, is it possible to disable a particular .css file? I can do it in FireFox but can't find the option in Chrome.

Improve this question
1

7 Answers 7

Reset to default
62

If you want to remove the style for the remainder of the page session, open the DOM Inspector, locate the <link> or <style> element which links the style sheet, and remove the element. This causes all associated styles to be removed.

If you only want to disable the style sheet temporarily, add a new attribute disabled to the <link>/<style> element. Remove this attribute to enable the style sheet again.

If the site contains lots of distracting DOM elements, you can also visit the console, and something like document.styleSheets[0].disabled = true; (where 0 is the index of the style element).

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

4

One way would be to just find the: 

<link rel="stylesheet" href="yourstyle.css" />

And change it to something else... 

<link rel="stylesheet" href="yourstyleXXX.css" />

Which would stop it from working...

I bet there is a way in dev tools though...

The problem is that most people are concatenating and minifying their CSS with preprocessors... so you won't be able to take this approach in these cases.

Improve this answer

Comments

4

This is based on Rob W's helpful answer

Just paste the following into your console and change the index value accordingly.

First execution will disable stylesheet and the second will enable it.

var stylesheetIndex = 0;
var action = document.styleSheets[stylesheetIndex].disabled === false ? "Disabled " : "Enabled ";
document.styleSheets[stylesheetIndex].disabled = !document.styleSheets[stylesheetIndex].disabled;
console.log( action + "stylesheet:" + document.styleSheets[stylesheetIndex].href );
Improve this answer

Comments

3

You can open the Network tab in Dev Tools and find the particular CSS file that you want to disable. Right click on it and select "Block request URL", then refresh the page (make sure "disable cache" is checked at the top of your dev tools as well). Now the request for that particular CSS file will be blocked when the page loads. You can also right click it again and unblock it.

enter image description here

Improve this answer

Comments

1
  1. Open Chrome Dev Tool
  2. Go to Sources
  3. Find your .css file
    (or, replace step 1~3:
    ctrl+shift+c pick an element & find the corresponding style & click the style hyper link to the .css file)
  4. ctrl+a select all css & delete them
  5. Html will be re-rendered in real time, base on the change of the .css file.
  • the changes to the css file will not be saved to the file system, (even if you press ctrl+s)
    (base on: what the Chrome Dev Tool Tooltip warning says & I tested it)

eg,graph:

enter image description here

Improve this answer

Comments

0

Install the "Web developer" extension for Chrome. You will then have various options, including the "Edit CSS", where you can make changes to any CSS file on the fly (or just completely remove its' contents).

https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

Improve this answer

Comments

0 
<script>

var stylesheet0 = document.styleSheets[0]; 
var stylesheet1 = document.styleSheets[1]; 
var stylesheet2 = document.styleSheets[2]; 

stylesheet0.disabled = true; 
stylesheet1.disabled = true; 
stylesheet2.disabled = true; 

</script>
Improve this answer

2 Comments

please add explanation
You can also disable multiple stylesheets by the index of the style element, as I mentioned above.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.