Hauptinhalt
Programmierung
Kurs: Programmierung > Lerneinheit 7
Lektion 2: DOM-Zugriff mit jQuery- Challenge: Verschönere eine Seite mit jQuery
- Webseiten mit der Browser-Konsole debuggen
- Challenge: Berühmte Entdeckungen
- Wiederholung: Mit jQuery auf DOM zugreifen
- Projekt: DOM-Detektive
- Geschichtspause: Wie hat John jQuery entwickelt?
© 2023 Khan AcademyNutzungsbedingungenDatenschutzerklärungCookie-Meldung
Webseiten mit der Browser-Konsole debuggen
Lerne, wie du deine Webseiten mit den Chrome-Entwicklerwerkzeugen debuggen kannst. Erkunde die JavaScript-Konsole und die Funktion console.log(), um zu sehen, wie sie Warnungen, Fehler und Protokollmeldungen anzeigen kann.
Willst du an der Diskussion teilnehmen?
Noch keine Beiträge.
Video-Transkript
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.