Javascript-Chrome Debuggen

ast Python module | base64 Python module | code Python module | COM PHP module | Ev PHP module | File handling | gc Python module | html Python module | http Python module | imp Python module | inspect Python module | io Python module | JavaScript | os Python module | PS PHP module | Python Development | Python functions | re Python module | site Python module | StackOverflow | struct Python module | test Python module | time Python module | UI PHP module

Michael Zippo 04.11.2021

Selbst für Profis ist das Programmieren nicht einfach. Dies ist wahrscheinlich der Grund, warum Entwickler viel Zeit damit verbringen, nach Fehlern in ihrem Code zu suchen. Manchmal ist ein Fehler offensichtlich und führt dazu, dass das gesamte Programm auf einmal abstürzt. Manchmal ist ein Fehler sehr subtil und erzeugt eine gut aussehende Ausgabe, die immer Fehler enthält.

So kontraintuitiv es auch klingen mag, offensichtliche Fehler sind besser, weil sie leichter zu finden sind. Ein hinterhältiger Fehler kann jahrelang in alltäglicher Software lauern.

Stellen Sie sich das so vor: Wenn Sie sich in einem Gebäude befinden, das sich langsam mit Giftgas füllt, möchten Sie, dass das Gas geruchlos ist , geschmacklos und farblos oder hellviolett und riecht nach Pulver. cannon?

Debugging ist ein entscheidender Schritt im Entwicklungsprozess , es gibt viele Tools dafür. Heute werden wir über das Debuggen von JavaScript in Chrome sprechen. Javascript ist mit Abstand eine der beliebtesten Sprachen überhaupt und wohl die beliebteste Sprache für die Webentwicklung. Ebenso ist Chrome einer der am häufigsten verwendeten Webbrowser.

Als jemand, der bald ein gefragter Webentwickler , es ist eine gute Idee, sich mit dem JavaScript-Debugging mit Chrome vertraut zu machen. Ich ermutige Sie, dieser eleganten Beispiel-Webseite > zu folgen wurde speziell zum Üben des Debuggens erstellt.

Verwenden des Quellenbereichs

Chrome wird mit einer Reihe leistungsstarker Tools geliefert, mit denen Entwickler den Quellcode einer Website untersuchen können, einschließlich HTML, CSS und Javascript.

Dies ist eine großartige Möglichkeit, den Code Ihrer Lieblingswebsites zu lesen und zu lernen, wie man sie debuggt.

Nehmen Sie die tour

Seit 2019 und der neuesten Version von Chrome ist der Zugriff auf die Entwicklertools so einfach wie das Aufrufen von Ansicht -> Entwickler -> Tools-Entwicklung im oberen Browsermenü des Bildschirms. Dadurch wird das Chrome Developers Panel mit seinen vielen nützlichen Registerkarten geöffnet.

Auf der Registerkarte "Elemente" können Sie den HTML- und JavaScript-Code durchsuchen, aus denen die Webseite besteht. Die Registerkarte "Konsole" bietet Ihnen Platz zum Basteln mit JavaScript. Öffnen Sie die Konsole für die im vorherigen Abschnitt verlinkte Beispielseite und geben Sie console.log („Hallo“) ein. Dieser JavaScript-Befehl sollte in Ihrem Browser ausgeführt werden.

Die Registerkarte "Quellen" zeigt Ihnen den tatsächlichen Inhalt der Quelldateien der Seite und gibt Ihnen die Möglichkeit, Haltepunkte festzulegen und den Aufrufstapel zu überprüfen.

Breakpoints und Debugger ;

Zusammen mit Druckanweisungen sind Haltepunkte eine der grundlegenden Techniken, die von Entwicklern zum Debuggen verwendet werden.

Das Definieren eines Haltepunkts zum Herunterfahren in der Chrome-Konsole ist einfach - Klicken Sie einfach auf die Zahl éro Ich war aus der Zeile, die Sie interessiert. Ein Haltepunkt ist eine Stelle, an der die Ausführung des Codes automatisch stoppt. Auf diese Weise können Sie alles überprüfen, was bisher passiert ist, einschließlich Dinge wie den aktuellen Wert jeder Variablen und alle stattgefundenen Transformationen.

Haltepunkte sind eine großartige Möglichkeit, den Fortschritt Ihrer zu überprüfen Code, um zu sehen, ob etwas schief gelaufen ist.

Wir können den gleichen Effekt manuell erzielen, indem wir den Debugger platzieren; in unserem Code, wo wir den Debugging-Prozess starten möchten.

Durch das Setzen mehrerer Breakpoints können wir alles, was unser Code tut, aus der Nähe sehen, wodurch es viel einfacher wird, Fehler zu erkennen.

Während dies sicherlich nicht alles ist, was Sie brauchen, um die Kunst des Debuggens zu beherrschen, ist es ein nettes Plus. Die richtigste Code-Korrektur besteht darin, sehr geduldig und sehr klar darüber nachzudenken, was Sie mit Ihrem Code machen wollten, und es mit dem zu vergleichen, was Sie tatsächlich in Ihrem gesagt haben. . ;