Chrome - 禁用特定.css文件中的所有样式

Question

检查网站时，是否可以禁用特定的.css文件？我可以在FireFox中执行此操作，但无法在Chrome中找到该选项。

Answer 1

如果要删除页面会话剩余部分的样式，请打开DOM Inspector，找到链接样式表的<link>或<style>元素，然后删除该元素。这会导致删除所有关联的样式。

如果您只想暂时停用样式表，请向disabled / <link>元素添加新属性<style>。删除此属性以再次启用样式表。

如果网站包含许多令人分心的DOM元素，您还可以访问控制台，例如document.styleSheets[0].disabled = true;（其中0是样式元素的索引）。

Answer 2

这是基于Rob W的有用答案

只需将以下内容粘贴到控制台中，然后相应地更改索引值。

首次执行将禁用样式表，第二次执行将启用它。

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

Answer 3

一种方法是找到：

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

将其更改为其他内容......

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

哪会阻止它工作......

我敢打赌，开发工具有一种方法可以......

问题是大多数人都在用预处理器连接和缩小他们的CSS ......所以在这些情况下你将无法采用这种方法。

Answer 4

为Chrome安装“Web开发人员”扩展程序。然后，您将拥有各种选项，包括“编辑CSS”，您可以在其中动态更改任何CSS文件（或者只是完全删除其内容）。

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

Answer 5

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

Answer 6

您可以在开发工具中打开“网络”选项卡，然后找到要禁用的特定 CSS 文件。右键单击它并选择“阻止请求 URL”，然后刷新页面（确保在开发工具顶部也选中了“禁用缓存”）。现在，当页面加载时，对该特定 CSS 文件的请求将被阻止。您也可以再次右键单击它并取消阻止它。