So verwenden Sie Google Chrome zum Debuggen von CSS

Das Inspect Element Tool ist großartig, wenn es darum geht, Ihre Webseiten in Echtzeit zu debuggen. Sie können dieses Tool verwenden, um das Design einer Website in der Vorschau anzuzeigen und zu ändern. Außerdem können Sie dies tun, ohne die Seite neu laden zu müssen, und Ihre CSS-Änderungen werden sofort angezeigt.

In diesem Artikel wird erläutert, wie CSS-Klassen und ihre angewendeten Stile im Fenster „Element prüfen“ angezeigt werden. Es wird auch behandelt, wie Sie dies verwenden können, um Änderungen, die Sie an Ihrem CSS vornehmen, in Echtzeit in der Vorschau anzuzeigen.

Inspect Element in Google Chrome öffnen

Sie können jede beliebige Website besuchen und das Fenster „Inspect Element“ öffnen, um zu sehen, wie ihr HTML- oder CSS-Code aussieht. Dieses Tutorial verwendet eine Musterseite demonstrieren.

Sie können das Fenster „Inspect Element“ in Google Chrome öffnen, indem Sie auf drücken F12 Schlüssel. Sie können auch mit der rechten Maustaste auf eine beliebige Stelle auf der Seite klicken und auf klicken Prüfen.

Das Fenster Element prüfen öffnet sich mit dem HTML-Code für den Teil der Website, auf den Sie mit der rechten Maustaste geklickt haben. Hier können Sie auch Website-Text mit Google Chrome bearbeiten.

Die Registerkarte "Stile" im Fenster "Element prüfen".

Im Fenster „Inspect Element“ selbst unter „ Elemente Registerkarte gibt es einen Ort, an dem sowohl der HTML- als auch der CSS-Code angezeigt werden können. Sie können den HTML-Code auf der linken Seite des Fensters „Inspect Element“ sehen. Den CSS-Code finden Sie rechts unter der Stile Tab.

Nehmen wir an, Sie hätten ein HTML-Element mit einer Klasse namens "card-padding", auf das rechte und linke Auffüllung angewendet wurde:

.card-padding {
 Polsterung rechts: 0vh;
 Polsterung links: 0vh;
}

Wenn Sie diese Website im Browser in der Vorschau angezeigt haben, können Sie die auswählen div -Element mit der Klasse „card-padding“. Jedes Styling, das auf die Klasse „card-padding“ angewendet wird, wird rechts unter angezeigt Stile Tab.

Wenn Sie den Mauszeiger über ein Element in der HTML-Codeansicht bewegen, wird dieser Teil der Webseite im Webbrowser hervorgehoben. Der HTML-Elementtyp wird zusammen mit allen Klassennamen auch in einem Dialogfeld neben dem Element angezeigt.

In diesem Fall sehen Sie den div-Container mit den Klassennamen „row“, „card-padding“ und „pb-5“ auf der Seite hervorgehoben.

So nehmen Sie Änderungen am CSS in Echtzeit vor

Sie können das CSS direkt auf der Registerkarte „Stile“ ändern:

1. Verwenden Diese Internetseite, klicken Sie mit der rechten Maustaste auf die erste Überschrift.
2. Auf diese spezielle h4-Überschrift sehen Sie eine darauf angewendete Klasse namens "text-grey" mit der Farbe #8a8a8a.
3. Ändern Sie die Farbe stattdessen in etwas anderes, z. B. Orange. Sie möchten nur den Wert selbst ändern und nicht den Namen der Eigenschaft "Farbe".
4. Sie werden sehen, dass sich die Überschrift von dunkelgrau zu orange ändert.
5. Wenn Sie einen bestimmten CSS-Stil deaktivieren möchten, deaktivieren Sie das Kontrollkästchen links neben dem Stil.
6. Sie können dem ursprünglichen Satz auch weitere Stile hinzufügen. Klicken Sie direkt unter oder rechts neben einer Eigenschaft, um eine neue hinzuzufügen. Beim Hinzufügen neuer Stile sollten Sie die gleiche Syntax wie in einer normalen CSS-Datei verwenden.
7. Wenn Sie eine Vorschau einer lokalen Website anzeigen, können Sie weitere CSS-Änderungen vornehmen, bis Sie dem erforderlichen Look-and-Feel für Ihre Benutzeroberfläche näher gekommen sind. Danach können Sie die CSS-Änderungen, die Sie vorgenommen haben, wieder in Ihren lokalen Code kopieren.

So ändern Sie CSS aus Bibliotheken oder Frameworks von Drittanbietern

Sie können auch Änderungen an HTML-Elementen vornehmen, wenn Sie Bibliotheken oder Frameworks von Drittanbietern wie Bootstrap verwenden.

1. Verwenden Diese Internetseite, klicken Sie mit der rechten Maustaste auf eine der Bootstrap-Schaltflächen auf der Seite.
2. Sie sehen zwei Klassen, die auf die Schaltfläche angewendet werden, „btn“ und „btn-primary“. Bootstrap hat bereits ein eigenes Styling für diese beiden Klassen. Die Farben, die als Hintergrund- und Randfarben verwendet werden, sind #007bff. Ändern Sie dies in etwas anderes, z. B. Violett.
3. Wenn Sie eine Vorschau einer lokalen Website anzeigen, können Sie Ihre neuen Änderungen wieder in Ihren lokalen Code einfügen. Abhängig von der Reihenfolge Ihres CSS müssen Sie dies möglicherweise tun Verwenden Sie einen spezifischeren CSS-Selektor. Stellen Sie dem Selektor beispielsweise „.btn“ voran. Dadurch wird das ursprüngliche Bootstrap-Design überschrieben.

   .btn.btn-primär {
    Hintergrundfarbe: violett;
    Randfarbe: violett;
   }

Was bedeutet element.style auf der Registerkarte "Stile"?

Jedes HTML-Element, das Sie im Fenster „Element prüfen“ markieren, hat einen element.styles-Block. Dies ist das Äquivalent zum Hinzufügen von Inline-Styling zum HTML-Element, anstatt es mit einem Selektor anzusprechen.

1. Klicken Sie mit der rechten Maustaste auf ein HTML-Element. Fügen Sie dem Abschnitt element.style beliebige Stile hinzu, z. B.:

   Farbe: weißer Rauch;

2. Sie werden sehen, dass sich auch der Code für das HTML-Element geändert hat. Der Code innerhalb des HTML-Elements hat jetzt die neue Zeile:

   Stil="Farbe: weißer Rauch;"

So erben untergeordnete HTML-Elemente das Styling

Wenn Sie zwei unterschiedliche Stilwerte auf ein übergeordnetes Element und ein untergeordnetes Element angewendet haben, hat der Wert im untergeordneten Element Vorrang.

1. Verwenden Diese Internetseite, klicken Sie mit der rechten Maustaste auf eine beliebige Stelle am äußeren Rand der Website.
2. Konzentrieren Sie sich im Abschnitt „HTML“ des Fensters „Element prüfen“ auf zwei bestimmte HTML-Elemente. Es gibt ein übergeordnetes div-Element, auf das eine "content"-Klasse angewendet wird. Dieses HTML-Element hat ein untergeordnetes h4-Element, auf das eine „text-grey“-Klasse angewendet wird.
3. Wählen Sie das untergeordnete h4-HTML-Element aus und deaktivieren Sie das Farbstyling in der Klasse „text-grey“.
4. Wählen Sie das übergeordnete HTML-Element mit der Klasse „Inhalt“ aus. Fügen Sie der Klasse den folgenden CSS-Stil hinzu:

   Farbe Rot;

   Der gesamte Text innerhalb des übergeordneten Div wird rot. Diese Änderung wird auch auf die untergeordneten Elemente übertragen, was bedeutet, dass h4 auch eine rote Farbe hat.
5. Wählen Sie das untergeordnete h4-HTML-Element aus und fügen Sie der Klasse „text-grey“ einen neuen Stil hinzu:

   Farbe grün;

   Dadurch wird das Styling aller übergeordneten Klassen überschrieben. Das h4-HTML-Element wechselt von Rot zu Grün.
6. Sie sehen auch einen durchgestrichenen Text, wenn Sie sich das Styling für die Klasse „Inhalt“ ansehen. Dies bestätigt, dass das untergeordnete h4-Element die Farbe des übergeordneten Elements überschreibt.

Die Vorteile des Debuggens Ihres CSS im Browser

Das Debuggen von CSS in Ihrem Browser kann viel Zeit sparen und Ihren Codierungs-Workflow beschleunigen. Dies gilt insbesondere, wenn Sie in Echtzeit sehen müssen, wie sich Ihre neuen CSS-Änderungen auf die Benutzeroberfläche Ihrer Website auswirken.

Sie können diese Technik verwenden, anstatt Änderungen an Ihrem lokalen Code vorzunehmen und Ihre App neu zu laden. Dies erspart Ihnen das Raten, welche CSS-Werte funktionieren würden, da Sie jetzt Ihre UI-Änderungen anzeigen können, während Sie sie vornehmen.

Sie können im Fenster „Element prüfen“ Änderungen vornehmen, bis Sie Ihrem gewünschten Design nahe kommen. Anschließend können Sie den Code aus dem Fenster „Inspect Element“ zurück in Ihren lokalen Code kopieren. Sie können Ihre App trotzdem erneut ausführen, um zu testen, ob Ihre neuen CSS-Änderungen noch funktionieren.

In diesem Tutorial wurden die Grundlagen zum Debuggen des CSS einer Website mithilfe des Fensters „Element prüfen“ behandelt, einschließlich der Frage, wo das CSS auf der Registerkarte „Stile“ zu finden ist.

Außerdem wurde behandelt, wie Sie Änderungen am CSS vornehmen und die visuellen Änderungen an der Benutzeroberfläche in Echtzeit anzeigen können. Hoffentlich verstehen Sie auch, wie Sie Änderungen vornehmen, wenn das CSS eine Bibliothek eines Drittanbieters verwendet, und wie die Vererbung von Stilen funktioniert.

Es gibt viele andere interessante Dinge, die Sie mit dem Fenster „Element prüfen“ tun können.

7 spielerische Dinge, die Sie mit Inspect Element tun können

Lesen Sie weiter

Über den Autor