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

116

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

当使用较慢的Internet连接时，有时浏览器仅加载裸HTML而没有CSS信息。该页面似乎已被原始放置在屏幕上。您也会通过StackOverflow注意到这一点。

我想确保即使没有加载CSS文件，我的网页也能正常显示。

我并不是说我想将外部CSS转换为内联。但是我想要一种从浏览器中显式禁用所有CSS的方法，以便可以更好，更易读的方式重新放置元素。

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

html  css  browser 
— 阿托斯托
source
4
这个问题问得好。例如，Chrome不允许以标准用户可接受的方式“关闭”作者样式表。这使Chrome不符合CSS 2.1，正如在规范的第3.2.6章中可以看到的那样：“ UA必须允许用户关闭作者样式表的影响。” 对于其他本地不允许的浏览器也可能如此。
— NicBright
1
右键单击页面，从上下文菜单中选择“ 检查 ”，找到<head>标签，右键单击，然后选择“ 删除元素”。
— ccpizza

Answers:

59

Firefox和Chrome的Web开发人员插件可以做到这一点

安装插件后，该选项在CSS菜单中可用。例如，CSS > Disable Styles > Disable All Styles

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

— 乔尔·库珀
source
10
您能指定在那儿怎么做吗？
— 约翰·德沃夏克
谢谢... Firebug是否具有此功能？
— ATOzTOA 2012年
3
Firebug允许您有选择地禁用/启用某些选择器并实时编辑现有CSS，因此在某种意义上是可能的。为了您的目的，Web Developer插件似乎更合适，您可以选择禁用所有CSS或特定的样式表，以及其他有用的工具，用于评估旧版/移动浏览器对网站的可访问性。
— JoelKuiper
7
该答案没有有关如何执行此操作的任何信息，这就是问题所在。
— NessDan
1
Paciello组有一个类似的工具栏，可在IE 9/10/11中使用。paciellogroup.com/resources/wat
— RPNinja
70

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

  1. 通过ctrl-shift-j或菜单->工具->开发人员控制台调出开发人员控制台。
  2. 在开发人员控制台中，浏览到“源”选项卡。
  3. 该选项卡的左上角是带有显示三角形的图标。点击它。
  4. 浏览到<域>→css→<要消除的css文件>
  5. 突出显示所有文本，然后单击删除。
  6. 冲洗并重复要禁用的每个样式表。
— 大卫·鲍卡姆（David Baucum）
source
4
如果您有很多资源，并且想查找CSS的嵌套位置，请从“网络”选项卡开始，然后过滤响应以仅包含样式表。然后右键单击响应，然后单击“在源面板中打开”。然后Ctrl + A，Del
— KyleMit 2015年
@MartinF“小箭头”正确称为披露三角形/披露小部件。
— jsejcksn
你是上帝。
— 拉贾特·萨克森纳
21

Firefox（Win和Mac）

  • 通过菜单工具栏，选择：“视图”>“页面样式”>“无样式”
  • 通过Web Developer Toolbar，选择：“ CSS”>“禁用样式”>“所有样式”

如果安装了Web Dev Toolbar，人们可以使用以下键盘快捷键：Command+ Shift+ S（Mac）和Control+ Shift+ S（Win）

  • Safari（Mac）：通过菜单工具栏，选择“开发”>“禁用样式”
  • Opera（Win）：通过菜单，选择“页面”>“样式”>“用户模式”
  • Chrome（Win）：通过齿轮图标，选择“ CSS”标签>“禁用所有样式”
  • Internet Explorer 8：通过菜单工具栏，选择“视图”>“样式”>“无样式”
  • Internet Explorer 7：通过IE Developer工具栏菜单：禁用>所有CSS
  • Internet Explorer 6：通过Web辅助工具栏，选择“ CSS”>“禁用CSS”
— Aravind NC
source
4
Chrome（Win）：此选项似乎不再存在；@David Baucum在下面的回答确实有效。
— 大卫·库克
17

该脚本对我有用（对scrappedcola的提示）

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

内联样式保持完整

— 阿普尔克特
source
7
$('style,link[rel="stylesheet"]').remove()如果有jQuery，则达到相同的效果。从twitter.com/janlelis/status/433250838757126146。
— TuteC 2014年
1
太棒了，只需在Chrome中点击F12，浏览至控制台点击粘贴并输入即可。
— Eric Bishard 2014年
11

扩展scrappedocola / renergy的想法，您可以将JavaScript变成可对javascript: uri这样代码就可以轻松地在多个页面上重复使用，而无需打开开发工具或将任何内容保存在剪贴板上。

只需运行以下代码片段，然后将链接拖动到书签/收藏夹栏即可：

<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>
展开摘要

  • 我会避免循环浏览页面上的数千个元素 getElementsByTagName('*')而不必逐一检查和处理每个。
  • $('style,link[rel="stylesheet"]').remove()当额外的javascript不太繁琐时，我会避免依赖页面上存在的jQuery 。
— 凯尔·米特
source
这是最快的方法，我喜欢这种方法。
— ling 2016年
清除内联CSS：document.querySelectorAll('*[style]').forEach((e)=>e.removeAttribute('style'));仅迭代具有现有style属性的元素。
— Mat Gessel '17
10

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

禁用所有外部CSS

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

— 雅库宁
source
1
当您重新加载页面时，这是唯一仍然有效的解决方案。不幸的是，您无法通过广告对其进行测试。
— sinuhepop
1
@sinuhepop您可以禁用ABP中的所有过滤器列表。那行不通吗？
— Tuupertunut
当然！我会试试看。谢谢
— sinuhepop
4

由于大多数答案似乎在这里已经很老了，因此引用了我在流行浏览器的当前版本中似乎找不到的菜单项，以下是在Firefox Developer Edition的当前版本中的操作方法：

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

白眼图标=已启用； 灰眼图标=禁用

— 丹尼尔·基斯·纳吉
source
4

对于依赖外部CSS的页面（当今大多数页面），一种简单可靠的解决方案是取消该head元素：

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

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

可以粘贴为书签URL的相同代码的书签版本：

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

现在，单击“收藏夹”栏中的书签将显示没有任何CSS样式表的页面。

对于使用嵌入式样式的页面，取下打印头将无效。

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

  1. 打开Safari偏好设置（cmd+ ,），然后在“ 高级”中选项卡中启用复选框“在菜单栏中显示开发菜单”。
  2. 现在，在“ 开发”菜单下，您将找到“ 禁用样式”选项。
— ccpizza
source
2

我在Chrome Developer工具中尝试过，并且该方法仅在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页面

— Vetrivel
source
另外，对于内联样式：document.querySelectorAll("style").forEach((e)=>(e.remove()))
— Samy Bencherif
1

在Firefox上，最简单的方法是通过菜单命令“视图”>“页面样式”>“无样式”。但这也关闭了某些表示性HTML标记的影响。因此，使用@JoelKuiper建议的插件通常会更好。它们提供了更大的灵活性（例如，仅关闭某些样式表）。

— Jukka K.Korpela
source
0

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

— 开发者
source
Lynx还将忽略所有其他样式。这是不需要的。
— John Dvorak
0

在使用浏览器开发工具检查HTML时，您偏爱（例如Chrome Devtools）找到该<head>元素并将其完全删除。

注意，这也会删除js，但对我来说，这是使页面裸露的最快方法。

— 西奥多罗斯·布鲁米斯
source
0

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

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

— 费城
source
1
还需要“无论我们打开多少站点，窗口或选项卡，如何在整个浏览器会话中关闭CSS”。
— 丹·雅各布森
0

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

//禁用所有CSS的代码

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

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

//片段-> DisableCSS

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

//在控制台中

disableCss() // by default is disable
disableCss(false) // to enable
— 奇乔kb
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.