如何在浏览器中禁用CSS以进行测试
ATO*_*TOA 110 html css browser
有什么办法可以在浏览器中禁用所有外部CSS(Firefox,Chrome ......)？
当使用较慢的互联网连接时,有时只有浏览器加载裸HTML而没有CSS信息.看起来页面已经在屏幕上生成.您也会注意到StackOverflow.
即使未加载CSS文件,我也希望确保我的网页显示正常.
我并不是说我想将外部CSS转换为内联.但是我希望有一种方法可以从浏览器中明确禁用所有CSS,这样我就可以以更好,可读的方式重新定位我的元素.
我知道我可以删除<link rel ='stylesheet'>条目,但如果我有很多链接页面怎么办？
Dav*_*cum 66
在Chrome/Chromium中,您可以在开发者控制台中执行此操作.
- 通过ctrl-shift-j或Menu-> Tools-> Developer Console打开开发人员控制台.
- 在开发人员控制台中,浏览到"源"选项卡.
- 在此选项卡的左上角是带有显示三角形的图标.点击它.
- 浏览到<domain>→css→<要消除的css文件>
- 突出显示所有文本并点击删除.
- 冲洗并重复您要禁用的每个样式表.
- 2021 年，一切似乎都不同了。太糟糕了。和/或仅讨论外部 .css 文件。 (4认同)
- 如果您有很多来源并且想要找到嵌套CSS的位置,请从"网络"选项卡开始并过滤响应以仅包括样式表.然后右键单击响应并单击"在源面板中打开".然后按Ctrl + A,Del (3认同)
Joe*_*per 59
Firefox和Chrome的Web Developer插件可以做到这一点
安装插件后,CSS菜单中提供了该选项.例如,CSS > Disable Styles > Disable All Styles
或者,启用开发人员工具栏,您可以按Alt+Shift+A.
- 你能指定一下那里怎么做吗？ (10认同)
- 这个答案没有关于*如何*这样做的任何信息,这就是问题所在. (7认同)
- Firebug允许您有选择地禁用/启用某些选择器并实时编辑现有的CSS,因此在某种意义上它是可能的.出于您的目的,Web Developer插件似乎更合适,您可以选择禁用所有CSS或特定样式表,以及用于评估旧版/移动浏览器的网站可访问性的其他有用工具. (3认同)
小智 20
Firefox(Win和Mac)
- 通过菜单工具栏,选择:"查看">"页面样式">"无样式"
- 通过Web Developer Toolbar,选择:"CSS">"禁用样式">"所有样式"
如果安装Web开发工具栏,人们可以使用这个快捷键:Command+ Shift+ S(MAC)和Control+ Shift+ S(胜)
- Safari(Mac):通过菜单工具栏,选择"开发">"禁用样式"
- Opera(Win):通过菜单,选择"Page">"Style">"User Mode"
- Chrome(Win):通过齿轮图标,选择"CSS"选项卡>"禁用所有样式"
- Internet Explorer 8:通过菜单工具栏,选择"查看">"样式">"无样式"
- Internet Explorer 7:通过IE Developer Toolbar菜单:禁用>所有CSS
- Internet Explorer 6:通过Web辅助功能工具栏,选择"CSS">"禁用CSS"
- Chrome(Win):此选项似乎不再存在; @David Baucum的答案确实有效. (4认同)
apu*_*krt 16
这个脚本适合我(帽子提示报废)
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]); };
但是,内联样式保持不变
- `$('style,link [rel ="stylesheet"]').remove()`实现相同,如果有jQuery.来自https://twitter.com/janlelis/status/433250838757126146. (6认同)
yak*_*ins 10
安装Adblock Plus,然后*.css在"过滤器"选项中添加规则(自定义过滤器标签).该方法仅影响外部样式表.它不会关闭内联样式.
禁用所有外部CSS
这种方法完全符合您的要求.
Kyl*_*Mit 10
扩展了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 .
<head>使用书签删除
对于依赖外部 CSS 的页面（现在大多数页面），您可以删除该head元素：
document.querySelector("head").remove();
用法：右键单击页面（在 Chrome/Firefox 中），选择Inspect，将上面的代码粘贴到 devtools 控制台中，然后按Enter。
您可以粘贴为书签 URL 的相同代码的书签版本：
javascript:(function(){document.querySelector("head").remove();})()
现在单击书签栏中的书签将（希望）删除所有 css 样式表。
<head>通过 devtools删除
实现它的另一种方法是右键单击页面（在 Chrome/Firefox 中），选择Inspect，在 devtools 面板中，Elements 选项卡选择<head>标签（见截图），右键单击它，然后选择Delete element：
注意：对于使用内联样式的页面，移除头部将不起作用。
仅限 Safari 的解决方案
如果您碰巧在 MacOS 上使用 Safari，那么：
- 打开 Safari 首选项 ( cmd+ ,) 并在高级选项卡中启用复选框“在菜单栏中显示开发菜单”。
- 现在在“开发”菜单下，您将找到“禁用样式”选项。
由于没有其他人提到这种可能性。您还可以从DevTools > Network request blocking. 这为您提供了更多的粒度和易用性。
它很可能在第一次使用之前被隐藏。只需在 Devtools 中按Command + shift + P（我猜是在 Linux/Win 上）并输入。ctrl + shift + Pnetwork request blocking
然后，您可以定义要阻止的资源，即。*.css和/或*.js并单击Enable network request blocking复选框。
重新加载以加载没有指定资源的页面。
- 我认为这个解决方案不适用于带有 style 标签的 html 文件中包含的内联 css。 (2认同)
由于大多数答案在这里似乎都很旧，引用我似乎在流行浏览器的当前版本中找不到的菜单项，以下是在 Firefox Developer Edition 的当前版本中执行此操作的方法：
- 打开开发者工具 (
CTRL + SHIFT + I) - 选择样式编辑器选项卡
- 在那里您应该可以看到文档中所有 CSS 源。您可以通过单击它们旁边的眼睛图标来禁用它们。
| 归档时间： |
|
| 查看次数： |
199705 次 |
| 最近记录： |