Entwickler-Tools im Browser

Wann immer Sie mit HTML-Code, CSS oder JavaScript arbeiten, um den Fragebogen noch besser auf Ihren Bedarf anzupassen, sind die Entwickler-Tools im Browser eine große Hilfe.

Je nach Browser finden Sie die Entwickler-Tools an unterschiedlicher Stelle:

• Firefox: Sandwich-Symbol (≡) → Weitere Werkzeuge → Werkzeuge für Web-Entwickler → Inspektor
• Chrome: Erweiterungspunkte (⫶) → Weitere Tools → Entwicklertools → Elements
• Edge: Erweiterungspunkte (⋯) → Weitere Tools → Entwicklungstools → Elemente

Alle drei Browser erlauben unter Windows die Tastenkombination Strg + Umschalt + I (Buchstabe i), um die Entwicklertools zu öffnen.

Der Inspektor (o.ä.) zeigt den HTML-Code, welcher der aktuellen Seite zugrunde liegt. Das ist vor allem dann praktisch, wenn Sie

• Kennungen von Elementen herausfinden möchten oder
• Die CSS-Formate von Elementen verstehen möchten, um sie anzupassen.

Der HTML-Code ist auf den ersten Blick nicht wirklich übersichtlich. Aber mit dem Auswahl-Werkzeug können Sie einzelne Elemente der Fragebogen-Seite direkt auswählen.

So können Sie einfach die HTML-ID eines Elements herausfinden, die relevanten CSS-Klassen und die übergeordneten HTML-Elemente. Außerdem sehen Sie rechts, welche CSS-Regeln für die aktuelle Formatierung des Elements verantwortlich sind. Sie können diese testweise auch anpassen, um die Effekte möglicher Änderungen direkt zu probieren.

Ein weiterer Karteireiter in den Entwickler-Tools ist die Fehlerkonsole („Konsole“). Diese ist vor allem hilfreich, wenn

• JavaScript nicht korrekt funktioniert oder wenn
• Bilder, Audioelemente oder Videos nicht korrekt funktionieren.

Nicht alle Meldungen in der Konsole deuten auf Probleme hin. Das richtige Lesen der Meldungen erfordert ein wenig Übung.

Rechts neben dem Fehler ist meist ein Verweis, in welcher Datei (eine Webseite besteht in aller Regel aus einem HTML-Dokument und mehreren eingebundenen Dateien, z.B. Bilder) der Fehler aufgetreten ist. Klicken Sie auf die Zeilennummer, um die Problemstelle im Code zu sehen.

In diesem Beispiel sehen wir ein JavaScript, welches direkt in den Fragebogen eingefügt wurde. Das Alpha (bekannt aus der Fehlermeldung) ist markiert … und zwar deshalb, weil mit var alpha eine Variable alpha definiert wurde, hier aber versucht wird, auf eine Variable Alpha zuzugreifen. JavaScript unterscheidet streng die Groß- und Kleinschreibung.

Falls sich die Konsole nach dem Klick auf die Zeilennummer nur beschwert „please reload“, muss man die Fragebogen-Seite nochmal neu laden, und dann nochmal auf die Zeilennummer klicken. Am einfachsten funktioniert das Neu-Laden im Debug-Modus.

Tipp: Sehr hilfreich bei der Fehlersuche ist die JavaScript-Funktion console.log(). Sie zeigt den Wert einer Variable in der Konsole an.

Tipp: Die Konsole erlaubt es, JavaScript-Code direkt einzutippen. So lässt sich Code schnell ausprobieren, und die Anzeige in der Konsole liefert wertvolle Hinweise dazu, welche Felder ein JavaScript-Objekt hat. Also zum Beispiel ein Eingabefeld.

Suchbegriffe: Fehlerkonsole, Browser-Konsole, Browserkonsole, Entwicklerkonsole, Entwickler-Konsole, Developer Tools