如何禁用测试目的在浏览器中的 CSS

有没有什么方法可以禁用浏览器中的所有外部 CSS (Firefox，Chrome...) ？

当使用较慢的互联网连接，有时只有裸 HTML 是由浏览器加载没有 CSS 信息。看起来这一页已经被原封不动地放在屏幕上了。对于 StackOverflow，您也会注意到这一点。

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

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

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

287151 次浏览
小开
最佳答案

用于 火狐和 铬合金的 WebDeveloper 插件可以做到这一点

一旦你安装了这个插件，这个选项就可以在 CSS 菜单中找到

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

小开

事实上，比你想象的要简单。在任何浏览器中，按 F12打开调试控制台。这适用于 IE、 Firefox 和 Chrome。我对歌剧不太确定。然后在元素窗口中注释掉 CSS。就是这样。

小开

在 Firefox 上，最简单的方法是通过菜单命令 View > Page Style > No Style。但是这也关闭了一些表示性 HTML 标记的效果。所以像@JoelKuiper 建议的那样使用插件通常更好; 它们提供了更多的灵活性(例如，只关闭一些样式表)。

小开

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

禁用所有外部 CSS

此方法完全按照您的要求执行。

小开

火狐(Win 和 Mac)

  • 通过菜单工具栏，选择: “查看”> “页面样式”> “无样式”
  • 通过 Web 开发工具栏，选择: “ CSS”> “禁用样式”> “所有样式”

如果安装了 Web 开发工具栏，人们可以使用这个键盘快捷键: 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: 通过网页亲和力工具栏，选择“ CSS”> “禁用 CSS”
小开

在 Chrome/Chromium 中，你可以在开发者控制台中完成这项工作。

  1. 通过 ctrl-shift-j 或 Menu-> Tools-> Developer Console 打开开发者控制台。
  2. 在开发人员控制台中，浏览到 Source 选项卡。
  3. 在这个标签的左上角有一个带有披露三角形的图标。点击它。
  4. 浏览到 < domain > & rarr; css & rarr; < css file you want to delete >
  5. 突出显示所有文本并点击删除。
  6. 对要禁用的每个样式表进行清洗和重复。
小开

这个脚本对我很有用

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

不过，内联风格保持不变

小开

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

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

在某些情况下会更方便。

小开

在 scrapdocola/renenergy 的想法的基础上，您可以将执行 javascript: uri 的 将 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('*')，我将避免在一个页面上循环遍历数千个元素，并且必须分别检查和执行每个元素。
  • 当额外的 javascript 不是那么麻烦的时候，我会避免使用 $('style,link[rel="stylesheet"]').remove()页面上现有的 jQuery。
小开

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

小开

在使用浏览器开发工具(如 ChromeDevtools)检查 HTML 时，可以找到 <head>元素并完全删除它。

注意，这个 也将删除 js对我来说是 最快的方法页面 裸体。

小开

使用书签工具删除 <head>

对于依赖于外部 CSS 的页面(现在大多数页面) ，可以删除 head元素:

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

使用方法: 右键单击页面(在 Chrome/Firefox 中) ，选择 检查，将上面的代码粘贴到 devtools 控制台，然后按 进来。

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

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

现在单击书签栏中的书签将(希望)去掉所有的 css 样式表。

通过 devtools 删除 <head>

另一种方法是右键单击页面(在 Chrome/Firefox 中) ，选择 Inspect，在 devtools 面板中，Elements 选项卡选择 <head>标签(见截图) ，右键单击它，然后选择 Delete element:

delete the head tag

注意: 删除页眉对于使用内联样式的页面不起作用。

只有 Safari 的解决方案

如果你碰巧在 MacOS 上使用 Safari，那么:

  1. 打开 Safari 首选项(cmd + ,) ，在 高级选项卡中启用复选框“在菜单栏中显示开发菜单”。
  2. 现在在 冲洗菜单下你会找到一个 禁用风格选项。

自定义书签小工具来“修复”所有样式

为了使任何页面可读，并根据你的喜好进行调整，你也可以使用一个自定义书签小工具来设置你自己喜欢的样式:

(function() {
for (i = 0; i < document.styleSheets.length; i++) {
document.styleSheets.item(i).disabled = true;
}
all = document.getElementsByTagName('*');
for (i = 0; i < all.length; i++) {
el = all[i];
el.style.cssText = '';
el.style.width = '';
el.style.padding = '.5em';
el.style.margin = '.3em';
el.style.backgroundImage = 'none';
el.style.backgroundColor = '#fff';
el.style.color = '#000';
}
})()

可以粘贴到浏览器中的书签 URL 的书签小工具的缩小版:

javascript:(function(){for(i=0;i<document.styleSheets.length;i++){document.styleSheets.item(i).disabled=true;}
all=document.getElementsByTagName('*');for(i=0;i<all.length;i++){el=all[i];el.style.cssText='';el.style.width='';el.style.padding='4px';el.style.margin='3px';el.style.backgroundImage='none';el.style.backgroundColor='#fff';el.style.color='#000';}})()

注意: 您可以在本页面上测试它，方法是将上面的代码粘贴到浏览器地址栏，然后按 Enterーー请确保在开始时预先设置 javascript:，因为大多数浏览器会在您将其复制到剪贴板时自动将其删除(出于安全原因)。

注意 : Bookmarklet 不能处理框架内的页面内容(<frame>和 <iframe>元素) ，也不能处理定义严格 CSP (内容-安全-策略规则)的站点，堆栈溢出和相关站点就是这种情况。当从 devtools 控制台或带有 javascript:前缀的地址栏运行时，代码仍然可以工作。

小开

由于大多数答案在这里看起来相当老旧，引用我在当前流行的浏览器版本中似乎找不到的菜单项，以下是在 Firefox 开发者版本的当前版本中如何做到这一点:

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

White eye icon = enabled; Gray eye icon = disabled

小开

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

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

小开

你可以阻止任何请求(即使是一个单一的 css 文件)从检查与以下:
右击 > 阻止请求 URL
不禁用其他 css 文件 > < a href = “ https://umaar.com/dev-tips/68-block-request/”rel = “ nofollow norefrer”> https://umaar.com/dev-tips/68-block-requests/ 这是一个标准的检查功能，不需要插件或技巧

小开

对于那些不需要任何插件或其他东西的人，我们可以使用 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
小开

对于 Chrome 浏览器:

  1. 打开开发工具(检查元素)。
  2. 进入“网络”标签。
  3. 选择任何 css 文件并右键单击“ Block request url”。
  4. 转到检查员页脚的“网络请求阻塞”选项卡。
  5. 单击加号图标，并添加一些图案，如“ * . css”。
  6. 重新载入网页。

这个过程允许立即禁用所有 css 文件。

小开

因为没有其他人提到这种可能性。你也可以从 DevTools > Network request blocking中禁用 Chrome 中的任何资源。这使您具有更多的粒度以及更易于使用。

它很可能在第一次使用之前就被隐藏起来了。只需在 Devtools 中按 Command + shift + P(我假设它是 Linux/Win 上的 ctrl + shift + P)并键入 network request blocking。

enter image description here

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

enter image description here

重新加载以在没有指定资源的情况下加载页。

小开

打开你的浏览器(Chrome，Firefox 等)开发工具(F12或 Ctrl+Shift+J)。

然后切换到 Console选项卡并粘贴如下:

document.querySelectorAll('style,link[rel="stylesheet"]').forEach((el)=>(el.remove()));document.querySelectorAll('[style]').forEach((el)=>(el.removeAttribute('style')));

点击 Enter，并享受完全没有风格的网站！


提交答案