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

How to disable CSS in Browser for testing purposes

提问by ATOzTOA

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

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

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.

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

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

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

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.

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

I know I can remove the <link rel='stylesheet'> entries, but what if I have a lot of linked pages?

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

采纳答案by JoelKuiper

The Web Developer plugin for Firefoxand Chromeis able to do this

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

Once you have installed the plugin the option is available in the CSS menu. For example, CSS > Disable Styles > Disable All Styles

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

Alternatively with the developer toolbar enabled you can press Alt+Shift+A.

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

回答by David Baucum

In Chrome/Chromium you can do this in the developer console.

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

1. Bring up the developer console by either ctrl-shift-j or Menu->Tools->Developer Console.
2. Within the developer console browse to the Sources tab.
3. In the top-left corner of this tab is an icon with a disclosure triangle. Click on it.
4. Browse to <domain>→css→<css file you want to eliminate>
5. Highlight all of the text and hit delete.
6. Rinse and repeat for each stylesheet you want to disable.

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

回答by Aravind NC

Firefox (Win and Mac)

火狐（Win 和 Mac）

• Via the menu toolbar, choose: "View" > "Page Style" > "No Style"
• Via the Web Developer Toolbar, choose: "CSS" > "Disable Styles" > "All Styles"

• 通过菜单工具栏，选择：“视图”>“页面样式”>“无样式”
• 通过 Web 开发人员工具栏，选择：“CSS”>“禁用样式”>“所有样式”

If the Web Dev Toolbar is installed, people can use this keyboard shortcuts: Command+ Shift+ S(Mac) and Control+ Shift+ S(Win)

如果安装Web开发工具栏，人们可以使用这个快捷键：Command+ Shift+ S（MAC）和Control+ Shift+ S（胜）

• Safari (Mac): Via the menu toolbar, choose "Develop" > "Disable Styles"
• Opera (Win): Via the menu, choose "Page" > "Style" > "User Mode"
• Chrome (Win): Via the gear icon, choose the "CSS" tab > "Disable All Styles"
• Internet Explorer 8: Via the menu toolbar, choose "View" > "Style" > "No Style"
• Internet Explorer 7: via the IE Developer Toolbar menu: Disable > All CSS
• Internet Explorer 6: Via the Web Accessibility Toolbar, choose "CSS" > "Disable CSS"

• Safari (Mac)：通过菜单工具栏，选择“开发”>“禁用样式”
• Opera (Win)：通过菜单，选择“页面”>“样式”>“用户模式”
• Chrome (Win)：通过齿轮图标，选择“CSS”选项卡>“禁用所有样式”
• Internet Explorer 8：通过菜单工具栏，选择“查看”>“样式”>“无样式”
• Internet Explorer 7：通过 IE 开发人员工具栏菜单：禁用 > 所有 CSS
• Internet Explorer 6：通过 Web 辅助工具栏，选择“CSS”>“禁用 CSS”

回答by apurkrt

This script works for me (hat tip to 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]); };

inline style stays intact, though

内联样式保持不变，但

回答by KyleMit

Expanding on scrappedocola/renergy's idea, you can turn the JavaScript into a bookmarkletthat executes against the javascript:uri so the code can be re-used easily across multiple pages without having to open up the dev tools or keep anything on your clipboard.

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

Just run the following snippet and drag the link to your bookmarks/favorites bar:

只需运行以下代码段并将链接拖到您的书签/收藏夹栏：

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

• I would avoid looping through the thousands of elements on a page with getElementsByTagName('*')and have to check and act on each individually.
• I would avoid relying on jQuery existing on the page with $('style,link[rel="stylesheet"]').remove()when the extra javascript is not overwhelmingly cumbersome.

• 我会避免遍历页面上的数千个元素，getElementsByTagName('*')并且必须单独检查每个元素并采取行动。
• $('style,link[rel="stylesheet"]').remove()当额外的 javascript 不是非常麻烦时，我会避免依赖页面上存在的 jQuery 。

回答by yakunins

Install Adblock Plus, then add *.cssrule in Filters options (custom filters tab). The method affect only on external stylesheets. It doesn't turn off inline styles.

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

Disable all external CSS

禁用所有外部 CSS

This method does exactly what you asked.

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

回答by Raphael Larrinaga

Another way to achieve @David Baucum's solutionin fewer steps:

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

1. Right click -> inspect element
2. Click on the stylesheet's name that affect your element (just on the right side of the declaration)
3. Highlight all of the text and hit delete.

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

It could be handier in some cases.

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

回答by ccpizza

For pages that rely on external CSS (most pages nowadays) a simple and reliable solution is to kill the headelement:

对于依赖外部 CSS 的页面（现在大多数页面），一个简单而可靠的解决方案是杀死head元素：

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

Right-click this page (in Chrome/Firefox), select Inspect, paste the code in the devtools console and press Enter.

右键单击此页面（在 Chrome/Firefox 中），选择Inspect，将代码粘贴到 devtools 控制台中，然后按Enter。

A bookmarklet version of the same code that you can paste as the URL of a bookmark:

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

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

Now clicking the bookmark on in your Favorites bar will show the page without any css stylesheets.

现在单击收藏夹栏中的书签将显示没有任何 css 样式表的页面。

Removing the head will not work for pages that use inline styles.

对于使用内联样式的页面，移除头部不起作用。

If you happen to use Safari on MacOS then:

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

1. Open Safari Preferences (cmd+,) and in the Advancedtab enable the checkbox "Show Develop menu in menu bar".
2. Now under the Developmenu you will find a Disable Stylesoption.

1. 打开 Safari 首选项 ( cmd+ ,) 并在高级选项卡中启用复选框“在菜单栏中显示开发菜单”。
2. 现在在“开发”菜单下，您将找到“禁用样式”选项。

回答by Dániel Kis-Nagy

As most answers seem to be pretty old here, referencing menu items I can't seem to find in the current versions of popular browsers, here's how to do it in the current version in Firefox Developer Edition:

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

• Open Developer Tools (CTRL + SHIFT + I)
• Select the Style Editor tab
• There you should see all sources of CSS in your document. You can disable each of them by clicking the eye icon next to them.

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

回答by Pdor

you can block any request (even for a single css file) from inspector with the following:
    Right click > block request URL
without disabling other css files > https://umaar.com/dev-tips/68-block-requests/It's a standard inspector feature, no plugins or tricks needed

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