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


25

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

GoogleのChromeに同様の機能はありますか、および/またはどこからアクセスできますか?

バージョン19.0.1084.56 / Ubuntu。


Chromeでこれを回避する最善の方法は、Firefoxを使用することです。
wha7ever-モニカを

回答:


25

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

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

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

そして、ここでは、ブックマークのURLとして貼り付けることができ、上記のコードのブックマークレット版である(とChromeのブックマークバートグルは+ shift+ bMacのかctrl+ shift+ bのLinux / Windowsの場合)

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

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

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

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';}})()

ブックマークレットをクリックして、現在のページの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内にあり、このブックマークレットはトップレベルのドキュメントでのみ機能するため、これは上記のiframeの削除と組み合わせて使用​​する必要があります。

ブックマークレットは、広告ブロッカーが使用されている場合にコンテンツを表示しないサイトにも使用できます。

Bookmarklet Builderを使用して、コードを縮小し([ フォーマット ]ボタン)、必要に応じて編集し、ブックマークURLとして貼り付けることができるものに縮小します([ 圧縮 ]ボタン)。

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

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

Chrome拡張機能

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


uMatrix(私は独立した年に独自に発見しました)は実際に、サイトごと(またはページ、またはドメイン)ごとにトリックを行います。Web開発者(下記を参照)は熱心すぎる。
-dredmorbius

7

そのためにWeb Developer拡張機能を使用できます。

ここに画像の説明を入力してください


2
ありがとう。これでうまくいくようです。Lifehackerはまだ読めませんが。w3mでも動作します。古い学校はここで転がる方法です。
-dredmorbius

ふむ 問題は、これがすべてのサイト/ページのグローバル設定であるということです。「WTF !!!」のいくつかの瞬間を経験しました。さまざまなWeb開発者設定を切り替えたときに、さまざまなページからスタイリング要素が突然表示/非表示になり始めました。したがって、完全にではありませんが、多少役立ちます。
-dredmorbius

@ Dr.EdwardMorbius:奇妙な。私にとって、これは一時的なものです。ページを更新しても、サイトのデフォルトビューに戻ります。しかし、私はそれもあなたが望むものではないと思いますか?
デアホッホスタプラー

はい。現在のセッションのスタイルシートをオフに切り替えるだけで十分です。すべてのサイトでCSS、JS、Cookieなどを切り替えるのは簡単です。残念ながら、それは何が起こっていたかのようです。私はこの経験を「穏やかに迷惑な」ものとして説明します。
-dredmorbius

2

No Styleの Chromeバージョンはありません(まだ?)ので、スタイルを無効にできる他の拡張機能など、別の方法を使用する必要があります。

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

Developers Tools [1] [2]でスタイルを無効にすることもできます。

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


これは、すべてのページのすべてのスタイルシートを無効にするように見えますが、特定のページでスタイルシートを有効/無効にすることはできません。私が探しているものではありません。
-dredmorbius

どれ?4つのオプションがあります。
Synetech

拡張機能アイコンが表示されません。削除しました。
-dredmorbius

え?
Synetech

URLウィンドウの右側の通知領域に「スタイルシートを無効にする」拡張機能のアイコンがありませんでした。設定を管理できる唯一の方法は、レンチ->ツール->拡張機能->スタイルシートの無効化->オプションをナビゲートすることでした。ではない...非常に人間工学的。
-dredmorbius

1

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

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


1
JSの使用を最小限に抑え、プライバシーを保護します。コンソールブラウザーのlink / elinksファミリーよりもw3mを好む傾向があります。人間工学に優れており、かなり慣れています。ええ、しかし、私はコンソールブラウザーがどれほど高速で軽量であるかについて本当によく知っています。ただし、一部のサイトは単純に壊れています。
-dredmorbius

1
わかった。私は実際にはコンソール版を使用しませんが、GUIはそれと同じくらい高速です。しかし、ええ、あなたは正しいです、時々ページは非常に壊れています。すべてのページが正常に劣化した場合、それは素晴らしいことです。
ジェリー

2
極端な場合には、lynx、一部のsed、および 'fmt'に頼ることが知られています。これは赤ん坊のイエスを泣かせます。
dredmorbius

1

Firefoxでは、[表示]-> [ページスタイル]-> [スタイルなし]を使用すると、スタイルのないページを表示できます。過度にJS /スタイルシートに依存するサイト(例:Lifehacker)に役立ちます。GoogleのChromeに同様の機能はありますか、および/またはどこからアクセスできますか?バージョン19.0.1084.56 / Ubuntu。-エドワード・モルビウス博士

...

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

console(Chromium / Chrome、Firefox、Opera)のjQueryライブラリを使用して、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をロードし、成功をログに記録し、スタイルステータスをログに記録し、スペースバーキーダウンまたはコンソールで作成者スタイルをオンまたはオフに切り替えます。

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


1

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

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

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


0

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

jQuery("head").empty();

またはJavaScriptで使用できます

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

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


2
この情報はどこに入力されますか?
music2myear

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

答えを理解するためにコメントを読む必要はないはずです。この情報を回答自体に追加するには、[編集]ボタンを使用してください。
music2myear
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.