Cascading Style Sheets(CSS) - es ist ein leistungsfähiges Werkzeug, um ein attraktives und modernes Webseitendesign zu erstellen. Manchmal müssen Sie jedoch CSS für verschiedene Zwecke deaktivieren, z. B. um zu überprüfen, wie die Seite ohne Stile aussieht oder um die Ursache für Anzeigeprobleme zu ermitteln.
Google Chrome ist einer der beliebtesten Browser und hat eine einfache Möglichkeit, CSS zu deaktivieren, um eine Seite ohne Stile anzuzeigen. In dieser detaillierten Anleitung erfahren Sie, wie Sie CSS in Chrome deaktivieren, damit Sie diese Funktion für Ihre Bedürfnisse verwenden können.
Schritt 1: Öffnen Sie Google Chrome und navigieren Sie zu der Webseite, für die Sie CSS deaktivieren möchten.
Schritt 2: Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Seite und wählen Sie im geöffneten Kontextmenü die Option "Überprüfen". Dadurch wird das Entwickler-Dashboard geöffnet.
Schritt 3: Suchen Sie in der Entwicklerleiste nach der oberen Symbolleiste, in der sich das Symbol "Toggle Device Toolbar" befindet. Klicken Sie auf dieses Symbol.
Schritt 4: Nachdem Sie auf das Symbol "Toggle Device Toolbar" geklickt haben, ändert sich die obere Symbolleiste und Sie sehen neue Schaltflächen. Eine dieser Schaltflächen ist "CSS umschalten". Klicken Sie auf diese Schaltfläche.
Nachdem Sie diese Schritte ausgeführt haben, wird die Webseite ohne CSS geladen, und Sie können sehen, wie sie ohne Stile aussieht. Dies kann für Entwickler, Designer und diejenigen nützlich sein, die wissen möchten, welche Seitenelemente stilisiert sind und wie sich Änderungen am CSS auf die Anzeige auswirken.
Jetzt, da Sie wissen, wie Sie CSS in Google Chrome deaktivieren können, können Sie diese Funktion für Ihre eigenen Bedürfnisse verwenden. Und denken Sie daran, dass das Aktivieren und Deaktivieren von CSS nützliche Tools sind, die Ihnen helfen, besser zu verstehen, wie Webseiten erstellt werden, und Ihnen mehr Kontrolle über die Anzeige der Seite geben.
Schritt 1: Öffnen Sie den Webentwickler in Chrome
Um CSS im Chrome-Browser zu deaktivieren, müssen Sie den integrierten Webentwickler (DevTools) öffnen. Dazu können Sie eine der folgenden Methoden verwenden:
Methode 1:
Klicken Sie mit der rechten Maustaste auf einen beliebigen Bereich der Seite und wählen Sie im Kontextmenü die Option "Element untersuchen" aus.
Der Webentwickler wird unten oder an der Seite des Browserfensters geöffnet (abhängig von Ihrer Konfiguration).
Methode 2:
Klicken Sie oben rechts im Browserfenster auf das Symbol für die drei Punkte (vertikal oder horizontal) und wählen Sie im Dropdown-Menü "Weitere Tools" und dann "Entwicklertools" aus.
Der Webentwickler wird in einem separaten Fenster oder Tab geöffnet.
Sobald der Webentwickler geöffnet ist, können Sie mit dem nächsten Schritt fortfahren - CSS deaktivieren.
Schritt 2: Gehe zur Registerkarte "Elemente"
Nachdem Sie die Entwicklertools geöffnet haben, müssen Sie zur Registerkarte "Elemente" wechseln. Um dies zu tun, wechseln Sie einfach zu der entsprechenden Registerkarte, indem Sie mit der linken Maustaste darauf klicken.
Auf der Registerkarte "Elemente" sehen Sie den Quellcode der Webseite. Hier können Sie die Struktur der Seite und alle ihre Elemente sehen - Tags, Klassen, IDs und andere Attribute.
Um CSS-Stile zu deaktivieren, können Sie die entsprechenden CSS-Regeln vorübergehend entfernen oder deaktivieren. Suchen Sie einfach das gewünschte Element oder den gewünschten Stil im Seitenquellcode und klicken Sie mit der rechten Maustaste darauf. Wählen Sie dann die Option "Als HTML bearbeiten" oder "Als Text bearbeiten". Jetzt können Sie CSS-Regeln entfernen oder kommentieren, um sie beim Debuggen oder Analysieren einer Webseite zu deaktivieren.
Schritt 3: Suchen und Deaktivieren von Webseitenstilen
Gehen Sie folgendermaßen vor, um Webseitenstile in Google Chrome zu deaktivieren:
- Klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie "Element untersuchen".
- Die Symbolleiste "Elements" (Elemente) wird unten auf dem Bildschirm mit einer Liste des HTML-Codes der Webseite angezeigt.
- Suchen Sie auf der rechten Seite der Werkzeugleiste die Registerkarte "Styles" (Stile) und klicken Sie darauf.
- Suchen Sie nach dem Element, dessen Stile Sie deaktivieren möchten. Dies kann das gesamte Element sein, z. B. ein Tag
oder , oder die Klasse, die im Attribut "class" des Elements angegeben ist.
- Deaktivieren Sie das Kontrollkästchen rechts neben dem Namen des Elements oder der Klasse, um seine Stile zu deaktivieren. Wenn Sie dies tun, werden Sie sehen, dass die Änderungen sofort auf der Webseite angewendet werden.
Wenn Sie alle Stile auf der gesamten Webseite deaktivieren möchten, deaktivieren Sie das Kontrollkästchen rechts neben dem Tag in der Element-Symbolleiste.
Nachdem Sie die Stile deaktiviert haben, können Sie die Webseite ohne externes Design anzeigen, was für die Analyse ihrer Struktur, das Debagging und das Testen nützlich sein kann.
Schritt 4: Überprüfen Sie das Ergebnis
Schritt 4. Schließen Sie die Registerkarte Einstellungen und kehren Sie zu der Webseite zurück, die Sie ohne CSS überprüfen möchten.
Jetzt sollten Sie sehen, dass die Webseite angezeigt wird, ohne CSS anzuwenden. Der gesamte visuelle Stil, die Farben, Schriftarten und das Layout der Elemente können anders aussehen oder ohne CSS weniger lesbar werden.
Schritt 5: CSS wieder aktivieren
Wenn Sie zur normalen Anzeige der Webseite zurückkehren und CSS aktivieren möchten, können Sie die folgenden Möglichkeiten nutzen:
1. Klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie "Prüfen".
2. Suchen Sie im geöffneten Entwicklerwerkzeug nach der Registerkarte "Styles" oder "Styles".
3. Deaktivieren Sie die Option "Alle Stile deaktivieren" oder "Alle Stile deaktivieren".
4. Speichern Sie die Änderungen, und schließen Sie das Entwicklerwerkzeug.
Die Seite wird nun unter Berücksichtigung ihrer ursprünglichen Stile angezeigt.
Anmerkung: Wenn Sie also Probleme mit der Geschwindigkeit haben, wird empfohlen, CSS nur für die erforderliche Zeit zu deaktivieren.
