+ All Categories
Transcript
Page 1: Debugging und Profiling

Debugging und Profiling

Walter Eberl / pixelio.de

Page 2: Debugging und Profiling

WER BIN ICH?

• Sebastian Springer

• https://github.com/sspringer82

• @basti_springer

• Consultant, Trainer, Autor

Page 3: Debugging und Profiling
Page 4: Debugging und Profiling
Page 5: Debugging und Profiling

consoleAPI zum Zugriff auf die Debugging-Konsole des Browsers.

Page 6: Debugging und Profiling

console

console.log(‘Hello World’);

console.log(‘Hello’, ‘ World’);

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

Page 7: Debugging und Profiling

console

Page 8: Debugging und Profiling

!

console.time(‘myTime’);

console.timeEnd(‘myTime’);

myTime: 4581.509ms

Page 9: Debugging und Profiling

Weitere Funktionenconsole.count Counter

console.dir Strukturierte Anzeige von Objekten

console.group Gruppierung für Log-Nachrichten

console.trace Zeigt den Stacktrace an

Page 10: Debugging und Profiling

Entwickler-Tools

Page 11: Debugging und Profiling

Voraussetzungen

• JavaScript in eigenen Dateien

• Kein Caching

Page 12: Debugging und Profiling
Page 13: Debugging und Profiling

Show me your source

Page 14: Debugging und Profiling
Page 15: Debugging und Profiling

Debugger

Page 16: Debugging und Profiling

Debugger

Entwickler-Tools müssen offen sein, sonst geht überhaupt nichts.

Es muss mindestens ein Breakpoint gesetzt sein. Page-Reload.

Page 17: Debugging und Profiling

Breakpoints

Page 18: Debugging und Profiling

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

NO!

Page 19: Debugging und Profiling
Page 20: Debugging und Profiling

Conditional Breakpoints

Page 21: Debugging und Profiling
Page 22: Debugging und Profiling

Weitere Breakpoints

• DOM: Bei Manipulationen des DOM

• XHR: Bei Aufruf einer bestimmten URL

• Events: Bei bestimmten Events z.B. Mouse click

Page 23: Debugging und Profiling

Wo sind meine Breakpoints?

Page 24: Debugging und Profiling
Page 25: Debugging und Profiling

Navigation

Page 26: Debugging und Profiling

Navigation

Play/Pause !

F8

Page 27: Debugging und Profiling

Navigation

Step over !

F10

Page 28: Debugging und Profiling

Navigation

Step in !

F11

Page 29: Debugging und Profiling

Navigation

Step out !

Shift - F11

Page 30: Debugging und Profiling

Navigation

Disable Breakpoints

Page 31: Debugging und Profiling

Navigation

Pause on Exception

Page 32: Debugging und Profiling

Stack

Page 33: Debugging und Profiling

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

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

Page 34: Debugging und Profiling

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.

Page 35: Debugging und Profiling

Scope

Page 36: Debugging und Profiling

Nachteil: keiner findet was

Hier ist noch der Buchstabe A. Es geht also noch weiter…

Page 37: Debugging und Profiling

Die Lösung: Watch Expressions

Page 38: Debugging und Profiling

Watch Expressions

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

Page 39: Debugging und Profiling

Timeline

Page 40: Debugging und Profiling

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.

Page 41: Debugging und Profiling
Page 42: Debugging und Profiling

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

Page 43: Debugging und Profiling
Page 44: Debugging und Profiling
Page 45: Debugging und Profiling

Netzwerk

Page 46: Debugging und Profiling

Timeline

Blocking auf freiwerdende Verbindung warten

Sending Request senden

Waiting Auf initiale Antwort warten

Receiving Auf gesamte Antwort warten

Page 47: Debugging und Profiling

Time

Time Zeit vom Beginn des Requests bis zu seinem Ende

Latency Zeit bis zum ersten Byte der Response

Page 48: Debugging und Profiling

Request Details

Page 49: Debugging und Profiling

Resources

Page 50: Debugging und Profiling

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.

Page 51: Debugging und Profiling

Resources

Page 52: Debugging und Profiling

Audits

Page 53: Debugging und Profiling

Audits

Der Browser macht uns Vorschläge zur Verbesserung der Applikation.

z.B. Zusammenfassung von JavaScript-Dateien oder Aktivierung von gzip

Page 54: Debugging und Profiling
Page 55: Debugging und Profiling

Profiles

Page 56: Debugging und Profiling

Profiles

Mit dem Profiler findet man heraus, welche Routinen besonders rechenintensiv sind und wo in einer Applikation der

Speicher verloren geht.

Page 57: Debugging und Profiling

CPU Profile

Page 58: Debugging und Profiling

Heap Snapshot

Page 59: Debugging und Profiling

Heap Allocations

Page 60: Debugging und Profiling

Minified Source?

Page 61: Debugging und Profiling
Page 62: Debugging und Profiling
Page 63: Debugging und Profiling

Source Maps

Page 64: Debugging und Profiling

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.

Page 65: Debugging und Profiling

Set a breakpoint

Page 66: Debugging und Profiling

Map and original source is loaded

Page 67: Debugging und Profiling

Happy Debugging!

Page 68: Debugging und Profiling

Source bearbeitenaktuell nur in Chrome

Page 69: Debugging und Profiling
Page 70: Debugging und Profiling

Debugger in der IDE

Page 71: Debugging und Profiling

Webstorm Debugging

1. Konfiguration erstellen !

2. Breakpoints setzen !

3. Run

Page 72: Debugging und Profiling
Page 73: Debugging und Profiling

KONTAKT

Sebastian Springer [email protected] !Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland !@basti_springer !https://github.com/sspringer82

Page 74: Debugging und Profiling

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/


Top Related