137

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

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

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

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

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

4

18 回答 18

80

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

  1. 通过 ctrl-shift-j 或 Menu->Tools->Developer Console 调出开发者控制台。
  2. 在开发者控制台中浏览到 Sources 选项卡。
  3. 此选项卡的左上角是一个带有显示三角形的图标。点击它。
  4. 浏览到<域>→css→<要删除的css文件>
  5. 突出显示所有文本并点击删除。
  6. 冲洗并重复您要禁用的每个样式表。
于 2013-07-27T00:07:44.980 回答
66

Firefox和Chrome的 Web Developer 插件能够做到这一点

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

或者，启用开发人员工具栏后，您可以按Alt+Shift+A。

于 2012-12-26T21:58:03.810 回答
23

火狐（Win 和 Mac）

  • 通过菜单工具栏，选择：“视图”>“页面样式”>“无样式”
  • 通过 Web 开发人员工具栏，选择：“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 开发人员工具栏菜单：禁用 > 所有 CSS
  • Internet Explorer 6：通过 Web 辅助工具栏，选择“CSS”>“禁用 CSS”
于 2013-03-07T19:30:46.283 回答
20

这个脚本对我有用（给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]); };

内联样式保持不变，但

于 2013-09-24T12:28:04.323 回答
12

扩展 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 。
于 2015-03-26T15:12:35.473 回答
11

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

禁用所有外部 CSS

这种方法完全符合您的要求。

于 2012-12-26T22:14:10.013 回答
9

<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 面板中，元素选项卡选择<head>标签（见截图），右键单击它，然后选择Delete element：

删除头部标签

注意：移除头部不适用于使用内联样式的页面。

仅限 Safari 的解决方案

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

  1. 打开 Safari 首选项 ( cmd+ ,) 并在高级选项卡中启用复选框“在菜单栏中显示开发菜单”。
  2. 现在在“开发”菜单下，您将找到“禁用样式”选项。
于 2017-03-09T16:21:26.370 回答
4

以更少的步骤实现@David Baucum解决方案的另一种方法：

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

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

于 2014-10-07T15:08:49.490 回答
4

由于这里的大多数答案似乎已经很老了，引用我在流行浏览器的当前版本中似乎找不到的菜单项，这里是如何在 Firefox 开发者版的当前版本中做到这一点：

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

白眼图标 = 启用； 灰色眼睛图标 = 禁用

于 2017-07-21T12:57:49.433 回答
3

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

于 2018-07-09T17:20:55.147 回答
2

我在 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 页面

于 2016-03-19T16:14:09.387 回答
1

在 Firefox 上，最简单的方法是通过菜单命令 View > Page Style > No Style。但这也关闭了一些展示性 HTML 标记的效果。因此，使用@JoelKuiper 建议的插件通常会更好；它们提供了更大的灵活性（例如，只关闭一些样式表）。

于 2012-12-26T22:04:53.393 回答
1

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

// 禁用所有 css 的代码

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

如果您使用 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
于 2020-04-26T11:56:34.813 回答
1

对于铬：

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

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

于 2021-04-27T12:58:05.220 回答
0

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

于 2012-12-26T22:02:12.210 回答
0

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

Chrome 开发工具 > 网络选项卡 > 右键单击​​有问题的样式表 > 阻止请求 url

于 2018-01-18T20:18:58.917 回答
0

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

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

于 2016-12-23T22:19:36.643 回答
0

因为没有其他人提到这种可能性。您还可以从DevTools > Network request blocking. 这为您提供了更多的粒度和易用性。

它很可能在第一次使用之前被隐藏起来。只需在 Devtools 中按Command + shift + P（我假设它在 Linux/Win 上）并输入.ctrl + shift + Pnetwork request blocking

在此处输入图像描述

然后，您可以定义要阻止的资源，即。*.css和/或*.js并单击Enable network request blocking复选框。

在此处输入图像描述

重新加载以加载没有指定资源的页面。

于 2022-02-21T11:16:25.290 回答