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

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

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

CSSファイルがロードされていない場合でも、私のWebページが正常に表示されることを確認したいと思います。

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

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

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

プラグインをインストールすると、CSSメニューにオプションが表示されます。例えば、CSS > Disable Styles > Disable All Styles

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

Chrome / Chromiumでは、これをデベロッパーコンソールで行うことができます。

1. ctrl-shift-jまたはメニュー->ツール->開発者コンソールのいずれかで開発者コンソールを表示します。
2. 開発者コンソール内で、[ソース]タブを参照します。
3. このタブの左上隅には、開閉用の三角形が付いたアイコンがあります。クリックして。
4. <ドメイン>→css→<削除するcssファイル>に移動します
5. すべてのテキストを強調表示して、削除を押します。
6. 無効にするスタイルシートごとにすすぎ、繰り返します。

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を無効にする]を選択します。

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

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

scrappedocola / renergyのアイデアを拡張すると、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('*')、それぞれを個別にチェックして実行する必要があります。
• $('style,link[rel="stylesheet"]').remove()追加のJavaScriptが圧倒的に煩わしくない場合は、ページに存在するjQueryに依存することは避けます。

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

すべての外部CSSを無効にする

このメソッドは、あなたが要求したとおりのことを行います。

@David Baucumのソリューションをより少ないステップで実現する別の方法：

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

場合によっては便利です。

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

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

外部CSSに依存するページ（最近のほとんどのページ）の場合、単純で信頼できる解決策は、head要素を強制終了することです。

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

このページ（Chrome / Firefoxの場合）を右クリックして[ 検査]を選択し、コードをdevtoolsコンソールに貼り付けてEnterキーを押します。

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

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

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

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

MacOSでSafariを使用している場合：

1. Safariの設定（cmd+ ,）と詳細設定を開きます [ ]タブで[メニューバーに[開発]メニューを表示する]チェックボックスをオンにします。
2. 次に、[ 開発 ]メニューの下に[ スタイルを無効にする ] オプションがあります。

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ページになります

：あなたは、次のとインスペクタから（1つでもCSSファイル用）すべての要求ブロックすることができます
    右クリック>ブロックリクエストURLを
>他のCSSファイルを無効にすることなくhttps://umaar.com/dev-tips/68-block-requests/ にです標準のインスペクター機能、プラグインやトリックは必要ありません

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

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

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

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

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

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

プラグインやその他のものを必要としない人のために、document.styleSheetsを使用してCSSを無効/有効にすることができます。

//すべてのCSSを無効にするコード

for (const item in document.styleSheets) {
  document.styleSheets[item].disabled=false;
}

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