blocks|key|192396|text|用于Firefox和Chrome的Web+Developer插件能够做到这一点|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|192397|一旦你安装了插件，这个选项就会出现在CSS菜单中。例如，CSS+>+Disable+Styles+>+Disable+All+Styles|style|CODE|192398|​|192399|📷|atomic|192400|192401|或者，在启用developer工具栏的情况下，您可以按Alt%2BShift%2BA。|192402|entityMap|0|LINK|mutability|MUTABLE|url|https://addons.mozilla.org/firefox/addon/web-developer/|1|https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm|2|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/0d8a87783a05bc1aa7b19e1de9ab6a46.jpeg|imageAlt^0|2|7|0|A|6|1|0|S|15|0|0|0|1|2|0|0|R|B|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@$A|16|B|17|1|18]|$A|19|B|1A|1|1B]]|C|$]]|$1|D|3|E|5|6|7|1C|8|@$A|1D|B|1E|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|1F|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|1G|8|@]|9|@$A|1H|B|1I|1|1J]]|C|$]]|$1|M|3|I|5|6|7|1K|8|@]|9|@]|C|$]]|$1|N|3|O|5|6|7|1L|8|@$A|1M|B|1N|F|G]]|9|@]|C|$]]|$1|P|3|-4|5|6|7|1O|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]|X|$5|S|T|U|C|$V|Y]]|Z|$5|10|T|11|C|$12|13|14|-4]]]]

The Web Developer plugin for <a href="https://addons.mozilla.org/firefox/addon/web-developer/" rel="noreferrer">Firefox</a> and <a href="https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm" rel="noreferrer">Chrome</a> is able to do this

Once you have installed the plugin the option is available in the CSS menu. For example, <code>CSS &gt; Disable Styles &gt; Disable All Styles</code> 

<img src="https://farm6.staticflickr.com/5476/12107149765_ee89477828.jpg" />

Alternatively with the developer toolbar enabled you can press <code>Alt+Shift+A</code>.

blocks|key|192532|text|此脚本适用于我(向scrappedcola致敬)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|192533|var+el=document.getElementsByTagName('*');for(var+i=0;i<el.length;+i%2B%2B){if+(el[i].getAttribute("type")=="text/css")+el[i].parentNode.removeChild(el[i]);+};|code-block|syntax|javascript|192534|但是，内联样式保持不变|192535|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This script works for me (hat tip to scrappedcola)

<pre><code>var el=document.getElementsByTagName('*');for(var i=0;i&lt;el.length; i++){if (el[i].getAttribute("type")=="text/css") el[i].parentNode.removeChild(el[i]); };
</code></pre>

inline style stays intact, though

blocks|key|192488|text|在Firefox上，最简单的方法是通过菜单命令View+>+Page+Style+>+No+Style。但这也关闭了一些表示式HTML标记的效果。因此，使用@JoelKuiper建议的插件通常更好；它们提供了更多的灵活性(例如，只关闭一些样式表)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|192489|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

On Firefox, the simplest way is via the menu command View > Page Style > No Style. But this also switches off the effects of some presentational HTML markup. So using plugins as suggested by @JoelKuiper is usually better; they give more flexibility (e.g., switching off just some style sheets).

blocks|key|192631|text|对于那些不想要任何插件或其他东西的人，我们可以使用document.styleSheets来禁用/启用css。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|192632|//禁用所有css的代码|192633|for+(const+item+in+document.styleSheets)+{
++document.styleSheets[item].disabled=true;
}|code-block|syntax|javascript|192634|如果你使用chrome，你可以创建一个函数并添加到你的代码片段中。这样您就可以使用控制台为任何站点启用/禁用css。|192635|//+Snippet+->+DisableCSS|192636|function+disableCss(value+=+true){
++for+(const+item+in+document.styleSheets)+{
++++document.styleSheets[item].disabled=value;
++}++
}|192637|//在控制台|192638|disableCss()+//+by+default+is+disable
disableCss(false)+//+to+enable|192639|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

For those who don't want any plugin or other stuffs, We can use the document.styleSheets to disable/enable the css.
// code to disable all the css
<pre><code>for (const item in document.styleSheets) {
 document.styleSheets[item].disabled=true;
}
</code></pre>
If you use chrome, you can create a function and add to your snippets. So that you can use the console to enable/disable the css for any sites.
// Snippets -&gt; DisableCSS
<pre><code>function disableCss(value = true){
 for (const item in document.styleSheets) {
 document.styleSheets[item].disabled=value;
 } 
}
</code></pre>
// in console
<pre><code>disableCss() // by default is disable
disableCss(false) // to enable
</code></pre>

blocks|key|410604|text|实际上，这比你想象的要容易。在任何浏览器中，按F12键打开调试控制台。这适用于IE、Firefox和Chrome。对歌剧不太了解。然后在元素窗口中注释掉CSS。就这样。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|410605|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Actually, it's easier than you think. In any browsers press F12 to bring up the debug console. This works for IE, Firefox, and Chrome. Not sure about Opera. Then comment out the CSS in the element windows. That's it.

blocks|key|192590|text|所有建议的答案都只是消除了该页面加载的css。根据您的用例，您可能希望根本不加载css：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|192591|Chrome+Dev+Tools+>+Network+Tab+>右键单击有问题的样式表>阻止请求url|192592|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

All the suggested answers merely eliminate the css for that page load. Depending on your use-case, you may wish to not load the css at all:

Chrome Dev Tools > Network Tab > Right click on stylesheet in question > block request url

Is there any way I can disable all external CSS in a browser (Firefox, Chrome...)?

When using slower internet connection, sometimes only the bare HTML is loaded by the browser without the CSS info. It looks like the page has been laid raw on the screen. You would have noticed this with StackOverflow too.

I want to make sure that my web page shows up OK even if the CSS files are not loaded.

I didn't mean I want to convert external CSS to inline. But I want a way to explicitly disable all CSS from the browser so that I can reposition my elements in a better, readable way.

I know I can remove the &lt;link rel='stylesheet'&gt; entries, but what if I have a lot of linked pages?

How to disable CSS in Browser for testing purposes

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

有没有办法在浏览器(Firefox，Chrome...)中禁用所有外部CSS？当使用较慢的互联网连接时，有时浏览器只加载纯HTML，而不加载CSS信息。看起来这个页面已经在屏幕上直接显示出来了。使用StackOverflow时，您也会注意到这一点。我想确保我的网页显示正常，即使CSS文件没有加载。我并不是想要将外部CSS转换为内联。但我想要一种从浏览器中显式禁用所有CSS的方法，这样我就可以以一种

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

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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