如何在浏览器中禁用CSS以进行测试

Question

有什么方法可以在浏览器中禁用所有外部CSS（Firefox，Chrome ......）？

使用较慢的互联网连接时，有时只有浏览器加载裸HTML而没有CSS信息。看起来页面已经在屏幕上生成。您也会注意到StackOverflow。

即使未加载CSS文件，我也希望确保我的网页显示正常。

我并不是说我想将外部CSS转换为内联。但是我希望有一种方法可以从浏览器中明确禁用所有CSS，这样我就可以用更好的，可读的方式重新定位我的元素。

我知道我可以删除＆lt; link rel ='stylesheet'＆gt;条目，但如果我有很多链接页面怎么办？

Answer 1

在Chrome / Chromium中，您可以在开发者控制台中执行此操作。

1. 通过ctrl-shift-j或Menu-＆gt; Tools-＆gt; Developer Console启动开发者控制台。
2. 在开发者控制台中，浏览到“来源”选项卡。
3. 此标签的左上角是带有显示三角形的图标。点击它。
4. 浏览至＆lt; domain＆gt;→css→＆lt;要消除的css文件＆gt;
5. 突出显示所有文字并点击删除。
6. 为要禁用的每个样式表进行冲洗并重复。

Answer 2

Firefox和Chrome的Web Developer插件可以执行此操作

安装插件后，CSS菜单中提供了该选项。例如，CSS > Disable Styles > Disable All Styles

或者，在启用开发人员工具栏的情况下，您可以按Alt+Shift+A。

Answer 3

Firefox（Win和Mac）

• 通过菜单工具栏，选择：“查看”＆gt; “页面样式”＆gt; “没有风格”
• 通过Web Developer Toolbar，选择：“CSS”＆gt; “禁用样式”＆gt; “所有风格”

如果安装了Web开发工具栏，人们可以使用此键盘快捷键：命令 + Shift + S （Mac）和控制 + Shift + S （Win）

• Safari（Mac）：通过菜单工具栏，选择“开发”＆gt; “禁用 样式“
• Opera（Win）：通过菜单，选择“Page”＆gt; “风格”＆gt; “用户模式”
• Chrome（赢）：通过齿轮图标，选择“CSS”标签＆gt; “禁用所有 样式“
• Internet Explorer 8：通过菜单工具栏，选择“查看”＆gt; “风格”＆gt; “没有风格”
• Internet Explorer 7：通过IE Developer Toolbar菜单：禁用＆gt;所有 CSS
• Internet Explorer 6：通过Web辅助功能工具栏，选择“CSS”＆gt; “禁用CSS”

Answer 4

这个脚本适合我（帽子提示报废）

var el=document.getElementsByTagName('*');for(var i=0;i<el.length; i++){if (el[i].getAttribute("type")=="text/css") el[i].parentNode.removeChild(el[i]); };

内联样式保持不变，但

Answer 5

安装Adblock Plus，然后在“过滤器”选项（自定义过滤器标签）中添加*.css规则。该方法仅影响外部样式表。它不会关闭内联样式。

  

禁用所有外部CSS

此方法完全符合您的要求。

Answer 6

扩展scrappedocola / renergy的想法，您可以针对javascript: uri启用执行的JavaScript into a bookmarklet，以便可以在多个页面轻松地重复使用代码，而无需打开开发工具或保留剪贴板上的任何内容。

只需运行以下代码段并将链接拖到书签/收藏夹栏：

＆＃13;

＆＃13;

<a href="javascript: var el = document.querySelectorAll('style,link');
         for (var i=0; i<el.length; i++) {
           el[i].parentNode.removeChild(el[i]); 
         };">
  Remove Styles 
</a>

＆＃13;

＆＃13;

＆＃13;

• 我会避免使用getElementsByTagName('*')遍历页面上的数千个元素，并且必须单独检查并对每个元素进行操作。
• 当额外的javascript不是非常繁琐时，我会避免依赖$('style,link[rel="stylesheet"]').remove()页面上存在的jQuery。

Answer 7

以更少的步骤实现@David Baucum solution的另一种方式：

1. 右键单击 - ＆gt;检查元素
2. 点击影响您元素的样式表名称（仅在声明的右侧）
3. 突出显示所有文字并点击删除。

在某些情况下可能更方便。

Answer 8

由于大多数答案在这里似乎相当陈旧，引用我在流行浏览器的当前版本中似乎找不到的菜单项，这里是如何在Firefox Developer Edition的当前版本中执行此操作：

• 打开开发人员工具（CTRL + SHIFT + I）
• 选择“样式编辑器”选项卡
• 您应该在文档中看到CSS的所有来源。您可以通过单击它们旁边的眼睛图标来禁用它们。

Answer 9

我尝试使用Chrome开发者工具，该方法仅在CSS作为外部文件包含时有效，并且不适用于内联样式。

Array.prototype.forEach.call(document.querySelectorAll('link'), (element)=>element.remove());

或者

var linkElements = document.querySelectorAll('link');
Array.prototype.forEach.call(linkElements, (element)=>element.remove());

说明

1. document.querySelectorAll('link')获取所有链接节点。这将返回DOM元素的数组。请注意，这不是javascript的Array对象。
2. Array.prototype.forEach.call(linkElements遍历链接元素
3. element.remove()从DOM中删除元素

导致纯HTML页面

Answer 10

对于依赖外部CSS（现在大多数页面）的页面，一个简单而可靠的解决方案就是杀死head元素：

document.querySelector("head").remove();

右键点击此页面（在Chrome / Firefox中），选择检查，将代码粘贴到devtools控制台，然后按 Enter 。

您可以粘贴为书签网址的相同代码的书签版本：

javascript:(function(){document.querySelector("head").remove();})()

现在点击收藏夹栏中的书签将显示没有任何css样式表的页面。

删除头部不适用于使用内联样式的页面。

如果您碰巧在MacOS上使用Safari，那么：

1. 打开Safari偏好设置（ cmd + ，），然后在高级标签中启用“在菜单栏中显示开发菜单”复选框。< / LI>
2. 现在，在开发菜单下，您会看到禁用样式选项。

Answer 11

在Firefox上，最简单的方法是通过菜单命令View＆gt;页面样式＆gt;没有风格。但这也会关闭一些表示性HTML标记的效果。所以使用@JoelKuiper建议的插件通常会更好;它们提供了更大的灵活性（例如，仅关闭一些样式表）。

Answer 12

您可以使用以下命令阻止检查器发出的任何请求（即使是单个css文件）：  
右键单击>阻止请求URL  
而不禁用其他CSS文件> https://umaar.com/dev-tips/68-block-requests/ 这是标准的检查器功能，不需要插件或技巧

Answer 13

实际上，它比你想象的容易。在任何浏览器中按F12键调出调试控制台。这适用于IE，Firefox和Chrome。不确定Opera。然后在元素窗口中注释掉CSS。就是这样。

Answer 14

对于那些不需要任何插件或其他东西的人，我们可以使用document.styleSheets禁用/启用CSS。

//禁用所有CSS的代码

for (const item in document.styleSheets) {
  document.styleSheets[item].disabled=false;
}

如果您使用的是chrome，则可以创建函数并将其添加到代码段中。这样您就可以使用控制台为任何站点启用/禁用CSS。

//代码段->禁用CSS

function disableCss(value = true){
  for (const item in document.styleSheets) {
    document.styleSheets[item].disabled=value;
  }  
}

//在控制台中

disableCss() // by default is disable
disableCss(false) // to enable

Answer 15

所有建议的答案只是消除了该页面加载的css。根据您的使用情况，您可能希望根本不加载css：

Chrome开发工具＆gt;网络标签＆gt;右键单击有问题的样式表＆gt;阻止请求网址

Answer 16

使用您喜欢的浏览器开发工具（例如Chrome Devtools）检查HTML时，会找到<head>元素并将其删除。

请注意，此也会删除js ，但对我而言 获取页面裸的最快方式。

Answer 17

对于 Chrome：

1. 打开开发工具（检查元素）。
2. 转到“网络”标签。
3. 选择任何 css 文件并右键单击：“阻止请求 url”。
4. 转到检查员页脚的“网络请求阻止”选项卡。
5. 点击加号图标，并添加一些模式，如“*.css”。
6. 重新加载网页。

此过程允许一次性禁用所有 css 文件。