Fehler finden mit den Entwicklerwerkzeugen

Eine Regel steht im Stylesheet, und auf der Seite passiert nichts. Dann gibt es drei Fragen. Trifft der Selektor? Ist die Deklaration gültig? Gewinnt eine andere Regel? Im Ablaufplan aus Lektion 3.5 war das eine Denkübung. Jetzt geht es darum, wo die Antwort steht, und das sind zwei Orte. Hier ist es der Reiter „Regeln“, und später, an der eigenen Datei, sind es die Entwicklerwerkzeuge des Browsers, auf Englisch DevTools.

01 / 03Die drei Befunde im Reiter „Regeln“

Im Reiter steht jede Regel des Stylesheets, die etwas über das Element unter dem Zeiger sagt. 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 in Abschnitt 3 gerechnet.

<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;
}

An einer der Karten steht ganz unten in der Liste blass .kartn mit 0-1-0 und dem Vermerk „Selektor trifft nicht“, darunter display und gap durchgestrichen. Die Regel ist also weder kaputt noch zu schwach. Sie kommt bei keinem Element an, weil im Klassennamen ein Buchstabe fehlt.

Auf den Container selbst kannst du hier nicht zeigen. Die beiden Karten decken ihn vollständig ab, und im Inspector steht immer nur das innerste Element unter dem Zeiger. Das ist die erste Grenze des Reiters, und wie man sie draußen umgeht, steht weiter unten.

<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 lässt sich der Container treffen, denn die Karten stehen nebeneinander und füllen ihn nicht ganz aus. An .karten steht die Regel mit 0-1-0, und darin steht nur eine Zeile, display: flex. Von gap: 16 ist nichts zu sehen, nicht einmal durchgestrichen.

Gerade 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 der Fall aus Abschnitt 1, 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;
}

An einer Karte steht diesmal oben .karten .karte mit 0-2-0. Darunter steht .hell mit 0-1-0 und dem Vermerk „überstimmt durch höhere Spezifität (0-2-0)“, und beide Zeilen sind durchgestrichen. Im Vermerk steht dabei auch die Stufe, auf der entschieden wurde. Steht dort eine Zahl, ist die Regel an der Spezifität gescheitert. Steht dort ein Layer-Name, ist sie eine Stufe früher gescheitert.

02 / 03Dieselben drei in den Entwicklerwerkzeugen

An der eigenen Datei gibt es diesen Reiter nicht. Dort öffnen sich die Entwicklerwerkzeuge unter Windows und Linux mit F12, auf dem Mac mit Cmd+Option+I, oder mit einem Rechtsklick auf ein Element und “Untersuchen”. Ich nehme den Rechtsklick, denn dann ist das Element schon ausgewählt.

Was hier der Reiter „Regeln“ ist, heißt im deutschen Chrome „Stile“ (englisch Styles) und in Firefox ebenfalls „Regeln“. Die Liste ist dieselbe, mit den 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, ohne blasse Zeile und ohne Vermerk. Suchst du eine Regel und findest sie in der Liste nicht, ist das derselbe Befund, nur andersherum gelesen.

Die verworfene Zeile steht dort dagegen, durchgestrichen und mit einem Warnsymbol daneben. An diesem Punkt wissen die Entwicklerwerkzeuge mehr, denn sie lesen den Rohtext mit. Der Reiter hier fragt den Browser, und der hat die Zeile längst weggeworfen. Draußen zählt deshalb das Symbol. 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 den eigenen Regeln. Das sind die 32 Pixel Schriftgröße und die 8 Pixel Außenabstand vom Anfang des Kurses, die hier nirgends auftauchen. In Firefox sind sie standardmäßig ausgeblendet, und du musst sie erst einschalten.

03 / 03Was es nur draußen gibt

Links neben den Regeln steht der Elementbaum mit dem ganzen Markup. Darin lässt sich jedes Element anklicken, auch eines, das seine Kinder vollständig verdecken. Das war die Grenze im ersten Beispiel. An .karten kommt hier kein Zeiger heran, im Baum reicht ein Klick.

In der Ansicht „Berechnet“, englisch Computed, steht dasselbe wie im Reiter „Werte“. Das ist der fertige Wert, mit dem der Browser rechnet, also 28.8px statt 1.6 und rgb(37, 99, 235) statt #2563eb. Jeden Eintrag kannst du zusätzlich aufklappen. Darunter steht dann, aus welcher Regel der Wert kommt, und bei einem geerbten Wert das Element, von dem er stammt. So kommst du am schnellsten an jede 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, dann ist das der Wert, der dort stehen muss.

Im Box-Modell-Diagramm stehen die vier Ringe aus Abschnitt 4 mit ihren echten Zahlen. In Chrome findest du es oben in „Berechnet“, in Firefox im Bereich „Layout“. Beim Überfahren wird der jeweilige Ring auf der Seite hervorgehoben.

Die Overlays für Flexbox und Grid legen Linien, Nummern und benannte Bereiche auf die Seite. In Chrome blendest du sie über das kleine Badge flex oder grid im Elementbaum ein, in Firefox über das Symbol neben display: flex oder display: grid.

Jede Zahl im Panel lässt sich anklicken und mit den Pfeiltasten verstellen, mit Umschalttaste in Zehnerschritten. Ein Neuladen setzt alles zurück, also ist das 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. Ich markiere das Element und gehe im Baum die Vorfahren nach oben durch. Der erste, der positioniert ist und einen z-index trägt, der mit fixed oder sticky steht oder transform, filter oder opacity unter 1 hat, ist der Stacking Context, aus dem das Element nicht herauskommt.

In der Aufgabe stimmen an einer Seite vier Dinge nicht, und keins davon meldet sich von selbst.