Entwicklerwerkzeuge des Browsers

Google, Mozilla, Apple, Microsoft · Browser · Seit 2006

🔧

Entwicklerwerkzeuge des Browsers

Google, Mozilla, Apple, Microsoft

Über das Werkzeug

Mit F12 öffnet sich das wichtigste Werkzeug überhaupt – und das am häufigsten unterschätzte.

Der entscheidende Punkt für HTML-Arbeit: Der Elementebaum zeigt nicht den geschriebenen Quelltext, sondern das Ergebnis nach der Fehlerkorrektur des Browsers. Wer beides vergleicht – Quelltextansicht gegen Elementebaum –, sieht sofort, wo etwas repariert wurde: ein verschobenes Element, ein Absatz, den der Browser vorzeitig geschlossen hat, eine Tabelle mit einem eingefügten Zwischenelement.

Genau daran erkennt man Strukturfehler, die keine Fehlermeldung erzeugen. Der Browser beschwert sich nicht, er räumt auf.

Dazu kommen die Netzwerkansicht – welche Datei hält den Aufbau auf –, die Ansicht für unterschiedliche Bildschirmgrößen und je nach Browser ein Zugänglichkeitsbaum.

Nichts zu installieren, nichts zu bezahlen, keine Daten verlassen den Rechner. Für den Einstieg ist das mehr wert als jedes gekaufte Werkzeug; man muss nur wissen, dass es da ist.

Wofür es taugt

Elementebaum nach der Fehlerkorrektur Netzwerkansicht Zugänglichkeitsbaum Ansicht für Bildschirmgrößen

Kurz gesagt

Zeigt, was der Browser aus dem Quelltext gemacht hat.