web-dev-qa-db-ja.com

テスト目的でブラウザーでCSSを無効にする方法

ブラウザ（Firefox、Chrome ...）ですべての外部CSSを無効にできる方法はありますか？

低速のインターネット接続を使用する場合、CSS情報なしで、ブラウザによって裸のHTMLのみがロードされることがあります。ページが画面上に生で配置されているように見えます。 StackOverflowでもこれに気づいたでしょう。

CSSファイルがロードされていない場合でも、Webページが正常に表示されるようにします。

外部CSSをインラインに変換するつもりはありませんでした。しかし、ブラウザーからすべてのCSSを明示的に無効にして、要素をより読みやすく読みやすい方法で再配置できるようにする方法が必要です。

<link rel = 'stylesheet'>エントリを削除できることは知っていますが、リンクされたページがたくさんある場合はどうなりますか？

htmlcssbrowser
102
ATOzTOA

Firefox および Chrome のWeb Developerプラグインはこれを行うことができます

プラグインをインストールしたら、CSSメニューでオプションを使用できます。たとえば、CSS > Disable Styles > Disable All Styles

または、開発者ツールバーを有効にして、Alt+Shift+Aを押すことができます。

55
JoelKuiper

Chrome/Chromiumでは、開発者コンソールでこれを行うことができます。

  1. Ctrl-shift-jまたはMenu-> Tools-> Developer Consoleで開発者コンソールを起動します。
  2. 開発者コンソール内で、「ソース」タブを参照します。
  3. このタブの左上隅には、開閉用三角のアイコンがあります。クリックして。
  4. <ドメイン>→css→<削除するcssファイル>に移動します
  5. すべてのテキストを強調表示して、削除をクリックします。
  6. 無効にするスタイルシートごとにすすぎ、繰り返します。
61
David Baucum

Firefox（WinおよびMac）

  • メニューツールバーから、[表示]> [ページスタイル]> [スタイルなし]を選択します。
  • Web Developerツールバーから、「CSS」>「スタイルを無効にする」>「すべてのスタイル」を選択します

Web Dev Toolbarがインストールされている場合、人々はこのキーボードショートカットを使用できます。 Command + Shift + S （Mac）および Control + Shift + S （勝つ）

  • Safari（Mac）：メニューツールバーから、[開発]> [スタイルの無効化]を選択します
  • Opera（Win）：メニューから[ページ]> [スタイル]> [ユーザーモード]を選択します
  • Chrome（Win）：歯車アイコンから、[CSS]タブ> [すべてのスタイルを無効にする]を選択します
  • Internet Explorer 8：メニューツールバーから、[表示]> [スタイル]> [スタイルなし]を選択します
  • Internet Explorer 7：IE Developerツールバーメニュー：[無効化]> [すべてのCSS]
  • Internet Explorer 6：Web Accessibility Toolbarから「CSS」>「CSSを無効にする」を選択します
19
Aravind NC

このスクリプトは私のために機能します（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]); };

ただし、インラインスタイルはそのままです。

15
renergy

Scrappedocola/renergyのアイデアを拡張して、コードをjavascript: uriに対して実行する JavaScriptをブックマークレットに に変えることができるため、開発ツールを開かずにコードを複数のページで簡単に再利用できますクリップボードにあるもの。

次のスニペットを実行して、リンクをブックマーク/お気に入りバーにドラッグするだけです。

<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に依存することは避けます。
9
KyleMit

Adblock Plusをインストールしてから、フィルターオプション（カスタムフィルタータブ）に*.cssルールを追加します。このメソッドはexternal stylesheetsにのみ影響します。インラインスタイルはオフになりません。

すべての外部CSSを無効にします

この方法は、まさにあなたが求めたものを行います。

9
yakunins

@David Baucumの solution をより少ないステップで実現する別の方法：

  1. 右クリック->要素を検査
  2. 要素に影響するスタイルシートの名前をクリックします（宣言の右側）
  3. すべてのテキストを強調表示して、削除をクリックします。

場合によっては便利かもしれません。

4
Raphael Larrinaga

ここではほとんどの答えはかなり古く、人気のあるブラウザの現在のバージョンでは見つからないメニュー項目を参照しているので、Firefox Developer Editionの現在のバージョンでそれを行う方法は次のとおりです。

  • 開発者ツールを開く（CTRL + SHIFT + I）
  • [スタイルエディター]タブを選択します
  • 文書内にCSSのすべてのソースが表示されます。それらの横にある目のアイコンをクリックして、それらをそれぞれ無効にすることができます。

White eye icon = enabled; Gray eye icon = disabled

3
Dániel Kis-Nagy

私はChrome Developerツールで試しましたが、この方法は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ページ

2
Vetrivel

外部CSSに依存しているページ（最近ではほとんどのページ）のシンプルで信頼できる解決策は、head要素を削除することです：

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

このページを右クリックして（Chrome/Firefoxで）、Inspectを選択し、devtoolsコンソールにコードを貼り付けてを入力します。

ブックマークのURLとして貼り付けることができる同じコードのブックマークレットバージョン：

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

これで、お気に入りバーのブックマークをクリックすると、CSSスタイルシートなしでページが表示されます。

インラインスタイルを使用するページでは、ヘッドを削除しても機能しません。

MacOSでSafariを使用する場合：

  1. Safariの設定を開きます（cmd+,）および詳細タブで、「メニューバーに開発メニューを表示」チェックボックスを有効にします。
  2. Developメニューの下にDisable Stylesオプションがあります。
2
ccpizza

Firefoxでは、メニューコマンド[表示]> [ページスタイル]> [スタイルなし]を使用するのが最も簡単な方法です。ただし、これにより、一部のプレゼンテーションHTMLマークアップの効果もオフになります。したがって、通常は@JoelKuiperが提案するプラグインを使用する方が適切です。より柔軟性があります（たとえば、一部のスタイルシートのみをオフにします）。

1
Jukka K. Korpela

次の方法で、インスペクタからのリクエスト（単一のcssファイルの場合でも）をブロックできます。
右クリック>要求URLをブロック
他のcssファイルを無効にすることなく> https://umaar.com/dev-tips/68-block-requests/ これは標準のインスペクター機能であり、プラグインやトリックは不要です

1
Pdor

好みのブラウザ開発ツール（Chrome Devtoolsなど）でHTMLを検査しているときに、<head>要素を見つけて削除します。

これはjsも削除されますですが、私にとっては取得する最も速い方法ページ裸です。

0
TheodorosPloumis

実際、あなたが思っているよりも簡単です。任意のブラウザーでF12キーを押して、デバッグコンソールを表示します。これはIE、Firefox、Chromeで機能します。 Operaについてはわかりません。次に、要素ウィンドウでCSSをコメント化します。それでおしまい。

0
devXen

提案されたすべての回答は、そのページの読み込みのためのCSSを単に排除するだけです。ユースケースに応じて、cssをまったくロードしないこともできます。

Chrome開発ツール> [ネットワーク]タブ>問題のスタイルシートを右クリック>リクエストURLをブロック

0
phillyslick