Debugging CSS

Manchmal stoen Sie beim Schreiben von CSS auf ein Problem, bei dem Ihr CSS nicht das zu tun scheint, was Sie erwarten. Vielleicht glauben Sie, dass ein bestimmter Selektor ein Element treffen sollte, aber nichts passiert, oder eine Box hat eine andere Gre als erwartet. Dieser Artikel gibt Ihnen Hinweise, wie Sie ein CSS-Problem debuggen knnen, und zeigt Ihnen, wie die in allen modernen Browsern enthaltenen DevTools Ihnen helfen knnen, herauszufinden, was vor sich geht.

Voraussetzungen:	Grundlegende HTML-Syntax, Grundlagen der CSS-Stilgestaltung (behandelt in den vorherigen Lektionen dieses Moduls!)
Lernziele:	Verwenden Sie den HTML-Validator, um festzustellen, ob Sie ungltiges Markup auf Ihrer Seite haben, das CSS-Probleme verursacht. Verwenden Sie den CSS-Validator, um schlecht formatierten CSS-Code zu berprfen. Verwenden Sie die Entwicklertools des Browsers, um die auf HTML-Elemente auf einer Seite angewendeten CSS zu inspizieren. ndern Sie das angewendete CSS, um herauszufinden, welche nderungen erforderlich sind, um das gewnschte Ergebnis zu erzielen. Dazu gehrt das Aktivieren und Deaktivieren von Deklarationen, ndern von Werten und Hinzufgen neuer Deklarationen.

Voraussetzungen:

Grundlegende HTML-Syntax, Grundlagen der CSS-Stilgestaltung (behandelt in den vorherigen Lektionen dieses Moduls!)

Lernziele:

Verwenden Sie den HTML-Validator, um festzustellen, ob Sie ungltiges Markup auf Ihrer Seite haben, das CSS-Probleme verursacht.
Verwenden Sie den CSS-Validator, um schlecht formatierten CSS-Code zu berprfen.
Verwenden Sie die Entwicklertools des Browsers, um die auf HTML-Elemente auf einer Seite angewendeten CSS zu inspizieren.
ndern Sie das angewendete CSS, um herauszufinden, welche nderungen erforderlich sind, um das gewnschte Ergebnis zu erzielen. Dazu gehrt das Aktivieren und Deaktivieren von Deklarationen, ndern von Werten und Hinzufgen neuer Deklarationen.

Zugriff auf die DevTools des Browsers

Der Artikel Was sind Entwickler-Tools von Browsern erklrt, wie Sie auf die Tools in verschiedenen Browsern und Plattformen zugreifen knnen. Auch wenn Sie sich hauptschlich fr die Entwicklung in einem bestimmten Browser entscheiden und daher mit den in diesem Browser enthaltenen Tools am vertrautesten werden, lohnt es sich zu wissen, wie man in anderen Browsern darauf zugreift. Dies hilft Ihnen, wenn Sie Unterschiede in der Darstellung zwischen mehreren Browsern feststellen.

In dieser Lektion werden wir einige ntzliche Funktionen der Firefox DevTools fr die Arbeit mit CSS betrachten. Um dies zu tun, verwende ich eine Beispieldatei. Laden Sie diese in einem neuen Tab, wenn Sie der Anleitung folgen mchten, und ffnen Sie Ihre DevTools, wie im oben verlinkten Artikel beschrieben.

Der DOM vs. Quelltextanzeige

Etwas, das Neulinge in DevTools durcheinanderbringen kann, ist der Unterschied zwischen dem, was Sie sehen, wenn Sie den Quelltext anzeigen einer Webseite, oder wenn Sie sich die HTML-Datei ansehen, die Sie auf den Server hochgeladen haben, und dem, was Sie im HTML-Bereich der DevTools sehen knnen. Es sieht zwar grob hnlich aus wie das, was Sie ber die Quelltextanzeige sehen knnen, es gibt jedoch einige Unterschiede.

Im gerenderten DOM hat der Browser mglicherweise das HTML normalisiert, beispielsweise indem er einige schlecht geschriebene HTML fr Sie korrigiert hat. Wenn Sie ein Element falsch geschlossen haben, zum Beispiel indem Sie ein <h2> ffnen, aber mit </h3> schlieen, wird der Browser herausfinden, was Sie tun wollten, und das HTML im DOM wird das offene <h2> korrekt mit </h2> schlieen. Das DOM zeigt auch alle nderungen, die durch JavaScript durchgefhrt wurden.

Im Vergleich dazu ist die Quelltextanzeige der HTML-Quellcode, wie er auf dem Server gespeichert ist. Der HTML-Baum in Ihren DevTools zeigt genau an, was der Browser zu einem bestimmten Zeitpunkt rendert, sodass Sie einen Einblick erhalten, was wirklich vor sich geht.

Inspizieren des angewandten CSS

Whlen Sie ein Element auf Ihrer Seite aus, entweder indem Sie mit Rechts-/Strg-Klick darauf klicken und Inspect auswhlen oder indem Sie es aus dem HTML-Baum links in der DevTools-Anzeige auswhlen. Versuchen Sie, das Element mit der Klasse box1 zu whlen; dies ist das erste Element auf der Seite mit einem umrandeten Kasten.

[Die Beispielseite fr dieses Tutorial mit geffneten DevTools.]

Wenn Sie sich die Regelnansicht rechts neben Ihrem HTML anschauen, sollten Sie die auf dieses Element angewandten CSS-Eigenschaften und -Werte sehen knnen. Sie sehen die direkt auf die Klasse box1 angewandten Regeln und auch das CSS, das von seinen Vorfahren, in diesem Fall von <body>, vererbt wird. Dies ist ntzlich, wenn Sie ein CSS sehen, das angewandt wird, das Sie nicht erwartet haben. Vielleicht wird es von einem bergeordneten Element geerbt und Sie mssen eine Regel hinzufgen, um es im Kontext dieses Elements zu berschreiben.

Auerdem ist die Fhigkeit ntzlich, Kurzschreibweise-Eigenschaften zu expandieren. In unserem Beispiel wird die Kurzschreibweise margin verwendet.

Klicken Sie auf den kleinen Pfeil, um die Ansicht zu erweitern und die verschiedenen detaillierten Eigenschaften und deren Werte anzuzeigen.

Sie knnen Werte in der Regelnansicht ein- und ausschalten, wenn dieses Panel aktiv ist wenn Sie mit der Maus darber fahren, erscheinen Kontrollkstchen. Deaktivieren Sie das Kontrollkstchen einer Regel, zum Beispiel border-radius, und das CSS wird nicht mehr angewendet.

Sie knnen dies verwenden, um einen A/B-Vergleich durchzufhren, um zu entscheiden, ob etwas mit einer angewendeten Regel besser aussieht oder nicht, und auch um es zu debuggen zum Beispiel, wenn ein Layout falsch ist und Sie herausfinden wollen, welche Eigenschaft das Problem verursacht.

Werte bearbeiten

Zustzlich zum Ein- und Ausschalten von Eigenschaften knnen Sie deren Werte bearbeiten. Vielleicht mchten Sie sehen, ob eine andere Farbe besser aussieht oder die Gre von etwas anpassen? DevTools kann Ihnen viel Zeit sparen, die Sie sonst durch das Bearbeiten eines Stylesheets und Neuladen der Seite verbringen wrden.

Wenn box1 ausgewhlt ist, klicken Sie auf die Farbflche (der kleine farbige Kreis), die die auf die Grenze angewendete Farbe anzeigt. Ein Farbwhler ffnet sich und Sie knnen einige verschiedene Farben ausprobieren; diese werden in Echtzeit auf der Seite aktualisiert. In hnlicher Weise knnten Sie die Breite oder den Stil der Begrenzung ndern.

[DevTools Styles Panel mit einem geffneten Farbwhler.]

Hinzufgen einer neuen Eigenschaft

Sie knnen Eigenschaften mit den DevTools hinzufgen. Vielleicht haben Sie erkannt, dass Sie nicht mchten, dass Ihr Kasten die Schriftgre des <body>-Elements erbt und wollen eine eigene spezifische Gre festlegen? Sie knnen dies in den DevTools ausprobieren, bevor Sie es in Ihre CSS-Datei hinzufgen.

Sie knnen auf die schlieende geschweifte Klammer in der Regel klicken, um eine neue Deklaration einzufgen. Danach knnen Sie anfangen, die neue Eigenschaft zu tippen, und DevTools zeigt Ihnen eine Autovervollstndigungs-Liste von passenden Eigenschaften an. Nachdem Sie font-size ausgewhlt haben, geben Sie den Wert ein, den Sie ausprobieren mchten. Sie knnen auch auf die + Schaltflche klicken, um eine zustzliche Regel mit demselben Selektor hinzuzufgen und Ihre neuen Regeln dort hinzuzufgen.

[Das DevTools-Panel, Hinzufgen einer neuen Eigenschaft zu den Regeln, mit der Autovervollstndigung fr font-.]

Hinweis: Es gibt auch andere ntzliche Funktionen in der Regelnansicht, zum Beispiel werden Deklarationen mit ungltigen Werten durchgestrichen. Mehr dazu erfahren Sie unter CSS prfen und bearbeiten.

Das Boxmodell verstehen

In den vorherigen Lektionen haben wir das Boxmodell besprochen und die Tatsache, dass wir ein alternatives Boxmodell haben, das ndert, wie die Gre von Elementen basierend auf der Ihnen gegebenen Gre plus dem Padding und den Rndern berechnet wird. DevTools kann Ihnen wirklich helfen, zu verstehen, wie die Gre eines Elements berechnet wird.

Die Layout-Ansicht zeigt Ihnen ein Diagramm des Boxmodells auf dem ausgewhlten Element zusammen mit einer Beschreibung der Eigenschaften und Werte, die beeinflussen, wie das Element angeordnet wird. Dies beinhaltet eine Beschreibung von Eigenschaften, die Sie mglicherweise nicht ausdrcklich am Element verwendet haben, die aber Anfangswerte haben.

In diesem Panel ist eine der detaillierten Eigenschaften die Eigenschaft box-sizing, die kontrolliert, welches Boxmodell das Element verwendet.

Vergleichen Sie die zwei Boxen mit den Klassen box1 und box2. Beide haben die gleiche Breite angewendet (400px), jedoch ist box1 optisch breiter. Sie knnen im Layout-Panel sehen, dass es content-box verwendet. Dies ist der Wert, der die Gre nimmt, die Sie dem Element geben, und dann das Padding und die Breite des Rahmens hinzufgt.

Das Element mit der Klasse box2 verwendet border-box, sodass hier das Padding und der Rahmen von der Gre, die Sie dem Element angegeben haben, abgezogen wird. Das bedeutet, dass der auf der Seite eingenommene Platz des Kastens die exakte Gre hat, die Sie angegeben haben in unserem Fall width: 400px.

[Der Layout-Bereich der DevTools]

Hinweis: Erfahren Sie mehr in Das Boxmodell untersuchen und inspizieren.

Lsen von Spezifittsproblemen

Manchmal, whrend der Entwicklung, insbesondere wenn Sie das CSS auf einer bestehenden Seite bearbeiten mssen, werden Sie feststellen, dass es schwierig ist, CSS anzuwenden. Egal was Sie tun, das Element scheint das CSS einfach nicht zu bernehmen. Was hier normalerweise passiert, ist, dass ein spezifischerer Selektor Ihre nderungen berschreibt, und hier werden Ihnen die DevTools wirklich helfen.

In unserer Beispieldatei sind zwei Wrter in einem <em>-Element umschlossen. Eins wird in Orange und das andere in Hotpink dargestellt. Im CSS haben wir folgende Regel angewandt:

css

em {
  color: hotpink;
  font-weight: bold;
}

Davor im Stylesheet befindet sich jedoch eine Regel mit einem .special-Selektor:

css

.special {
  color: orange;
}

Wie Sie sich aus der Lektion zu Konflikte behandeln erinnern, in der wir ber Spezifitt gesprochen haben, sind Klassenselektoren spezifischer als Elementselektoren und deshalb ist dies der Wert, der angewendet wird. DevTools kann Ihnen helfen, solche Probleme zu finden, insbesondere wenn die Information irgendwo in einem riesigen Stylesheet vergraben ist.

Untersuchen Sie das <em> mit der Klasse .special, und DevTools zeigt Ihnen, dass Orange die Farbe ist, die angewendet wird, und dass die color-Eigenschaft, die auf das <em> angewendet wird, durchgestrichen ist. Sie knnen jetzt sehen, dass der Klassenselektor den Elementselektor berschreibt.

[Auswahl eines em und in DevTools nachschauen, was die Farbe berschreibt.]

Debuggen von Problemen in CSS

DevTools kann eine groe Hilfe beim Lsen von CSS-Problemen sein, also wie sollten Sie vorgehen, wenn Sie sich in einer Situation befinden, in der CSS nicht so funktioniert, wie Sie es erwarten? Die folgenden Schritte sollten helfen.

Einen Schritt zurck vom Problem machen

Jedes Code-Problem kann frustrierend sein, besonders CSS-Probleme, weil Sie oft keine Fehlermeldung erhalten, die Sie online suchen knnen, um bei der Lsung zu helfen. Wenn Sie frustriert werden, machen Sie eine Weile einen Schritt weg vom Problem gehen Sie spazieren, holen Sie sich ein Getrnk, sprechen Sie mit einem Kollegen, oder arbeiten Sie eine Weile an einer anderen Sache. Manchmal erscheint die Lsung wie durch Zauberei, wenn Sie aufhren, ber das Problem nachzudenken, und auch wenn nicht, ist es viel einfacher daran zu arbeiten, wenn Sie erfrischt sind.

Haben Sie gltiges HTML und CSS?

Browser erwarten, dass Ihr CSS und HTML korrekt geschrieben sind, jedoch sind Browser auch sehr nachsichtig und werden ihr Bestes tun, um Ihre Webseiten anzuzeigen, selbst wenn Sie Fehler im Markup oder Stylesheet haben. Wenn Sie Fehler in Ihrem Code haben, muss der Browser raten, was Sie gemeint haben, und er knnte eine andere Entscheidung treffen, als Sie es im Sinn hatten. Darber hinaus knnten zwei verschiedene Browser mit dem Problem auf zwei verschiedene Arten umgehen. Ein guter erster Schritt ist daher, Ihr HTML und CSS durch einen Validator laufen zu lassen, um alle Fehler zu finden und zu beheben.

Werden die Eigenschaft und der Wert von dem Browser untersttzt, den Sie testen?

Browser ignorieren CSS, das sie nicht verstehen. Wenn die Eigenschaft oder der Wert, den Sie verwenden, nicht von dem Browser untersttzt wird, den Sie testen, wird nichts kaputtgehen, aber dieses CSS wird nicht angewendet. DevTools wird in der Regel nicht untersttzte Eigenschaften und Werte auf irgendeine Weise hervorheben. Im Screenshot unten untersttzt der Browser den subgrid-Wert von grid-template-columns nicht.

[Bild von Browser DevTools mit der grid-template-columns: subgrid durchgestrichen, da der subgrid-Wert nicht untersttzt wird.]

Sie knnen auch die Tabellen zur Browser-Kompatibilitt am Ende jeder Eigenschaftsseite auf MDN ansehen. Diese zeigen Ihnen die Browser-Untersttzung fr diese Eigenschaft, oft aufgeschlsselt, wenn es Untersttzung fr einige Verwendungen der Eigenschaft gibt und fr andere nicht. Siehe die Kompatibilittstabelle fr die grid-template-columns Eigenschaft.

Wird Ihre CSS durch etwas anderes berschrieben?

Hier kommt das Wissen ber Spezifitt, das Sie erworben haben, sehr zur Geltung. Wenn etwas Spezifischeres berschreibt, was Sie zu tun versuchen, knnen Sie sich in einem sehr frustrierenden Spiel befinden, das zu bestimmen versucht, was es ist. Wie weiter oben beschrieben, zeigen Ihnen DevTools jedoch, welche CSS angewendet wird, und Sie knnen herausfinden, wie der neue Selektor spezifisch genug gemacht werden kann, um ihn zu berschreiben.

Machen Sie einen reduzierten Testfall des Problems

Wenn das Problem durch die oben genannten Schritte nicht behoben wird, mssen Sie weiter untersuchen. Das Beste, was Sie zu diesem Zeitpunkt tun knnen, ist, etwas zu erstellen, das als reduzierter Testfall bekannt ist. In der Lage zu sein, "ein Problem zu reduzieren" ist eine sehr ntzliche Fhigkeit. Es wird Ihnen helfen, Probleme in Ihrem eigenen Code und dem Ihrer Kollegen zu finden, und es wird Ihnen auch ermglichen, Fehler zu melden und effektiver um Hilfe zu bitten.

Ein reduzierter Testfall ist ein Codebeispiel, das das Problem auf die einfachstmgliche Weise demonstriert, mit entferntem, nicht damit zusammenhngendem Inhalt und Styling. Dies bedeutet oft, dass Sie den problematischen Code aus Ihrem Layout entfernen, um ein kleines Beispiel zu erstellen, das nur diesen Code oder dieses Feature zeigt.

Um einen reduzierten Testfall zu erstellen:

Wenn Ihr Markup dynamisch generiert ist zum Beispiel ber ein CMS erstellen Sie eine statische Version der Ausgabe, die das Problem zeigt. Eine Code-Sharing-Seite wie CodePen ist ntzlich zum Hosten reduzierter Testflle, da diese dann online zugnglich sind und Sie sie leicht mit Kollegen teilen knnen. Sie knnten anfangen, indem Sie Quelltextanzeige auf der Seite durchfhren und das HTML in CodePen kopieren, dann holen Sie alle relevanten CSS und JavaScript und schlieen dies auch ein. Danach knnen Sie berprfen, ob das Problem immer noch offensichtlich ist.
Wenn das Entfernen des JavaScripts das Problem nicht behebt, schlieen Sie das JavaScript nicht ein. Wenn das Entfernen des JavaScripts tatschlich das Problem behebt, dann entfernen Sie so viel JavaScript wie mglich, lassen Sie dabei was das Problem verursacht.
Entfernen Sie alle HTML, die nicht zum Problem beitrgt. Entfernen Sie Komponenten oder sogar Hauptelemente des Layouts. Versuchen Sie, so wenig Code wie mglich zu haben, der das Problem noch zeigt.
Entfernen Sie alle CSS, die das Problem nicht beeinflussen.

Bei diesem Vorgang knnen Sie feststellen, was das Problem verursacht, oder zumindest in der Lage sein, es ein- und auszuschalten, indem Sie etwas Bestimmtes entfernen. Es lohnt sich, einige Kommentare in Ihren Code hinzuzufgen, whrend Sie Dinge entdecken. Wenn Sie um Hilfe bitten mssen, zeigen sie der Person, die Ihnen hilft, was Sie bereits versucht haben. Dies knnte Ihnen gengend Informationen geben, um nach wahrscheinlichen Problemen und Lsungen zu suchen.

Wenn Sie immer noch Schwierigkeiten haben, das Problem zu beheben, gibt Ihnen ein reduzierter Testfall etwas, womit Sie um Hilfe bitten knnen, indem Sie es auf einem Forum posten oder einem Kollegen zeigen. Sie haben viel bessere Chancen, Hilfe zu erhalten, wenn Sie zeigen knnen, dass Sie die Arbeit gemacht haben, das Problem zu reduzieren und genau zu identifizieren, wo es auftritt, bevor Sie um Hilfe bitten. Ein erfahrener Entwickler ist mglicherweise in der Lage, das Problem schnell zu erkennen und Ihnen den richtigen Weg zu weisen, und selbst wenn nicht, ermglicht Ihnen der reduzierte Testfall, einen schnellen berblick zu haben und zumindest etwas Hilfe anbieten zu knnen.

Fr den Fall, dass Ihr Problem tatschlich ein Fehler in einem Browser ist, dann kann ein reduzierter Testfall auch verwendet werden, um einen Fehlerbericht beim entsprechenden Browseranbieter einzureichen (z.B. auf Mozillas Bugzilla-Seite).

Je mehr Erfahrung Sie mit CSS sammeln, desto schneller werden Sie Probleme selbst herausfinden. Jedoch, selbst die Erfahrensten von uns finden sich manchmal in Situationen wieder, in denen wir uns fragen, was auf der Erde vorgeht. Ein methodischer Ansatz, ein reduzierter Testfall und das Erklren des Problems an jemand anderen fhren in der Regel dazu, dass eine Lsung gefunden wird.

Zusammenfassung

So, da haben wir es: eine Einfhrung in das Debuggen von CSS, die Ihnen einige ntzliche Fhigkeiten gibt, auf die Sie sich verlassen knnen, wenn Sie beginnen, CSS und andere Arten von Code spter in Ihrer Karriere zu debuggen.

Das war es fr dieses Modul. Sobald Sie bereit sind, knnen Sie mit unserem CSS Textstyling Modul fortfahren.

Siehe auch

Firefox > CSS untersuchen und bearbeiten, Firefox Source-Dokumentation
Chrome > CSS anzeigen und ndern, developer.chrome.com

Help improve MDN

War diese bersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen knnen Diese Seite wurde automatisch aus dem Englischen bersetzt.

bersetzung auf GitHub anzeigen Fehler mit dieser bersetzung melden