it-swarm.com.de

So deaktivieren Sie CSS im Browser zu Testzwecken

Gibt es eine Möglichkeit, alle externen CSS in einem Browser (Firefox, Chrome ...) zu deaktivieren?

Bei einer langsameren Internetverbindung wird manchmal nur der bloße HTML-Code ohne die CSS-Informationen vom Browser geladen. Es sieht so aus, als ob die Seite auf den Bildschirm gelegt wurde. Das hätten Sie auch bei StackOverflow bemerkt.

Ich möchte sicherstellen, dass meine Webseite auch dann angezeigt wird, wenn die CSS-Dateien nicht geladen sind.

Ich wollte nicht, dass ich externes CSS in Inline konvertieren möchte. Ich möchte jedoch eine Möglichkeit, alle CSS explizit vom Browser zu deaktivieren, damit ich meine Elemente besser und lesbarer positionieren kann.

Ich weiß, dass ich die <link rel = 'stylesheet'> -Einträge entfernen kann, aber was ist, wenn ich viele verknüpfte Seiten habe?

96
ATOzTOA

Das Web Developer Plugin für Firefox und Chrome kann dies tun

Nachdem Sie das Plugin installiert haben, ist die Option im CSS-Menü verfügbar. Zum Beispiel CSS > Disable Styles > Disable All Styles 

Alternativ können Sie bei aktivierter Entwickler-Symbolleiste Alt+Shift+A drücken.

53
JoelKuiper

In Chrome/Chromium können Sie dies in der Entwicklerkonsole tun.

  1. Rufen Sie die Entwicklerkonsole entweder über Strg-Umschalt-j oder über Menü-> Extras-> Entwicklerkonsole auf.
  2. Navigieren Sie in der Entwicklerkonsole zur Registerkarte Quellen.
  3. In der oberen linken Ecke dieser Registerkarte befindet sich ein Symbol mit einem Dreiecksymbol. Klick es an.
  4. Wechseln Sie zu <Domäne> → css → <css-Datei, die Sie entfernen möchten>
  5. Markieren Sie den gesamten Text und klicken Sie auf "Löschen".
  6. Spülen und wiederholen Sie für jedes Stylesheet, das Sie deaktivieren möchten.
60
David Baucum

Firefox (Win und Mac)

  • Wählen Sie über die Menüleiste: "Ansicht"> "Seitenstil"> "Kein Stil"
  • Wählen Sie in der Web Developer-Symbolleiste Folgendes aus: "CSS"> "Stile deaktivieren"> "Alle Stile"

Wenn die Web Dev-Symbolleiste installiert ist, können Benutzer die folgenden Tastenkombinationen verwenden: Command + Shift + S (Mac) und Control + Shift + S (Sieg)

  • Safari (Mac): Wählen Sie in der Menüleiste "Entwickeln"> "Stile deaktivieren".
  • Opera (Win): Wählen Sie über das Menü "Seite"> "Stil"> "Benutzermodus"
  • Chrome (Win): Wählen Sie über das Zahnradsymbol die Registerkarte "CSS"> "Alle Stile deaktivieren".
  • Internet Explorer 8: Wählen Sie in der Menüleiste "Ansicht"> "Stil"> "Kein Stil"
  • Internet Explorer 7: über das Menü IE Developer Toolbar: Deaktivieren> Alle CSS
  • Internet Explorer 6: Wählen Sie über die Web Accessibility Toolbar "CSS"> "CSS deaktivieren"
19
Aravind NC

Dieses Skript funktioniert für mich (Hat Tipp zu 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]); };

der Inline-Stil bleibt jedoch erhalten

15
renergy

Um die Idee von scrappedocola/renergy zu erweitern, können Sie das JavaScript in ein Bookmarklet umwandeln, das gegen den javascript:-uri ausgeführt wird, so dass der Code problemlos auf mehreren Seiten wiederverwendet werden kann, ohne dass die Dev-Tools geöffnet werden müssen Zwischenablage. 

Führen Sie einfach das folgende Snippet aus und ziehen Sie den Link in Ihre Lesezeichen Favoritenleiste:

<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>

  • Ich würde es vermeiden, die tausenden Elemente auf einer Seite mit getElementsByTagName('*') zu durchlaufen und muss jedes einzeln prüfen und entsprechend reagieren.
  • Ich würde es vermeiden, mich auf jQuery zu verlassen, das auf der Seite mit $('style,link[rel="stylesheet"]').remove() vorhanden ist, wenn das zusätzliche Javascript nicht übermäßig umständlich ist.
9
KyleMit

Installieren Sie Adblock Plus und fügen Sie dann in den Filteroptionen die *.css-Regel hinzu (Registerkarte benutzerdefinierte Filter). Die Methode wirkt sich nur auf externe Stylesheets aus. Inline-Stile werden nicht deaktiviert.

Deaktivieren Sie alle externen CSS

Diese Methode macht genau das, was Sie gefragt haben.

9
yakunins

Ein anderer Weg, um @David Baucums Lösung zu erreichen in weniger Schritten:

  1. Rechtsklick -> Element inspizieren
  2. Klicken Sie auf den Namen des Stylesheets, der sich auf Ihr Element auswirkt (rechts neben der Deklaration).
  3. Markieren Sie den gesamten Text und klicken Sie auf "Löschen".

In manchen Fällen könnte es handlicher sein.

4

Da die meisten Antworten hier ziemlich alt zu sein scheinen, finden Sie in den aktuellen Versionen populärer Browser scheinbar keine Informationen zu Menüpunkten.

  • Entwickler-Tools öffnen (CTRL + SHIFT + I)
  • Wählen Sie die Registerkarte Stileditor
  • Dort sollten Sie alle CSS-Quellen in Ihrem Dokument sehen. Sie können jede von ihnen deaktivieren, indem Sie auf das Augensymbol neben ihnen klicken.

 White eye icon = enabled; Gray eye icon = disabled

2

Ich habe es in Chrome Developer Tools ausprobiert und die Methode ist nur gültig, wenn die CSS als externe Dateien enthalten sind und für Inline-Styles nicht funktionieren.

Array.prototype.forEach.call(document.querySelectorAll('link'), (element)=>element.remove());

Oder

var linkElements = document.querySelectorAll('link');
Array.prototype.forEach.call(linkElements, (element)=>element.remove());

Erklärungen

  1. document.querySelectorAll('link') ruft alle Verbindungsknoten ab. Dies gibt ein Array von DOM-Elementen zurück. Beachten Sie, dass dies kein Array-Objekt von Javascript ist. 
  2. Array.prototype.forEach.call(linkElements durchläuft die Verknüpfungselemente 
  3. element.remove() entfernt das Element aus dem DOM

Ergebnis in einer einfachen HTML-Seite

2
Vetrivel

Für Seiten, die auf externem CSS basieren (die meisten Seiten heutzutage), besteht eine einfache und zuverlässige Lösung darin, das Element head zu töten:

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

Klicken Sie mit der rechten Maustaste auf diese Seite (in Chrome/Firefox), wählen Sie Prüfen , fügen Sie den Code in die devtools-Konsole ein und drücken Sie Geben Sie ein.

Eine Bookmarklet-Version desselben Codes, den Sie als URL eines Lesezeichens einfügen können:

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

Wenn Sie nun in Ihrer Favoritenleiste auf das Lesezeichen klicken, wird die Seite ohne CSS-Stylesheets angezeigt.

Das Entfernen des Kopfes funktioniert nicht für Seiten, die Inline-Stile verwenden.

Wenn Sie Safari unter MacOS verwenden, gehen Sie wie folgt vor:

  1. Öffnen Sie die Safari-Einstellungen (cmd+,) und aktivieren Sie auf der Registerkarte Erweitert das Kontrollkästchen "Entwicklungsmenü in Menüleiste anzeigen".
  2. Im Menü Entwickeln finden Sie nun die Option Stile deaktivieren .
2
ccpizza

Die einfachste Möglichkeit unter Firefox ist der Menübefehl Ansicht> Seitenstil> Kein Stil. Dadurch werden jedoch auch die Auswirkungen einiger HTML-Markup-Effekte deaktiviert. Daher ist die Verwendung von Plugins, wie von @JoelKuiper vorgeschlagen, normalerweise besser. Sie bieten mehr Flexibilität (z. B. das Ausschalten einiger Stylesheets).

1

sie können jede Anforderung (auch für eine einzelne CSS-Datei) vom Inspector mit folgendem Befehl blockieren:
Klicken Sie mit der rechten Maustaste und blockieren Sie die Anforderungs-URL
ohne das Deaktivieren anderer CSS-Dateien> https://umaar.com/dev-tips/68-block-requests/ Dies ist eine Standardinspektorfunktion, es sind keine Plugins oder Tricks erforderlich

1
Pdor

Bei der Prüfung von HTML mit dem Browser-Entwicklungstool (zB Chrome Devtools) suchen Sie das <head>-Element und löschen es überhaupt.

Beachten Sie, dass dieses js auch entfernen wird, aber für mich ist es der schnellste Weg, um zu erhalten die Seite nackt.

0

Eigentlich ist es einfacher als Sie denken. In allen Browsern drücken Sie F12, um die Debug-Konsole aufzurufen. Dies funktioniert für IE, Firefox und Chrome. Nicht sicher über Opera. Dann kommentieren Sie das CSS in den Elementfenstern aus. Das ist es.

0
devXen

Alle vorgeschlagenen Antworten beseitigen lediglich die CSS für das Laden dieser Seite. Abhängig von Ihrem Anwendungsfall möchten Sie möglicherweise die CSS überhaupt nicht laden:

Chrome Dev Tools> Registerkarte "Netzwerk"> Klicken Sie mit der rechten Maustaste auf das betreffende Stylesheet> Anforderungs-URL blockieren

0
phillyslick