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/