Der Inspektor ist das Herzstück der DevTools. Er zeigt dir den HTML-Code einer Seite so wie er gerade im Browser vorliegt – nicht so wie er in der Datei steht, sondern nach allem was JavaScript und PHP daraus gemacht haben. Und du kannst live darin herumarbeiten.
Abschnitte: Element auswählen, Die HTML-Struktur lesen, CSS live bearbeiten.
Element auswählen
Der schnellste Weg in den Inspektor: Rechtsklick auf ein beliebiges Element der Seite – dann Element untersuchen. Die DevTools öffnen sich und springen direkt zu dem HTML-Element, das du angeklickt hast. Das spart viel Zeit gegenüber dem manuellen Suchen im Code.
Noch praktischer ist der Auswählen-Button oben links in den DevTools – in Firefox ein Pfeil-Icon, in Chrome ein Cursor mit einem Quadrat. Klickst du ihn an und fährst dann mit der Maus über die Seite, wird jedes Element farblich hervorgehoben. Ein Klick darauf springt sofort zur passenden Stelle im HTML. So findest du in Sekunden heraus, welche Klasse oder welches Tag für ein bestimmtes Element verantwortlich ist.
Die HTML-Struktur lesen
Im linken Bereich des Inspektors siehst du den gesamten HTML-Baum der aktuellen Seite. Elemente lassen sich auf- und zuklappen – genau wie in einem Code-Editor. So erkennst du auf einen Blick wie eine Seite aufgebaut ist: welche Container ineinander verschachtelt sind, welche Klassen vergeben wurden und wie die Struktur aussieht.
Das ist besonders nützlich wenn du verstehen willst wie eine andere Website einen bestimmten Aufbau umsetzt – oder wenn du bei deiner eigenen Seite prüfen willst ob das HTML wirklich so gerendert wird wie du es geschrieben hast.
CSS live bearbeiten
Wenn du im HTML-Baum ein Element auswählst, zeigt der rechte Bereich des Inspektors alle CSS-Regeln an, die auf dieses Element wirken. Du siehst welche Regel woher kommt – aus welcher CSS-Datei, aus welcher Zeile – und welche Regeln von anderen überschrieben werden (durchgestrichen dargestellt).
Du kannst diese Werte direkt anklicken und ändern. Die Seite aktualisiert sich sofort. Das ist ideal um schnell auszuprobieren: Welche Farbe passt besser? Welcher Abstand sieht stimmiger aus? Wie verhält sich das Element wenn ich display: flex setze?
Wichtig: Diese Änderungen sind temporär. Sobald du die Seite neu lädst, ist alles zurückgesetzt. Die DevTools verändern keine Datei auf dem Server – sie zeigen dir nur wie es aussehen würde. Was dir gefällt, musst du danach selbst in deine CSS-Datei übertragen.