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

1. Debugging und Profiling
Walter Eberl / pixelio.de

2. WER BIN ICH?
• Sebastian Springer
• https://github.com/sspringer82
• @basti_springer
• Consultant,Trainer,Autor

5. console
API zum Zugriff auf die Debugging-Konsole des Browsers.

6. console
console.log(‘Hello World’);
console.log(‘Hello’, ‘ World’);
console.log(‘Hello %s’, ‘ World’);

7. console

8. console.time(‘myTime’);
console.timeEnd(‘myTime’);
myTime: 4581.509ms

9. Weitere Funktionen
console.count Counter
console.dir Strukturierte Anzeige von Objekten
console.group Gruppierung für Log-Nachrichten
console.trace Zeigt den Stacktrace an

10. Entwickler-Tools

11. Voraussetzungen
• JavaScript in eigenen Dateien
• Kein Caching

13. Show me your source

15. Debugger

16. Debugger
Entwickler-Tools müssen offen sein, sonst geht überhaupt
nichts.
Es muss mindestens ein Breakpoint gesetzt sein.
Page-Reload.

17. Breakpoints

18. $scope.save = function() {!
if($scope.todoFrm.$valid) {!
!
debugger;!
!
var promise;!
if($scope.todo.id) {!
p = $http.put('todo/' + $scope.id, $scope.todo)!
} else {
NO!

20. Conditional
Breakpoints

22. Weitere Breakpoints
• DOM: Bei Manipulationen des DOM
• XHR: Bei Aufruf einer bestimmten URL
• Events: Bei bestimmten Events z.B. Mouse click

23. Wo sind meine
Breakpoints?

25. Navigation

26. Navigation
Play/Pause
!
F8

27. Navigation
Step over
!
F10

28. Navigation
Step in
!
F11

29. Navigation
Step out
!
Shift - F11

30. Navigation
Disable Breakpoints

31. Navigation
Pause on Exception

32. Stack

33. (function() {!
console.log('hello');!
}());
(function helloWorld() {!
console.log('hello');!
}());

34. 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.

35. Scope

36. Nachteil: keiner findet was
Hier ist noch der Buchstabe A.
Es geht also noch weiter…

37. Die Lösung:
Watch Expressions

38. Watch Expressions
Beliebige Ausdrücke, die bei jedem Schritt ausgewertet
werden.

39. Timeline

40. 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.

42. 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).

45. Netzwerk

46. Timeline
Blocking auf freiwerdende Verbindung warten
Sending Request senden
Waiting Auf initiale Antwort warten
Receiving Auf gesamte Antwort warten

47. Time
Time Zeit vom Beginn des Requests bis zu seinem Ende
Latency Zeit bis zum ersten Byte der Response

48. Request Details

49. Resources

50. 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.

51. Resources

52. Audits

53. Audits
Der Browser macht uns Vorschläge zur Verbesserung der
Applikation.
z.B. Zusammenfassung von JavaScript-Dateien oder
Aktivierung von gzip

55. Profiles

56. Profiles
Mit dem Profiler findet man heraus, welche Routinen
besonders rechenintensiv sind und wo in einer Applikation der
Speicher verloren geht.

57. CPU Profile

58. Heap Snapshot

59. Heap Allocations

60. Minified Source?

63. Source Maps

64. 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.

65. Set a breakpoint

66. Map and original source is
loaded

67. Happy Debugging!

68. Source bearbeiten
aktuell nur in Chrome

70. Debugger in der IDE

71. Webstorm Debugging
1. Konfiguration erstellen
!
2. Breakpoints setzen
!
3. Run

73. KONTAKT
Sebastian Springer
sebastian.springer@mayflower.de
!
Mayflower GmbH
Mannhardtstr. 6
80538 München
Deutschland
!
@basti_springer
!
https://github.com/sspringer82

74. 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/