Home >Internet >Debugging und Profiling

Debugging und Profiling

Date post:07-Dec-2014
Category:
View:438 times
Download:7 times
Share this document with a friend
Description:
Wie kann ich die Browser Tools zum Auffinden von Fehlern und Schwachstellen in meinem Sourcecode benutzen? Dieser Talk stellt die wichtigsten Features vor.
Transcript:
  • 1. Debugging und Proling Walter Eberl / pixelio.de
  • 2. WER BIN ICH? Sebastian Springer https://github.com/sspringer82 @basti_springer Consultant,Trainer,Autor
  • 3. console API zum Zugriff auf die Debugging-Konsole des Browsers.
  • 4. console console.log(Hello World); console.log(Hello, World); console.log(Hello %s, World);
  • 5. console
  • 6. console.time(myTime); console.timeEnd(myTime); myTime: 4581.509ms
  • 7. Weitere Funktionen console.count Counter console.dir Strukturierte Anzeige von Objekten console.group Gruppierung fr Log-Nachrichten console.trace Zeigt den Stacktrace an
  • 8. Entwickler-Tools
  • 9. Voraussetzungen JavaScript in eigenen Dateien Kein Caching
  • 10. Show me your source
  • 11. Debugger
  • 12. Debugger Entwickler-Tools mssen offen sein, sonst geht berhaupt nichts. Es muss mindestens ein Breakpoint gesetzt sein. Page-Reload.
  • 13. Breakpoints
  • 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. Conditional Breakpoints
  • 16. Weitere Breakpoints DOM: Bei Manipulationen des DOM XHR: Bei Aufruf einer bestimmten URL Events: Bei bestimmten Events z.B. Mouse click
  • 17. Wo sind meine Breakpoints?
  • 18. Navigation
  • 19. Navigation Play/Pause ! F8
  • 20. Navigation Step over ! F10
  • 21. Navigation Step in ! F11
  • 22. Navigation Step out ! Shift - F11
  • 23. Navigation Disable Breakpoints
  • 24. Navigation Pause on Exception
  • 25. Stack
  • 26. (function() {! console.log('hello');! }()); (function helloWorld() {! console.log('hello');! }());
  • 27. Scope Beim Debuggen ist es oft hilfreich, wenn man die Werte der aktuell gltigen Variablen sehen kann. Unterscheidung zwischen local- (Function-) und global-Scope.
  • 28. Scope
  • 29. Nachteil: keiner ndet was Hier ist noch der Buchstabe A. Es geht also noch weiter
  • 30. Die Lsung: Watch Expressions
  • 31. Watch Expressions Beliebige Ausdrcke, die bei jedem Schritt ausgewertet werden.
  • 32. Timeline
  • 33. Events Wann sind welche Events passiert? Wie lange haben sie gedauert? Wodurch wurde das Event ausgelst? ! Auerdem gibt es weitere Meta-Informationen wie z.B. MIME Type bei Responses oder den Heap Size bei einer Script- Auswertung.
  • 34. Frames Rendering Performance der Seite. Die Applikation sollte fr 60 fps optimiert werden. Vorbereitung fr einen Frame liegt also bei 16,6ms (1000ms/60).
  • 35. Netzwerk
  • 36. Timeline Blocking auf freiwerdende Verbindung warten Sending Request senden Waiting Auf initiale Antwort warten Receiving Auf gesamte Antwort warten
  • 37. Time Time Zeit vom Beginn des Requests bis zu seinem Ende Latency Zeit bis zum ersten Byte der Response
  • 38. Request Details
  • 39. Resources
  • 40. Resources Resourcen, die von einer Webseite verwendet werden. ! Mglichkeit zur Interaktion wie z.B. Editieren von Datenstzen. ! Dateien, Local/Session Storage, IndexedDB, WebSQL, Cookies, Application Cache.
  • 41. Resources
  • 42. Audits
  • 43. Audits Der Browser macht uns Vorschlge zur Verbesserung der Applikation. z.B. Zusammenfassung von JavaScript-Dateien oder Aktivierung von gzip
  • 44. Proles
  • 45. Proles Mit dem Proler ndet man heraus, welche Routinen besonders rechenintensiv sind und wo in einer Applikation der Speicher verloren geht.
  • 46.