如何禁用浏览器中的CSS以进行testing
有什么办法可以禁用浏览器中的所有外部CSS（Firefox，Chrome …）？
当使用较慢的互联网连接时，有时只有裸露的HTML由浏览器加载而没有CSS信息。 看起来这个页面已经在屏幕上生成了。 你也会注意到这与StackOverflow。
我想确保即使CSS文件没有加载，我的网页也显示OK。
我不是故意要将外部CSS转换为内联。 但是我想要一种方式来显式地禁用浏览器中的所有CSS，以便我可以以更好，可读的方式重新定位我的元素。
我知道我可以删除<link rel ='stylesheet'>条目，但是如果我有很多链接的页面呢？
Firefox和Chrome的Web Developer插件能够做到这一点
一旦你安装了这个插件，这个选项就可以在CSS菜单中find。 例如， CSS > Disable Styles > Disable All Styles
或者在开发者工具栏启用的情况下，您可以按Alt+Shift+A
在Chrome / Chromium中，您可以在开发者控制台中执行此操作。
- 通过ctrl-shift-j或Menu-> Tools-> Developer Console调出开发者控制台。
- 在开发者控制台中浏览到Sources选项卡。
- 在这个标签的左上angular是一个带有三angular形的图标。 点击它。
- 浏览到<domain>→css→<要删除的css文件>
- 突出显示所有文字并点击删除。
- 冲洗并重复每个要禁用的样式表。
Firefox（Win和Mac）
- 通过菜单工具栏，select：“查看”>“页面样式”>“没有样式”
- 通过Web开发工具栏，select：“CSS”>“禁用样式”>“所有样式”
如果安装了Web Dev Toolbar，用户可以使用此键盘快捷键： Command + Shift + S （Mac）和Control + Shift + S （Win）
- Safari（Mac）：通过菜单工具栏，select“开发”>“禁用样式”
- Opera（Win）：通过菜单select“页面”>“风格”>“用户模式”
- Chrome（Win）：通过齿轮图标，select“CSS”选项卡>“禁用所有样式”
- Internet Explorer 8：通过菜单工具栏，select“查看”>“样式”>“没有样式”
- Internet Explorer 7：通过IE开发工具栏菜单：禁用>所有的CSS
- Internet Explorer 6：通过Web辅助function工具栏，select“CSS”>“禁用CSS”
这个脚本适用于我（hat tip to 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]); };
内联风格保持不变，但
安装Adblock Plus，然后在“filter”选项（自定义filter选项卡）中添加*.css规则。 该方法仅影响外部样式表 。 它不closures内联样式。
禁用所有外部CSS
这个方法正是你所问的。
通过扩展scrappedocola / renergy的想法，您可以将JavaScript转变为一个书签 ，并对javascript: uri执行，这样代码就可以在多个页面之间轻松重复使用，而无需打开开发工具或在剪贴板上保留任何内容。
只需运行以下代码段并将链接拖到您的书签/collections夹栏：
<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>
以更less的步骤实现@David Baucum 解决scheme的另一种方法是：
- 右键单击 – >检查元素
- 点击影响元素的样式表名称（就在声明的右侧）
- 突出显示所有文字并点击删除。
在某些情况下可能会更方便。
在Firefox上，最简单的方法是通过菜单命令视图>页面样式>没有样式。 但是这也closures了一些表示HTML标记的效果。 所以使用@JoelKuiperbuild议的插件通常会更好。 他们给予更多的灵活性（例如，closures一些样式表）。
我在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());
说明
-
document.querySelectorAll('link')获取所有链接节点。 这将返回DOM元素的数组。 请注意，这不是JavaScript的Array对象。 -
Array.prototype.forEach.call(linkElements循环链接元素 -
element.remove()从DOM中删除元素
导致纯HTML页面
由于大多数答案在这里似乎相当古老，引用菜单项目，我似乎无法find当前版本的stream行的浏览器，这里是如何做到这一点在当前版本的Firefox开发人员版：
- 打开开发工具（
CTRL + SHIFT + I） - select风格编辑器选项卡
- 在那里你应该看到你的文档中的CSS的所有来源。 您可以通过点击旁边的眼睛图标来禁用每个人。
对于依赖外部CSS的页面（如今的大多数页面），一个简单而可靠的解决scheme是杀死head元素：
document.querySelector("head").remove();
右键单击此页面（在Chrome / Firefox中），selectInspect ，将代码粘贴到devtools控制台中，然后按Enter键 。
您可以粘贴为书签url的相同代码的小书签版本：
javascript:(function(){document.querySelector("head").remove();})()
现在单击collections夹栏中的书签将显示没有任何CSS样式表的页面。
对于使用内联样式的页面，删除头部不起作用。
如果你碰巧在MacOS上使用Safari，那么：
- 打开Safari首选项（ cmd +），然后在高级选项卡中启用checkbox“在菜单栏中显示制作菜单”。
- 现在在发展菜单下，你会发现一个禁用样式选项。
事实上，这比你想象的要容易得多。 在任何浏览器按F12调出debugging控制台。 这适用于IE，Firefox和Chrome。 不确定关于Opera。 然后注释掉元素窗口中的CSS。 而已。
在使用浏览器开发工具（例如Chrome Devtools）检查HTML时，find<head>元素并删除它。
请注意，这也将删除JS，但对我来说，这是最快的方法来获得 裸页。
