Post on 07-Dec-2014
description
Debugging und Profiling
Walter Eberl / pixelio.de
WER BIN ICH?
• Sebastian Springer
• https://github.com/sspringer82
• @basti_springer
• Consultant, Trainer, Autor
consoleAPI 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 Funktionenconsole.count Counter
console.dir Strukturierte Anzeige von Objekten
console.group Gruppierung für Log-Nachrichten
console.trace Zeigt den Stacktrace an
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. Page-Reload.
Breakpoints
$scope.save = function() {! if($scope.todoFrm.$valid) {!! debugger;! ! var promise;! if($scope.todo.id) {! p = $http.put('todo/' + $scope.id, $scope.todo)! } else {
NO!
Conditional Breakpoints
Weitere Breakpoints
• DOM: Bei Manipulationen des DOM
• XHR: Bei Aufruf einer bestimmten URL
• Events: Bei bestimmten Events z.B. Mouse click
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 zwischen local- (Function-) und global-Scope.
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 es weitere Meta-Informationen wie z.B. MIME
Type bei Responses oder den Heap Size bei einer Script-Auswertung.
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).
Netzwerk
Timeline
Blocking auf freiwerdende Verbindung warten
Sending Request senden
Waiting Auf initiale Antwort warten
Receiving Auf gesamte Antwort warten
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ätzen. !
Dateien, Local/Session Storage, IndexedDB, WebSQL, Cookies, Application Cache.
Resources
Audits
Audits
Der Browser macht uns Vorschläge zur Verbesserung der Applikation.
z.B. Zusammenfassung von JavaScript-Dateien oder Aktivierung von gzip
Profiles
Profiles
Mit dem Profiler findet man heraus, welche Routinen besonders rechenintensiv sind und wo in einer Applikation der
Speicher verloren geht.
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.
Alle drei Dateien müssen vom Server ausgeliefert werden.
Set a breakpoint
Map and original source is loaded
Happy Debugging!
Source bearbeitenaktuell 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 !@basti_springer !https://github.com/sspringer82
http://www.creativebloq.com/javascript/javascript-debugging-beginners-3122820
http://msdn.microsoft.com/de-de/library/gg699336(v=vs.85).aspx
http://getfirebug.com/javascripthttps://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/