So deaktivieren Sie CSS im Browser zu Testzwecken

Kann ich auf irgendeine Weise alle externen CSS in einem Browser (Firefox, Chrome ...) deaktivieren?

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

Ich möchte sicherstellen, dass meine Webseite auch dann in Ordnung ist, 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, das gesamte CSS im Browser explizit zu deaktivieren, damit ich meine Elemente besser und besser lesbar positionieren kann.

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

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

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

Alternativ können Sie bei aktivierter Entwicklersymbolleiste drücken Alt+Shift+A.

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

1. Rufen Sie die Entwicklerkonsole entweder mit Strg-Umschalt-J oder mit 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 Offenlegungsdreieck. Klick es an.
4. Navigieren 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.

Firefox (Win und Mac)

• Wählen Sie über die Menüsymbolleiste: "Ansicht"> "Seitenstil"> "Kein Stil"
• Wählen Sie in der Symbolleiste des Webentwicklers: "CSS"> "Stile deaktivieren"> "Alle Stile"

Wenn die Web Dev Toolbar installiert ist, können Benutzer diese Tastaturkürzel verwenden: Command+ Shift+ S(Mac) und Control+ Shift+ S(Win)

• Safari (Mac): Wählen Sie über die Menüsymbolleiste "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 über die Menüsymbolleiste "Ansicht"> "Stil"> "Kein Stil".
• Internet Explorer 7: Über das Menü der IE Developer Toolbar: Deaktivieren> Alle CSS
• Internet Explorer 6: Wählen Sie in der Symbolleiste für Barrierefreiheit "CSS"> "CSS deaktivieren".

Dieses Skript funktioniert für mich (Hutspitze 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

Wenn Sie die Idee von scrappedocola / renergy erweitern, können Sie das JavaScript in ein Lesezeichen verwandeln , das gegen die javascript:URL ausgeführt wird, sodass der Code problemlos auf mehreren Seiten wiederverwendet werden kann, ohne die Entwicklerwerkzeuge öffnen oder irgendetwas in Ihrer Zwischenablage behalten zu müssen.

Führen Sie einfach das folgende Snippet aus und ziehen Sie den Link zu Ihrer 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 von Elementen auf einer Seite mit zu durchlaufen, und müsste getElementsByTagName('*')jedes einzeln überprüfen und bearbeiten.
• Ich würde es vermeiden, mich auf jQuery zu verlassen, $('style,link[rel="stylesheet"]').remove()wenn das zusätzliche Javascript nicht überwältigend umständlich ist.

Installieren Sie Adblock Plus und fügen Sie dann eine *.cssRegel in den Filteroptionen 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.

Ein weiterer Weg, um die Lösung von @David Baucum in weniger Schritten zu erreichen:

1. Rechtsklick -> Element untersuchen
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 einigen Fällen könnte es handlicher sein.

Da die meisten Antworten hier ziemlich alt zu sein scheinen und auf Menüelemente verweisen, die ich in den aktuellen Versionen gängiger Browser nicht zu finden scheint, gehen Sie in der aktuellen Version der Firefox Developer Edition folgendermaßen vor:

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

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

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

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

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

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

Wenn Sie nun auf das Lesezeichen in Ihrer Favoritenleiste 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 der Menüleiste anzeigen".
2. Jetzt finden Sie im Menü Entwickeln die Option Stile deaktivieren.

Ich habe es in Chrome Developer-Tools versucht und die Methode ist nur gültig, wenn das CSS als externe Dateien enthalten ist und für Inline-Stile nicht funktioniert.

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 Schleifen durch die Verknüpfungselemente
3. element.remove() Entfernt das Element aus dem DOM

Das Ergebnis ist eine einfache HTML-Seite

Sie können jede Anforderung blockieren (auch für eine einzelne CSS - Datei) von Inspektoren mit dem folgenden:
    Rechtsklick> Block URL
ohne andere CSS - Dateien deaktivieren> https://umaar.com/dev-tips/68-block-requests/ Es ist Eine Standard-Inspektorfunktion, keine Plugins oder Tricks erforderlich

In Firefox ist der einfachste Weg der Menübefehl Ansicht> Seitenstil> Kein Stil. Dies schaltet jedoch auch die Auswirkungen einiger HTML-Markups für Präsentationen aus. Daher ist es normalerweise besser, Plugins zu verwenden, wie von @JoelKuiper vorgeschlagen. Sie bieten mehr Flexibilität (z. B. Ausschalten einiger Stylesheets).

Eigentlich ist es einfacher als Sie denken. Drücken Sie in einem beliebigen Browser F12, um die Debug-Konsole aufzurufen. Dies funktioniert für IE, Firefox und Chrome. Ich bin mir nicht sicher über Opera. Kommentieren Sie dann das CSS in den Elementfenstern aus. Das ist es.

Wenn Sie HTML mit dem von Ihnen bevorzugten Browser-Entwicklungstool (z. B. Chrome Devtools) überprüfen, finden Sie das <head> Sie beim Element und löschen Sie es überhaupt.

Beachten Sie, dass dadurch auch js entfernt wird, aber für mich ist es der schnellste Weg, die Seite nackt zu machen .

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

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

Für diejenigen, die kein Plugin oder andere Dinge wollen, können wir die document.styleSheets verwenden, um das CSS zu deaktivieren / aktivieren.

// Code zum Deaktivieren des gesamten CSS

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

Wenn Sie Chrome verwenden, können Sie eine Funktion erstellen und Ihren Snippets hinzufügen. Damit Sie die Konsole verwenden können, um das CSS für alle Sites zu aktivieren / deaktivieren.

// Snippets -> DisableCSS

function disableCss(value = true){
  for (const item in document.styleSheets) {
    document.styleSheets[item].disabled=value;
  }  
}

// in der Konsole

disableCss() // by default is disable
disableCss(false) // to enable