Öffne die in deinen Browser eingebauten Werkzeuge, um eine Seite zu untersuchen, zu testen und Fehler zu finden.
Diese Lektion in Kodokon öffnenDein Browser verbirgt eine komplette Werkstatt, bereits installiert, kostenlos, und die meisten Menschen werden sie nie öffnen. Man nennt sie die Entwicklertools, meist abgekürzt als DevTools. Um sie zu öffnen, drückst du F12, oder du klickst mit der rechten Maustaste irgendwo auf eine Seite und wählst "Untersuchen". Auf dem Mac ist die Tastenkombination Cmd + Option + I. Daraufhin öffnet sich seitlich oder unten im Fenster ein Bereich mit mehreren Tabs.
Der erste Tab, je nach Browser Elemente oder Inspektor genannt, zeigt das HTML der Seite so, wie es gerade jetzt im Speicher des Browsers aussieht. Fahre mit der Maus über eine Zeile: Der passende Bereich leuchtet auf der Seite auf. Mach einen Doppelklick auf einen Text: Du kannst ihn umschreiben und siehst die Änderung sofort. Das ist der beste Weg zu verstehen, wie eine Seite aufgebaut ist - indem du die Seiten anderer Leute auseinandernimmst.
Der Tab Konsole ist der, in dem du am meisten Zeit verbringen wirst. Er zeigt Fehlermeldungen in Rot an, wenn etwas kaputtgeht, und er nimmt auch Anweisungen entgegen, die du direkt eintippst und die im Zusammenhang der geöffneten Seite ausgeführt werden. Probiere es auf irgendeiner Website aus: Tippe eine Zeile, drücke die Eingabetaste und schau, was passiert.
document.title
document.querySelectorAll("a").length
document.body.style.background = "gold"Der Tab Netzwerk macht alles sichtbar, was du in den vorherigen Lektionen gelernt hast. Öffne ihn und lade die Seite dann mit F5 neu: Jede Anfrage erscheint in einer eigenen Zeile, mit ihrer Adresse, ihrer Methode, ihrem Statuscode, ihrer Größe und der Dauer. Eine rote Zeile weist auf eine fehlgeschlagene Anfrage hin. Hier entdeckst du zum Beispiel, dass ein Bild fehlt, weil es einen 404 zurückgibt.