{"id":2970,"date":"2018-11-24T17:22:26","date_gmt":"2018-11-24T17:22:26","guid":{"rendered":"https:\/\/blog.ecotronics.ch\/wordpress\/?p=2970"},"modified":"2018-11-24T17:22:26","modified_gmt":"2018-11-24T17:22:26","slug":"javascript-debuggen-in-chrome","status":"publish","type":"post","link":"https:\/\/blog.ecotronics.ch\/wordpress\/?p=2970","title":{"rendered":"JavaScript debuggen in Chrome"},"content":{"rendered":"

Generelles Vorgehen:<\/p>\n

    \n
  1. Zu debuggende Seite \u00f6ffnen<\/li>\n
  2. Chrome Entwickler Tools \u00f6ffnen mit Ctrl + Shift + I<\/strong><\/li>\n
  3. Sources-Tab anklicken -> es \u00f6ffnet sich der JavaScript Debugger mit 3 Fenstern: Quellcodeverwaltung, Editor und Debugging Fenster<\/li>\n
  4. Gew\u00fcnschtes JavaScript-File \u00f6ffnen und Breakpoint setzen oder wenn man nicht genau weiss, wo sich der zu debuggende Code befindet, im Debugging Fenster “Event Listener Breakpoints” \u00f6ffnen und einen Breakpoint f\u00fcr Mous e- Click setzen<\/li>\n
  5. Aktionen ausf\u00fchren, die zum Start des JavaScripts f\u00fchren und dann mit dem Icon “Step over next function call” Schritt f\u00fcr Schritt durch den Code gehen<\/li>\n
  6. Evtl. mit Watch Variablen \u00fcberwachen oder einfach mit Maus auf die entsprechenden Variablen fahren, dann wird der Wert angezeigte.<\/li>\n
  7. Besonders n\u00fctzlich f\u00fcr die Fehlersuche ist die Stop-Schaltfl\u00e4che ganz rechts “Pause on exception”<\/li>\n<\/ol>\n
    \"JavaScript<\/a>

    JavaScript debuggen in Chrome<\/p><\/div>\n

    JavaScript-Code in Seite debuggen:<\/p>\n

    Code direkt in einer Seite wird zur Zeit (Version 70) bei den Event-Handlern nicht automatisch gefunden und angezeigt, deshalb muss man die Seite in der Quellcodeverwaltung explizit \u00f6ffnen, die zu debuggenden Methoden suchen und den Breakpoint explizit setzen.<\/p>\n

    Tipps und Tricks:<\/p>\n