JavaScript im Google Chrome debuggen

JavaScript im Google Chrome debuggen

Fabian Galinski 17. Juni 2014 Expert Topics

0 Kommentare // Lesezeit: 2 min.

Da mir auf dem letztem TYPO3Camp Stuttgart aufgefallen ist, dass viele Entwickler nicht wissen, dass man JavaScript im Google Chrome und im Safari debuggen kann, möchte ich dieses Wissen hier mit euch teilen.

Grundlegend kann man den Debugger im Chrome mit der Tastenkombination “Strg + Shift + J” öffnen, alternativ geht man im Menü auf “Tools”, ”JavaScript-Konsole”. In dieser kann man direkt JavaScript ausführen, wie z.B. alert("Hello World!");

Zudem kann man in den Javascripts, welche unter dem “Sources”-Tab gelistet sind, Breakpoints setzen. Um dies zu tun, muss man nach dem Öffnen eines Scripts auf die Zeilennummer geklickt werden. Sobald man nun das Script aktiviert, wie z.B. durch das Klicken eines Buttons, welcher die Funktion aufruft, oder durch das Neuladen der kompletten Seite, wird dieses an der Position des Breakpoints stoppen. Ab diesem Punkt kann man in der Konsole auf das JavaScript zugreifen, welches bis zu dem Zeitpunkt geladen ist. Nachfolgend ist eine Erklärung der Steuerelemente zu finden, welche das Debuggen vom JavaScript erst ermöglichen:

Pause (F8)

Dies stoppt das Skript bei der nächsten JavaScript-Funktion und ermöglicht das Debuggen an dieser Stelle.

Resume (F9)

Lässt das JavaScript weiterlaufen und stoppt am nächstem Breakpoint. Nur verfügbar wenn das JavaScript bereits angehalten ist.

Step over (F10)

Überspringt einen Funktionsaufruf und geht direkt in die nächste Zeile.

Step into (F11)

Springt in einen Funktionsaufruf.

Step out (Shift + F11)

Springt aus einer Funktion heraus und geht wieder in die aufrufende Funktion.

Deactivate / Activate Breakpoints

Aktiviert, bzw. deaktiviert die Breakpoints.

Pause on exceptions

Stoppt das JavaScript, falls ein nicht abgefangener Fehler auftritt und springt in die Zeile, wo dieser geschehen ist. Zudem gibt es noch eine Checkbox, welche einen Stopp einleitet bei abgefangenen Fehlern.

Passend zu diesem Artikel gibt es noch ein Video auf unserem YouTube-Kanal. Ich hoffe, dass dieser Artikel und das Video vielen Entwicklern hilft und das ihr in Zukunft einfacher Fehler lösen, bzw. JavaScript schneller erstellen könnt. 


0 Kommentare

Dateien hier ablegen
Dateien hochladen
Keine Kommentare.