Webseiten mit der Browser-Konsole debuggen

Eine der nützlichsten Fähigkeiten, die du als Webentwickler haben kannst, ist die Fähigkeit, Fehler zu beheben, also deine Webseiten mit verfügbaren Tools zu debuggen. Wie z.b. die Browser-Entwicklertools. Jeder Browser hat heutzutage Entwicklertools dabei. Also müsstest du theoretisch ja fast schon lernen, wie man alle diese nutzt. Jedenfalls ist sicherlich gut zu wissen, welcher Browser die leistungsstärksten Werkzeuge hat. Du könntest nun mit dem Debugging in diesem Browser beginnen. Im Moment ist das Chrome, zumindest für mich, aber das könnte sich in Zukunft auch ändern. Okay, öffnen wir also die Entwicklertools in Chrome. Es gibt ein paar verschiedene Möglichkeiten, wie du das machen kannst. Ich finde gerne heraus, was die Tastenkombination ist für meinen Browser und mein Betriebssystem und benutze diese, weil das am schnellsten ist. Auf dem Mac ist es also Befehl-Option-I. Ta-da! Das sind unsere Entwicklungswerkzeuge. Eine andere Möglichkeit, wie man das machen kann, ist Rechtsklick, Element inspizieren. Und dann öffnen sich die dev tools und es öffnet sich zur HTML-Konsole, so dass du dann herumklicken musst zu dem, was du willst. Aber es ist auch ein ziemlich schneller Weg. Und schließlich ist da noch der lange Weg, der darin besteht, dass du in dein Menü gehst, gehe zu weitere Werkzeuge, gehe zu Entwicklertools, und das funktioniert also auch. Das ist sozusagen der sicherere Weg, aber er ist etwas umständlich. Deshalb empfehle ich, diese Tastenkombination herauszufinden und es immer und immer wieder zu wiederholen, bis du es nicht mehr vergisst. Okay, also Tastaturkürzel offen, toll. Hier unten gibt es also eine Menge Werkzeuge. Aber es gibt eines, das wir gleich benutzen werden. Das werde ich dir also zeigen. Das ist die JavaScript-Konsole. Diese Konsole zeigt alle Warnungen und Fehler an im Zusammenhang mit http-Anfragen und CSS-Dateien und JavaScript, und es zeigt alles, was wir ausloggen. Also zur Demonstration werde ich 'console.log' verwenden um eine Meldung anzuzeigen. Jetzt siehst du, dass viele Syntaxfehler angezeigt werden, wie 'consol ist nicht definiert'. Das liegt daran, dass ich langsam tippe und ich mich in dieser Echtzeitumgebung befinde, die ständig den neuen Code auswertet. Es zeigt mir also alle Fehler auf dem Weg an. Das ist etwas, das man im Hinterkopf behalten sollte, wenn du die Konsole benutzt mit deinen Webseiten hier auf Khan Academy. Du kannst alle diese Nachrichten hier ignorieren, bis du mit dem Tippen fertig bist und siehst, was der eigentliche Fehler ist, oder hoffentlich gibt es gar keinen Fehler. Presto! Die Konsole hat mich gegrüßt. Wie süß von ihr. Alles klar, es gibt also noch viel mehr, was du tun kannst in den Entwicklungswerkzeugen deines Browsers und du solltest sie auf jeden Fall mehr erforschen. Aber das sollte genug sein, um dir bei der einfachen Fehlersuche in diesem Kurs zu helfen.