Debugging und Profiling

862 views

Published on

Wie kann ich die Browser Tools zum Auffinden von Fehlern und Schwachstellen in meinem Sourcecode benutzen? Dieser Talk stellt die wichtigsten Features vor.

Published in: Internet
  • Be the first to comment

Debugging und Profiling

  1. 1. Debugging und Profiling Walter Eberl / pixelio.de
  2. 2. WER BIN ICH? • Sebastian Springer • https://github.com/sspringer82 • @basti_springer • Consultant,Trainer,Autor
  3. 3. console API zum Zugriff auf die Debugging-Konsole des Browsers.
  4. 4. console console.log(‘Hello World’); console.log(‘Hello’, ‘ World’); console.log(‘Hello %s’, ‘ World’);
  5. 5. console
  6. 6. console.time(‘myTime’); console.timeEnd(‘myTime’); myTime: 4581.509ms
  7. 7. Weitere Funktionen console.count Counter console.dir Strukturierte Anzeige von Objekten console.group Gruppierung für Log-Nachrichten console.trace Zeigt den Stacktrace an
  8. 8. Entwickler-Tools
  9. 9. Voraussetzungen • JavaScript in eigenen Dateien • Kein Caching
  10. 10. Show me your source
  11. 11. Debugger
  12. 12. Debugger Entwickler-Tools müssen offen sein, sonst geht überhaupt nichts. Es muss mindestens ein Breakpoint gesetzt sein. Page-Reload.
  13. 13. Breakpoints
  14. 14. $scope.save = function() {! if($scope.todoFrm.$valid) {! ! debugger;! ! var promise;! if($scope.todo.id) {! p = $http.put('todo/' + $scope.id, $scope.todo)! } else { NO!
  15. 15. Conditional Breakpoints
  16. 16. Weitere Breakpoints • DOM: Bei Manipulationen des DOM • XHR: Bei Aufruf einer bestimmten URL • Events: Bei bestimmten Events z.B. Mouse click
  17. 17. Wo sind meine Breakpoints?
  18. 18. Navigation
  19. 19. Navigation Play/Pause ! F8
  20. 20. Navigation Step over ! F10
  21. 21. Navigation Step in ! F11
  22. 22. Navigation Step out ! Shift - F11
  23. 23. Navigation Disable Breakpoints
  24. 24. Navigation Pause on Exception
  25. 25. Stack
  26. 26. (function() {! console.log('hello');! }()); (function helloWorld() {! console.log('hello');! }());
  27. 27. Scope Beim Debuggen ist es oft hilfreich, wenn man die Werte der aktuell gültigen Variablen sehen kann. Unterscheidung zwischen local- (Function-) und global-Scope.
  28. 28. Scope
  29. 29. Nachteil: keiner findet was Hier ist noch der Buchstabe A. Es geht also noch weiter…
  30. 30. Die Lösung: Watch Expressions
  31. 31. Watch Expressions Beliebige Ausdrücke, die bei jedem Schritt ausgewertet werden.
  32. 32. Timeline
  33. 33. Events Wann sind welche Events passiert? Wie lange haben sie gedauert? Wodurch wurde das Event ausgelöst? ! Außerdem gibt es weitere Meta-Informationen wie z.B. MIME Type bei Responses oder den Heap Size bei einer Script- Auswertung.
  34. 34. Frames Rendering Performance der Seite. Die Applikation sollte für 60 fps optimiert werden. Vorbereitung für einen Frame liegt also bei 16,6ms (1000ms/60).
  35. 35. Netzwerk
  36. 36. Timeline Blocking auf freiwerdende Verbindung warten Sending Request senden Waiting Auf initiale Antwort warten Receiving Auf gesamte Antwort warten
  37. 37. Time Time Zeit vom Beginn des Requests bis zu seinem Ende Latency Zeit bis zum ersten Byte der Response
  38. 38. Request Details
  39. 39. Resources
  40. 40. Resources Resourcen, die von einer Webseite verwendet werden. ! Möglichkeit zur Interaktion wie z.B. Editieren von Datensätzen. ! Dateien, Local/Session Storage, IndexedDB, WebSQL, Cookies, Application Cache.
  41. 41. Resources
  42. 42. Audits
  43. 43. Audits Der Browser macht uns Vorschläge zur Verbesserung der Applikation. z.B. Zusammenfassung von JavaScript-Dateien oder Aktivierung von gzip
  44. 44. Profiles
  45. 45. Profiles Mit dem Profiler findet man heraus, welche Routinen besonders rechenintensiv sind und wo in einer Applikation der Speicher verloren geht.
  46. 46. CPU Profile
  47. 47. Heap Snapshot
  48. 48. Heap Allocations
  49. 49. Minified Source?
  50. 50. Source Maps
  51. 51. Source Maps minified source map file original source Auflösung von minified Sourcecode in den ursprünglichen Code zum Debuggen. Alle drei Dateien müssen vom Server ausgeliefert werden.
  52. 52. Set a breakpoint
  53. 53. Map and original source is loaded
  54. 54. Happy Debugging!
  55. 55. Source bearbeiten aktuell nur in Chrome
  56. 56. Debugger in der IDE
  57. 57. Webstorm Debugging 1. Konfiguration erstellen ! 2. Breakpoints setzen ! 3. Run
  58. 58. KONTAKT Sebastian Springer sebastian.springer@mayflower.de ! Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland ! @basti_springer ! https://github.com/sspringer82
  59. 59. http://www.creativebloq.com/javascript/javascript-debugging- beginners-3122820 http://msdn.microsoft.com/de-de/library/gg699336(v=vs. 85).aspx http://getfirebug.com/javascript https://developer.chrome.com/devtools/docs/javascript- debugging http://www.slideshare.net/IgorZalutsky/debugging-javascript- with-chrome http://www.slideshare.net/JavascriptMeetup/debugging- javascript-by-thomas http://www.andismith.com/blog/2011/11/25-dev-tool-secrets/

×