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.