web-dev-qa-db-ja.com

ChromeでスタイルなしでWebページを表示する方法はありますか？

Firefoxでは、[表示]-> [ページスタイル]-> [スタイルなし]を選択すると、スタイルのないページを表示できます。過度にJS /スタイルシートに依存するサイト（例：Lifehacker）に役立ちます。

GoogleのChromeで同様の機能はありますか、またはどこにアクセスしますか？

バージョン19.0.1084.56/Ubuntu。

google-chromecss
26
dredmorbius

すべてのCSSスタイルシートを無効にする

最近のほとんどのページでは、<head>に含まれている外部CSSファイルですべてのスタイルが定義されているため、headタグを削除すると、すべてのスタイル（明示的なインラインスタイルとスクリプトで設定されたものを除く）が効果的に削除されます。ページを右クリックし、コンテキストメニューから Inspect を選択して、これを[コンソール]タブに貼り付けます。

document.head.parentNode.removeChild(document.head);

そして、これはブックマークのURLとして貼り付けることができる上記のコードのブックマークレットバージョンです。 （Chromeのブックマークバーを ⌘+shift+b Macまたは ctrl+shift+b Linux/Windows）：

javascript:(function(){document.head.parentNode.removeChild(document.head);})()

上記のコードをアドレスバーに直接入力することもできますが、その前に回答の最後にあるメモを読んでください。。

<head>の削除は、devtoolsの Elements タブから、headタグを右クリックしてコンテキストメニューから削除することでも実行できます。

delete the head tag in Chrome

注：headタグを削除すると、すべてのスタイル、JavaScript、Webフォントなどが強制終了されるため、ブルートフォースのアプローチが少し必要になります。また、ページコンテンツがJavaScriptによってレンダリングされると、空のページが表示される可能性が高くなります。ほとんどのサイトでは、期待どおりの結果が得られるでしょう。

より頻繁な使用例は、色、余白、iframeなど、ページ上の特定の迷惑なものを削除することです。このような場合、次のブックマークレットのいずれかにより詳細な制御が提供されます。

色、背景、マージン、パディング、幅を削除する

ブックマークを作成し、次のスニペットをURLとして追加します。

javascript:(function(){for(i=0;i<document.styleSheets.length;i++){document.styleSheets.item(i).disabled=true;}all=document.getElementsByTagName('*');for(i=0;i<all.length;i++){el=all[i];el.style.cssText='';el.style.width='';el.style.padding='0px';el.style.margin='2px';el.style.backgroundImage='none';el.style.backgroundColor='#fff';el.style.color='#000';}})()

これで、 bookmarklet をクリックして、現在のページのCSSスタイルを読みやすくすることができます。

注：実際、ページの<style>タグ内に<body>ブロックを含めることは可能です-HTML5標準では、これとほとんどのブラウザがサポートしていますそれ。これまでのところ、これは一般的な方法ではありませんが、Webフレームワークが進化するにつれて、将来のWebで「ローカルスタイルシート」が増える可能性があります。

読みやすさを向上させたいだけの場合は、すべてのCSSを無効にしても最適なエクスペリエンスが得られない場合があります。このような場合、以下のブックマークレットがより良い結果をもたらす可能性があります。

スクロールしないヘッダー/フッターを削除する（読み取り領域を増やす）

javascript:(function(){var elems=document.body.getElementsByTagName("*");var len=elems.length;for(var i=0;i<len;i++){var pos=window.getComputedStyle(elems[i],null).getPropertyValue('position');if(pos=='fixed'||pos=='sticky'){var el=elems[i];el.parentNode.removeChild(el);}}})()

Iframeを削除します（ほとんどのバナーを削除します）

javascript:var frames %3D document.getElementsByTagName%28"iframe"%29%3Bfor %28%3Bframes.length%3B%29 %7Bframes%5Bframes.length-1%5D.parentNode.removeChild%28frames%5Bframes.length-1%5D%29%3B%7Dvoid%280%29

これにより、ほとんどの埋め込み動画、コメントウィジェットなども削除されます。

すべての画像を削除（オフィスモードの閲覧）

javascript:(function(){function toArray(c){var a,k;a=new Array;for(k=0;k<c.length;++k)a[k]=c[k];return a;}var images,img,altText;images=toArray(document.images);for(var i=0;i<images.length;++i){img=images[i];altText=document.createTextNode(img.alt);img.parentNode.replaceChild(altText,img)}var alle=document.getElementsByTagName("*");for(var i=0,max=alle.length;i<max;i++){alle[i].style.backgroundImage='none';}})();

注：ほとんどのバナー画像は通常iframe内にあり、このブックマークレットはトップレベルのドキュメントでのみ機能するため、これは上記の Remove iframes と組み合わせて使用​​する必要があります。

ブックマークレットは、広告ブロッカーの使用時にコンテンツを表示しないサイトにも使用できます。

Bookmarklet Builder を使用して、コード（ Format ボタン）を縮小し、必要に応じて編集して、縮小することができますブックマークURLとして貼り付けることができるように（ Compress ボタン）に戻します。

上記のブックマークレットは、iOSとAndroidの両方のほとんどのモバイルWebブラウザーでも機能します。モバイルブラウザはアドレスバーからJavaScriptを実行しませんが、ブックマークを追加したり、jsコードをURLとして貼り付けたり、ラベルを設定したりできます。 cleanを実行してから、ブックマークメニューの項目をタップするか（IOS safari））、またはアドレスバーにcleanと入力して、対応する自動提案ドロップダウンのブックマーク。これにより、読み取りモードがないページの可読性が向上します。

注：上記のブックマークレットをコピーしてアドレスバーに直接貼り付けると、ブラウザはjavascript:プレフィックスを削除します—これはブラウザのセキュリティ機能であるため、アドレスバーから直接ブックマークレットをテストする場合は、 jsコードの前に手動でjavascript:を追加する必要があります。

Chrome拡張機能

chrome拡張機能を探している場合は、 uMatrix があり、CSS列をクリックしてすべてのCSSとスタイルを無効にすることができます。 Web Developer [CSS]タブの下にオプション Disable All Styles があります。

27
ccpizza

Web Developer 拡張を使用できます：

enter image description here

7
Der Hochstapler

Chrome No Style （まだ？）のバージョンがないため、 another method を使用する必要があります。 その他の拡張機能 スタイルを無効にできます。

Disable Stylesheets 拡張機能を使用してスタイルシートを一般的に無効にするか、または Web Developer 拡張機能を使用してすべてのスタイルのオンとオフを切り替えることができます。 Pendule もこの目的でよく使用される拡張機能です。

開発者ツールでスタイルを無効にすることもできます [1][2]：

歯車アイコン-> [CSS]タブ-> [すべてのスタイルを無効にする]

2
Synetech

あなたが速度の理由でこれをしているなら、私は代替案を提案できます： Links 2

ブラウザが開いたら、 g 移動したいURLを入力します。このブラウザは、サポートする標準では軽量ですが、非常に古いPCでも驚くほど高速です。

1
Gerry

Firefoxの下で、[表示]-> [ページスタイル]-> [スタイルなし]を選択すると、スタイルのないページを表示できます。過度にJS /スタイルシートに依存するサイト（例：Lifehacker）に役立ちます。 GoogleのChromeで同様の機能はありますか、またはどこにアクセスしますか？バージョン19.0.1084.56/Ubuntu。 -エドワードモルビウス博士

...

はい。現在のセッションでスタイルシートをオフに切り替えるだけで十分です。すべてのサイトでCSS、JS、Cookieなどを切り替えるのは簡単です。残念ながらそれは起こっていたようです。私はこの体験を「やや煩わしい」と表現します。 -エドワードモルビウス博士

JQueryライブラリを使用して、console（Chromium/Chrome、Firefox、Opera）でHTMLドキュメントから作成者のスタイルをクリアする必要があります。

(function clearStyle(){
c='';$('link[rel=stylesheet]').attr('href',c);
$('style').html(c);$('*').attr('style',c);})()

https://github.com/guest271314/toggleStyles/blob/master/clearStyle.min.js

HTMLドキュメントでスタイルのオンとオフを切り替えるには、これが役立つ場合があります。

https://github.com/guest271314/toggleStyles/blob/master/toggleStyles.js

ローカルファイルまたはjQueryのCDNからjQueryをドキュメントにロードし、成功をログに記録し、スタイルステータスをログに記録し、スペースバーキーダウンまたはコンソールで作成者スタイルのオンとオフを切り替えます。

Chromium/Chrome、Firefox、およびOpera=ローカルおよびオンラインのHTMLドキュメントでテスト済み。

1
guest271314

このために現在私が好むツールは Matrixブラウザー拡張機能 です。これにより、現在のWebサイトに対してドメインをロードすることにより、CSS、JS、画像、またはその他の機能を無効にできます。変更は簡単に切り替えたり、永続化したり、デフォルトのルールとしてキャストしたりできます。

これとスタイリッシュは、読者としてのカスタマイズのほとんどのニーズに対応します。 Reader-Mode（Firefox）は、均一なスタイルのコンテンツをかなり確実に提供する傾向があります。

質問の拡張：Chrome/Androidでは、実行可能なオプションがなく、上記で提案された解決策が機能しません。

1
dredmorbius

1行のjqueryコードのみ...使用

_jQuery("head").empty();
_

またはあなたが使用できるJavaScriptで

_document.getElementsByTagName("head")[0].innerText="";
_

ウェブページに移動してctrl + shift + iを押すと、メニュー選択コンソールが表示され、このdocument.getElementsByTagName("head")[0].innerText="";コードを貼り付けてEnterキーを押します

0
Vishal choudhary