Fehler finden mit den DevTools

In Lektion 3.5 stand der Ablaufplan: Trifft der Selektor? Ist die Deklaration gültig? Gewinnt eine andere Regel? Damals war das eine Denkübung. Jetzt geht es darum, wo du die Antwort abliest, und zwar an zwei Orten: hier im Reiter „Regeln” und später, an deiner eigenen Datei, in den Entwicklerwerkzeugen deines Browsers.

01 / 04Die drei Befunde im Reiter „Regeln”

Der Reiter listet jede Regel deines Stylesheets, die etwas über das Element sagt, auf das du zeigst. Ganz oben steht die, die gewinnt, darunter die überstimmten, und am Ende blass alle, die dieses Element gar nicht treffen. Neben jedem Selektor steht seine Spezifität als Dreiergruppe, so wie du sie in 3.2 gerechnet hast.

<div class="karten">
  <article class="karte">Eine Karte</article>
  <article class="karte">Noch eine</article>
</div>

body {
  margin: 0;
  padding: 24px;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.karte {
  padding: 16px;
  border: 1px solid #d4d4d8;
  border-radius: 12px;
}

/* Im Reiter „Regeln" steht diese Regel blass
   am Ende der Liste, mit dem Vermerk
   „Selektor trifft nicht". Ihr fehlt ein
   Buchstabe. */
.kartn {
  display: flex;
  gap: 16px;
}

Zeig auf eine der Karten. Ganz unten in der Liste steht blass .kartn mit 0-1-0 und dem Vermerk „Selektor trifft nicht”, darunter display und gap durchgestrichen. Die Regel ist also nicht kaputt und nicht zu schwach, sie kommt bei keinem Element an: Im Klassennamen fehlt ein Buchstabe.

Auf den Container selbst kannst du hier nicht zeigen. Die beiden Karten decken ihn vollständig ab, und der Inspector nennt immer nur das innerste Element unter dem Zeiger. Das ist die erste Grenze, an die du hier stößt, und weiter unten steht, wie du sie draußen umgehst.

<div class="karten">
  <article class="karte">Eine Karte</article>
  <article class="karte">Noch eine</article>
</div>

body {
  margin: 0;
  padding: 24px;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.karte {
  padding: 16px;
  border: 1px solid #d4d4d8;
  border-radius: 12px;
}

/* Die Regel steht im Reiter „Regeln", aber
   ihre zweite Zeile fehlt darin. Der Browser
   hat sie beim Lesen weggeworfen. Der Rest
   der Regel wirkt. */
.karten {
  display: flex;
  gap: 16;
}

In diesem Beispiel erwischst du den Container, denn die Karten stehen nebeneinander und füllen ihn nicht ganz aus. An .karten steht die Regel mit 0-1-0, und darin steht genau eine Zeile: display: flex. Von gap: 16 ist nichts zu sehen, nicht einmal durchgestrichen.

Die fehlende Zeile ist der Befund. Der Browser wirft eine ungültige Deklaration schon beim Lesen weg, und was er weggeworfen hat, kann ihm hinterher niemand mehr entlocken. Das ist Lektion 1.4, diesmal an der Anzeige statt am Text.

<div class="karten">
  <article class="karte hell">Ich will hell sein</article>
  <article class="karte hell">Ich auch</article>
</div>

body {
  margin: 0;
  padding: 24px;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.karten {
  display: flex;
  gap: 16px;
}

.karten .karte {
  padding: 16px;
  border-radius: 12px;
  color: #fafafa;
  background-color: #18181b;
}

/* Diese Regel steht weiter unten und ist im
   Reiter „Regeln" trotzdem durchgestrichen,
   mit dem Vermerk, wer gewonnen hat. Eine
   Klasse schlägt zwei nicht. */
.hell {
  color: #18181b;
  background-color: #f4f4f5;
}

Zeig wieder auf eine Karte. Oben steht .karten .karte mit 0-2-0, darunter .hell mit 0-1-0 und dem Vermerk „überstimmt durch höhere Spezifität (0-2-0)”, beide Zeilen durchgestrichen. Der Vermerk beantwortet dabei mehr als die Frage, wer gewonnen hat: Er nennt die Stufe. Steht dort eine Zahl, hast du auf der Spezifität verloren, steht dort ein Layer-Name, eine Stufe früher.

So sehen die drei aus: blass mit Vermerk heißt, der Selektor trifft nicht. Zeile fehlt heißt, die Deklaration war ungültig. Durchgestrichen mit Vermerk heißt, eine andere Regel gewinnt.

02 / 04Dieselben drei in den Entwicklerwerkzeugen

An deiner eigenen Datei gibt es diesen Reiter nicht. Dort öffnest du die Entwicklerwerkzeuge deines Browsers, mit F12 oder mit einem Rechtsklick auf ein Element und “Untersuchen”. Der zweite Weg ist der bessere, denn dann ist das Element schon ausgewählt.

Was hier der Reiter „Regeln” ist, heißt dort Styles, und die Liste ist dieselbe: Regeln von oben nach unten in der Reihenfolge, in der sie gewinnen. Drei Unterschiede gibt es, und einer davon zählt wirklich.

Ein Selektor, der nicht trifft, steht dort gar nicht. Keine blasse Zeile, kein Vermerk. Wer eine Regel sucht und sie in der Liste nicht findet, hat denselben Befund, nur andersherum gelesen.

Die verworfene Zeile steht dort sehr wohl, durchgestrichen und mit einem Warnsymbol daneben. Das ist der eine Punkt, an dem die Entwicklerwerkzeuge mehr wissen: Sie lesen deinen Rohtext mit, während der Reiter hier den Browser fragt, und der hat die Zeile längst weggeworfen. Draußen achtest du deshalb auf das Symbol, denn der Strich allein sagt dort nichts: mit Symbol ist die Zeile ungültig, ohne ist sie überstimmt.

Die Vorgaben des Browsers stehen mit in der Liste, unter deinen eigenen Regeln. Das sind die 32 Pixel Schriftgröße und die 8 Pixel Außenabstand aus Lektion 1.1, die hier nirgends auftauchen. In Firefox musst du sie erst einschalten, dort sind sie standardmäßig ausgeblendet.

03 / 04Was es nur draußen gibt

Den Elementbaum. Links neben den Regeln steht dein Markup, und darin klickst du jedes Element an, auch eines, das seine Kinder vollständig verdecken. Genau das war die Grenze im ersten Beispiel: An .karten kommst du hier mit dem Zeiger nicht heran, im Baum mit einem Klick.

Die Computed-Ansicht mit Herkunft. Sie zeigt dasselbe wie der Reiter „Werte”, nämlich den fertigen Wert, mit dem der Browser rechnet: 28.8px statt 1.6, rgb(37, 99, 235) statt #2563eb. Jeder Eintrag lässt sich zusätzlich aufklappen, und dann steht darunter, aus welcher Regel der Wert kommt, bei einem geerbten Wert das Element, von dem er stammt. Das ist der schnellste Weg zu jeder Frage der Form “warum ist der Text hier blau, ich habe das nirgends geschrieben”. Nebenbei ist es die Ansicht, gegen die die Prüfungen in diesem Kurs laufen: Verlangt eine Aufgabe padding-top: 24px, steht dort der Wert, den sie sehen will.

Das Box-Modell-Diagramm unter der Computed-Ansicht zeigt die vier Ringe aus Lektion 4.1 mit ihren echten Zahlen. Beim Überfahren wird der jeweilige Ring auf der Seite hervorgehoben.

Die Overlays für Flexbox und Grid blendest du über das kleine Symbol neben display: flex oder display: grid ein. Beim Raster liegen dann Linien, Nummern und benannte Bereiche auf der Seite. Das erspart in den Abschnitten 9 und 10 jedes Raten, besonders beim impliziten Raster.

Werte im Panel ändern. Klick in eine Zahl und drück die Pfeiltasten: nach oben und unten in Einerschritten, mit Umschalttaste in Zehnerschritten. Nichts davon wird gespeichert, ein Neuladen setzt alles zurück. Genau deshalb ist es der beste Ort zum Ausprobieren.

Für einen z-index, der nichts tut, gibt es dagegen kein eigenes Panel. Der Layers-Bereich, den man dafür hält, zeigt Kompositionsebenen der Grafikkarte, und das ist etwas anderes: Ein Stacking Context entsteht auch ohne eigene Ebene und taucht dort dann gar nicht auf. Der Weg bleibt der aus Lektion 8.6. Markier das Element und geh im Baum die Vorfahren nach oben durch: Der erste mit transform, filter, opacity unter 1 oder will-change ist der Stacking Context, aus dem dein Element nicht herauskommt.

04 / 04Die drei Befunde bleiben dieselben

Egal wie groß das Projekt wird, und egal in welchem der beiden Werkzeuge du nachsiehst: Wenn etwas nicht so aussieht, wie es soll, ist es eines von drei Dingen. Der Selektor trifft nicht, die Deklaration ist verworfen, oder eine andere Regel gewinnt. Du erkennst sie daran, wie die Regel dargestellt ist, und die Reihenfolge der Fragen aus 3.5 gilt hier wie dort: erst der Selektor, dann die Gültigkeit, dann die Kaskade.