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

Posted 2023-02-21

技术标签:

【中文标题】如何在浏览器中禁用 CSS 以进行测试【英文标题】：How to disable CSS in Browser for testing purposes 【发布时间】：2012-12-12 08:59:32 【问题描述】：

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

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

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

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

我知道我可以删除条目，但是如果我有很多链接页面怎么办？

【问题讨论】：

这是一个很好的问题。例如，Chrome 不允许以标准用户可接受的方式“关闭”作者样式表。这使得 Chrome 不符合 CSS 2.1，正如在规范的第 3.2.6 章中可以看到的那样，“UA 必须允许用户关闭作者样式表的影响”。对于其他本机不允许它的浏览器也是如此。右击页面，从上下文菜单中选择Inspect，找到<head>标签，右击并选择Delete element . 【参考方案1】：

使用书签删除`<head>`

对于依赖外部 CSS 的页面（现在大多数页面），您可以删除 head 元素：

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

用法：右键单击页面（在Chrome/Firefox中），选择Inspect，将上面的代码粘贴到devtools控制台并按Enter。

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

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

现在单击书签栏中的书签将（希望）删除所有 css 样式表。

通过开发工具删除`<head>`

实现它的另一种方法是右键单击页面（在 Chrome/Firefox 中），选择 Inspect，在 devtools 面板中，Elements 选项卡中选择 <head> 标签（见截图），对- 单击它，然后选择 删除元素：

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

Safari 专用解决方案

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

cmd

,

高级

开发

禁用样式

【讨论】：

【参考方案2】：

对于 Chrome：

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

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

【讨论】：

【参考方案3】：

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

// 禁用所有css的代码

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

如果你使用 chrome，你可以创建一个函数并添加到你的 sn-ps。这样您就可以使用控制台来启用/禁用任何网站的 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

【讨论】：

将disabled=false 更改为disabled=true，您将获得很多支持；)【参考方案4】：

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

【讨论】：

【参考方案5】：

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

禁用所有外部 CSS

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

【讨论】：

这是唯一在重新加载页面时仍然有效的解决方案。很遗憾，您无法使用广告对其进行测试。 @sinuhepop 您可以禁用 ABP 中的所有过滤器列表。不行吗？当然！我会试试看。谢谢【参考方案6】：

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

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

【讨论】：

还需要“如何关闭整个浏览器会话的 CSS，无论我们打开多少个站点、窗口或标签页。”【参考方案7】：

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

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

【讨论】：

【参考方案8】：

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

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

【讨论】：

【参考方案9】：

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

通过 ctrl-shift-j 或 Menu->Tools->Developer Console 调出开发者控制台。在开发者控制台中浏览到 Sources 选项卡。此选项卡的左上角是一个带有三角形的图标。点击它。浏览到→css→ 突出显示所有文本并点击删除。冲洗并重复您要禁用的每个样式表。

【讨论】：

如果您有很多来源并且想查找 CSS 的嵌套位置，请从“网络”选项卡开始并过滤响应以仅包含样式表。然后右键单击响应并单击“在源面板中打开”。然后Ctrl+A，德尔 @MartinF “小玩箭头”被恰当地称为披露三角形/披露小部件。你是神。 2021 年现在似乎完全不同了。太糟糕了。和/或只是在讨论外部 .css 文件。【参考方案10】：

我在 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')

Array.prototype.forEach.call(linkElements

element.remove()

生成纯 HTML 页面

【讨论】：

或者，对于内联样式：document.querySelectorAll("style").forEach((e)=>(e.remove()))【参考方案11】：

扩展 scrappedocola/renergy 的想法，您可以将 JavaScript into a bookmarklet 转换为针对 javascript: uri 执行的代码，这样代码就可以在多个页面中轻松重复使用，而无需打开开发工具或保留任何内容剪贴板。

只需运行以下 sn-p 并将链接拖到您的书签/收藏夹栏：

<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。

【讨论】：

这是最快的方法，我喜欢这种方法。清除内联 CSS：document.querySelectorAll('*[style]').forEach((e)=>e.removeAttribute('style')); 仅遍历具有现有 style 属性的元素。【参考方案12】：

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

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

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

【讨论】：

【参考方案13】：

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

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

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

【讨论】：

你能指定怎么做吗？谢谢... Firebug 有这个功能吗？ Firebug 允许您选择性地禁用/启用某些选择器并实时编辑现有的 CSS，因此在某种意义上它是可能的。不过，出于您的目的，Web Developer 插件似乎更合适，您可以选择禁用所有 CSS 或特定样式表，以及其他用于评估旧版/移动浏览器的网站可访问性的有用工具。这个答案没有任何关于如何做到这一点的信息，这就是问题所在。 Paciello Group 有一个在 IE 9/10/11 中工作的类似工具栏。 paciellogroup.com/resources/wat【参考方案14】：

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

内联样式保持不变

【讨论】：

$('style,link[rel="stylesheet"]').remove() 实现相同，如果有 jQuery。来自twitter.com/janlelis/status/433250838757126146。这太棒了，只需在 chrome 中按 F12，浏览到控制台按粘贴并输入。【参考方案15】：

Firefox（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”

【讨论】：

Chrome (Win)：这个选项似乎不再存在； @David Baucum 下面的回答确实有效。【参考方案16】：

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

【讨论】：

Lynx 也会忽略所有其他样式。这不是我们想要的。【参考方案17】：

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

【讨论】：

以上是关于如何在浏览器中禁用 CSS 以进行测试的主要内容，如果未能解决你的问题，请参考以下文章

CSS：在所有浏览器中禁用字体连字

如何在 Firefox 中禁用媒体查询支持？

使用量角器测试 AngularJS 应用程序时禁用动画

在输入字段中禁用难看的黄色突出显示。 html css [重复]