Debugging und Profiling
Walter Eberl / pixelio.de
WER BIN ICH?
• Sebastian Springer	

• https://github.com/sspringer82	

• @basti_springer	

• Consultant,Trainer,Autor
console
API zum Zugriff auf die Debugging-Konsole des Browsers.
console
console.log(‘Hello World’);
console.log(‘Hello’, ‘ World’);
console.log(‘Hello %s’, ‘ World’);
console
console.time(‘myTime’);
console.timeEnd(‘myTime’);
myTime: 4581.509ms
Weitere Funktionen
console.count Counter
console.dir Strukturierte Anzeige von Objekten
console.group Gruppierung für Log-...
Entwickler-Tools
Voraussetzungen
• JavaScript in eigenen Dateien
• Kein Caching
Show me your source
Debugger
Debugger
Entwickler-Tools müssen offen sein, sonst geht überhaupt
nichts.
Es muss mindestens ein Breakpoint gesetzt sein.
...
Breakpoints
$scope.save = function() {!
if($scope.todoFrm.$valid) {!
!
debugger;!
!
var promise;!
if($scope.todo.id) {!
p = $http.put(...
Conditional
Breakpoints
Weitere Breakpoints
• DOM: Bei Manipulationen des DOM
• XHR: Bei Aufruf einer bestimmten URL
• Events: Bei bestimmten Even...
Wo sind meine
Breakpoints?
Navigation
Navigation
Play/Pause
!
F8
Navigation
Step over
!
F10
Navigation
Step in
!
F11
Navigation
Step out
!
Shift - F11
Navigation
Disable Breakpoints
Navigation
Pause on Exception
Stack
(function() {!
console.log('hello');!
}());
(function helloWorld() {!
console.log('hello');!
}());
Scope
Beim Debuggen ist es oft hilfreich, wenn man die Werte der
aktuell gültigen Variablen sehen kann.
Unterscheidung zwi...
Scope
Nachteil: keiner findet was
Hier ist noch der Buchstabe A.
Es geht also noch weiter…
Die Lösung:
Watch Expressions
Watch Expressions
Beliebige Ausdrücke, die bei jedem Schritt ausgewertet
werden.
Timeline
Events
Wann sind welche Events passiert? Wie lange haben sie
gedauert? Wodurch wurde das Event ausgelöst?
!
Außerdem gibt ...
Frames
Rendering Performance der Seite. Die Applikation sollte für 60
fps optimiert werden. Vorbereitung für einen Frame l...
Netzwerk
Timeline
Blocking auf freiwerdende Verbindung warten
Sending Request senden
Waiting Auf initiale Antwort warten
Receiving ...
Time
Time Zeit vom Beginn des Requests bis zu seinem Ende
Latency Zeit bis zum ersten Byte der Response
Request Details
Resources
Resources
Resourcen, die von einer Webseite verwendet werden.
!
Möglichkeit zur Interaktion wie z.B. Editieren von Datensä...
Resources
Audits
Audits
Der Browser macht uns Vorschläge zur Verbesserung der
Applikation.
z.B. Zusammenfassung von JavaScript-Dateien oder...
Profiles
Profiles
Mit dem Profiler findet man heraus, welche Routinen
besonders rechenintensiv sind und wo in einer Applikation der
Sp...
CPU Profile
Heap Snapshot
Heap Allocations
Minified Source?
Source Maps
Source Maps
minified source map file original source
Auflösung von minified Sourcecode in den ursprünglichen
Code zum Debuggen...
Set a breakpoint
Map and original source is
loaded
Happy Debugging!
Source bearbeiten
aktuell nur in Chrome
Debugger in der IDE
Webstorm Debugging
1. Konfiguration erstellen
!
2. Breakpoints setzen
!
3. Run
KONTAKT
Sebastian Springer
sebastian.springer@mayflower.de
!
Mayflower GmbH
Mannhardtstr. 6
80538 München
Deutschland
!
@b...
http://www.creativebloq.com/javascript/javascript-debugging-
beginners-3122820
http://msdn.microsoft.com/de-de/library/gg6...
Debugging und Profiling
Debugging und Profiling
Debugging und Profiling
Debugging und Profiling
Debugging und Profiling
Debugging und Profiling
Debugging und Profiling
Debugging und Profiling
Debugging und Profiling
Debugging und Profiling
Debugging und Profiling
Debugging und Profiling
Debugging und Profiling
Debugging und Profiling
Debugging und Profiling
Nächste SlideShare
Wird geladen in …5
×

Debugging und Profiling

821 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Internet
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
821
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
69
Aktionen
Geteilt
0
Downloads
12
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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/

×