Gibt es eine Möglichkeit, eine Webseite ohne Stile in Chrome anzuzeigen?

25

Unter Firefox können Sie unter Ansicht -> Seitenstil -> Kein Stil eine nicht gestaltete Seite anzeigen. Hilfreich für einige übermäßig JS / Stylesheet-abhängige Sites (zB: Lifehacker).

Gibt es ähnliche Funktionen unter Google Chrome und / oder wo würde ich darauf zugreifen?

Version 19.0.1084.56 / Ubuntu.

google-chrome css dredmorbius
quelle
Die beste Lösung für dieses Problem in Chrome ist die Verwendung von Firefox.
immer

Antworten:

25

Deaktivieren Sie alle CSS-Stylesheets

Da die meisten modernen Seiten alle Stile in externen CSS-Dateien definieren <head>, die im headTag enthalten sind , werden durch das Entfernen des Tags alle Stile (mit Ausnahme der expliziten Inline-Stile und der durch Skripte festgelegten Stile) entfernt. Klicken Sie mit der rechten Maustaste auf eine Seite, wählen Sie Inspizieren aus dem Kontextmenü und fügen Sie dies in die Registerkarte Konsole ein:

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

Und hier ist die Bookmarklet-Version des obigen Codes, die als URL eines Lesezeichens eingefügt werden kann (umschalten der Lesezeichenleiste in Chrome mit ⌘+ shift+ bauf Mac oder ctrl+ shift+ bauf Linux / Windows) :

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

Sie können den obigen Code auch direkt in die Adressleiste eingeben, aber den Hinweis am Ende der Antwort lesen, bevor Sie dies tun. .

Sie <head>können das auch von der Registerkarte devtools Elements entfernen , indem Sie mit der rechten Maustaste auf das Head-Tag klicken und es über das Kontextmenü löschen:

Löschen Sie das Head-Tag in Chrome

HINWEIS: Das Entfernen des Head-Tags ist etwas gewaltsam, da alle Stile, Javascript, Web-Schriftarten usw. gelöscht werden. Wenn der Seiteninhalt mit Javascript gerendert wird, wird höchstwahrscheinlich eine leere Seite angezeigt. Auf den meisten Websites werden wahrscheinlich die erwarteten Ergebnisse erzielt.

Ein häufigerer Anwendungsfall besteht darin, bestimmte störende Elemente auf einer Seite zu entfernen, z. B. Farben, Ränder, iFrames usw. In diesem Fall bietet eines der folgenden Lesezeichen eine präzisere Steuerung.

Entfernen Sie Farben, Hintergründe, Ränder, Abstände und Breiten

Erstellen Sie ein Lesezeichen und fügen Sie das folgende Snippet als URL hinzu:

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

Jetzt können Sie auf Ihr Lesezeichen klicken , um den CSS-Stil auf der aktuellen Seite lesbarer zu gestalten.

Hinweis: Tatsächlich kann eine Seite einen <style>Block innerhalb des <body>Tags haben - der HTML5-Standard erlaubt dies und die meisten Browser unterstützen dies. Bisher ist dies keine gängige Praxis, aber wenn sich Web-Frameworks weiterentwickeln, werden wir möglicherweise im zukünftigen Web mehr „lokale Stylesheets“ sehen.

Wenn Sie lediglich die Lesbarkeit verbessern möchten, bietet das Deaktivieren von CSS möglicherweise nicht die beste Erfahrung. In solchen Fällen liefern die folgenden Lesezeichen möglicherweise bessere Ergebnisse:

Nicht scrollende Kopf- / Fußzeilen entfernen (vergrößert den Lesebereich)

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

Iframes entfernen (tötet die meisten Banner usw.)

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

Dadurch werden auch die meisten eingebetteten Videos, Kommentar-Widgets usw. gelöscht.

Alle Bilder entfernen (Office-Modus durchsuchen)

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

Hinweis: Diese Option muss in Kombination mit der Option "iframes entfernen" oben verwendet werden, da sich die meisten Bannerbilder normalerweise in iframes befinden und dieses Lesezeichen nur mit Dokumenten der obersten Ebene funktioniert.

Die Lesezeichen können auch für Websites verwendet werden, auf denen bei Verwendung von Werbeblockern kein Inhalt angezeigt wird.

Mit dem Bookmarklet Builder können Sie die Minimierung des Codes aufheben ( Schaltfläche " Formatieren" ), ihn gemäß Ihren Anforderungen bearbeiten und ihn auf einen Wert zurücksetzen ( Schaltfläche " Komprimieren" ), den Sie als Lesezeichen-URL einfügen können.

Die oben aufgeführten Lesezeichen funktionieren auch auf den meisten mobilen Webbrowsern unter iOS und Android. In mobilen Browsern wird kein Javascript über die Adressleiste ausgeführt. Sie können jedoch ein Lesezeichen hinzufügen, den js-Code als URL einfügen, z. B. eine Bezeichnung festlegen cleanund es dann ausführen, indem Sie auf das Element im Lesezeichenmenü tippen (für IOS-Safari). oder cleanin die Adressleiste eingeben und dann auf das entsprechende Lesezeichen in der Dropdown-Liste "Autosuggest" tippen. Dies kann die Lesbarkeit für Seiten verbessern, die keinen Lesemodus haben .

HINWEIS: Wenn Sie die oben genannten Lesezeichen kopieren und direkt in die Adressleiste einfügen, werden Sie feststellen, dass Browser dasjavascript: Präfix entfernen. Dies ist eine Browsersicherheitsfunktion. Wenn Sie die Lesezeichen also direkt über die Adressleiste testen möchten, werden Sie das Präfix entfernen müssen javascript:vor dem js-Code manuell voranstellen .

Chrome-Erweiterungen

Wenn Sie nach einer Chrome-Erweiterung suchen, gibt es uMatrix, in der Sie auf die CSS-Spalte klicken können, um alle CSS und Stile zu deaktivieren, und Web Developer, in dem Sie auf der Registerkarte CSS die Option Alle Stile deaktivieren haben .

ccpizza
quelle
uMatrix (das ich in den letzten Jahren unabhängig entdeckt habe) erledigt den Trick tatsächlich Site für Site (oder Seite oder Domain). Web Developer (unten erwähnt) ist zu übereifrig.
Dredmorbius
7

Dazu können Sie die Web Developer- Erweiterung verwenden:

Bildbeschreibung hier eingeben

Der Hochstapler
quelle
2
Vielen Dank. Das scheint den Trick zu tun. Obwohl Lifehacker immer noch nicht lesbar ist. Funktioniert allerdings in w3m. In der alten Schule rollen wir hier.
Dredmorbius
Hrm. Problem ist, dass dies eine globale Einstellung für alle Sites / Seiten ist. Ich habe gerade ein paar Momente von "WTF !!!" Als ich plötzlich anfing, zu sehen, wie Stilelemente auf verschiedenen Seiten angezeigt / ausgeblendet wurden, wechselte ich zwischen verschiedenen Einstellungen für Web Developer. Es ist also etwas, aber nicht ganz nützlich.
Dredmorbius
@ Dr.EdwardMorbius: Seltsam. Für mich ist das nur vorübergehend. Auch beim Aktualisieren der Seite wird die Standardansicht der Site wiederhergestellt. Aber ich nehme an, dass Sie das auch nicht wollen, oder?
Der Hochstapler
Ja. Das Deaktivieren des Stylesheets für die aktuelle Sitzung ist ausreichend. Das Umschalten von CSS, JS, Cookies usw. für alle Websites ist ausgeschlossen. Leider scheint das so zu sein. Ich würde die Erfahrung als "leicht nervig" beschreiben.
Dredmorbius
2

Es gibt (noch?) Keine Chrome-Version von No Style. Daher müssen Sie eine andere Methode verwenden , z. B. einige der anderen Erweiterungen , mit denen Stile deaktiviert werden können.

Sie können die Erweiterung " Stylesheets deaktivieren" verwenden, um Stylesheets im Allgemeinen zu deaktivieren, oder die Erweiterung " Web Developer", um alle Stile ein- oder auszuschalten. Pendule ist auch eine beliebte Erweiterung für diesen Zweck.

Sie können Stile auch mit den Entwicklertools deaktivieren [1] [2] :

Zahnradsymbol -> Registerkarte CSS -> Alle Stile deaktivieren

Synetech
quelle
Das scheint alle Stylesheets für alle Seiten zu deaktivieren , ohne dass sie auf einer bestimmten Seite aktiviert / deaktiviert werden können. Nicht das, wonach ich suche.
Dredmorbius
Welcher? Es gibt vier Möglichkeiten.
Synetech
Ich sehe kein Erweiterungssymbol. Löschte es.
Dredmorbius
Huh?
Synetech
Im Infobereich rechts neben dem URL-Fenster wurde kein Symbol für die Erweiterung "Stylesheets deaktivieren" angezeigt. Die einzige Möglichkeit, die Einstellungen zu verwalten, bestand darin, in Schraubenschlüssel -> Extras -> Erweiterungen -> Stylesheets deaktivieren -> Optionen zu navigieren. Nicht ... sehr ergodynamisch.
Dredmorbius
1

Wenn Sie dies aus Geschwindigkeitsgründen tun, kann ich eine Alternative vorschlagen: Links 2

Wenn der Browser geöffnet wird, drücken Sie gund geben Sie die URL ein, zu der Sie gehen möchten. Dieser Browser ist leicht auf den Standards, die es unterstützt, aber erstaunlich schnell, auch auf einem sehr alten PC.

Gerry
quelle
1
Es ist eher ein Datenschutz / die Nutzung von JS auf ein Minimum zu beschränken. Ich ziehe w3m der Links- / Links- Familie von Konsolenbrowsern vor - bessere Ergonomie und ich bin ziemlich daran gewöhnt. Ja, ich bin wirklich vertraut damit, wie schnell und leicht Konsolenbrowser sein können. Einige Websites sind jedoch einfach kaputt.
Dredmorbius
1
Erwischt. Ich benutze eigentlich nicht die Konsolenversion, aber die GUI ist genauso schnell. Aber ja, Sie haben recht, manchmal sind die Seiten sehr kaputt. Es wäre großartig, wenn sich alle Seiten anmutig verschlechterten.
Gerry
2
Ich bin dafür bekannt, in extremen Fällen auf Luchs, Sed und Fmt zurückzugreifen. Das bringt Jesuskind zum Weinen.
Dredmorbius
1

Unter Firefox können Sie unter Ansicht -> Seitenstil -> Kein Stil eine nicht gestaltete Seite anzeigen. Hilfreich für einige übermäßig JS / Stylesheet-abhängige Sites (zB: Lifehacker). Gibt es ähnliche Funktionen unter Google Chrome und / oder wo würde ich darauf zugreifen? Version 19.0.1084.56 / Ubuntu. - Dr. Edward Morbius

...

Ja. Das Deaktivieren des Stylesheets für die aktuelle Sitzung ist ausreichend. Das Umschalten von CSS, JS, Cookies usw. für alle Websites ist ausgeschlossen. Leider scheint das so zu sein. Ich würde die Erfahrung als "leicht nervig" beschreiben. - Dr. Edward Morbius

Bei Verwendung der jQuery-Bibliothek unter console(Chromium / Chrome, Firefox, Opera) sollten Autorenstile aus einem HTML-Dokument gelöscht werden:

(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

Dies kann hilfreich sein, um Stile in einem HTML-Dokument ein- oder auszuschalten:

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

Lädt jQuery entweder aus der lokalen Datei oder vom CDN von jQuery in das Dokument, protokolliert den Erfolg, protokolliert den Stilstatus und schaltet Autorenstile mit der Leertaste oder an der Konsole ein oder aus.

Getestet in Chromium / Chrome, Firefox und Opera für lokale und Online-HTML-Dokumente.

guest271314
quelle
1

Mein derzeit bevorzugtes Tool hierfür ist die Browsererweiterung uMatrix , die noch feinere Steuerelemente ermöglicht: Deaktivieren Sie CSS, JS, Bilder oder andere Funktionen, indem Sie die Domain relativ zur aktuellen Website laden. Änderungen können einfach umgeschaltet, dauerhaft gemacht oder als Standardregeln übernommen werden.

Dies und Stylish erfüllen die meisten meiner Anpassungsbedürfnisse als Leser. Der Reader-Modus (Firefox) tendiert dazu, Inhalte mit einheitlichem Stil ziemlich zuverlässig wiederzugeben.

Erweiterung der Frage: Unter Chrome / Android habe ich keine praktikable Option, und die oben vorgeschlagenen Lösungen funktionieren nicht.

dredmorbius
quelle
0

nur eine Zeile Abfragecode ... verwenden 

jQuery("head").empty();

oder in javascripts, die du verwenden kannst 

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

Gehen Sie zu Ihrer Webseite und drücken Sie dann Strg + Umschalt + i. Sie sehen ein Menü, wählen Sie die Konsole aus, fügen Sie diesen document.getElementsByTagName("head")[0].innerText="";Code ein und drücken Sie die Eingabetaste

Vishal Choudhary
quelle
2
Wo würden diese Informationen eingegeben werden?
music2myear
Gehe zu deiner Webseite und drücke dann Strg + Umschalt + i. Du siehst ein Menü, wähle eine Konsole und document.getElementsByTagName("head")[0].innerText="";
füge
Es sollte nicht notwendig sein, Kommentare zu lesen, um eine Antwort zu verstehen. Verwenden Sie die Schaltfläche BEARBEITEN, um diese Informationen zur Antwort selbst hinzuzufügen.
music2myear