14-mal heruntergeladen
Hochgeladen vonSebastian Springer
Debugging und Profiling
Das Dokument behandelt Debugging- und Profiling-Techniken in JavaScript, einschließlich der Verwendung von Browser-Entwicklertools und der Console-API. Es werden wichtige Konzepte wie Breakpoints, Watch Expressions und Performance-Messungen behandelt, um die Effizienz von Webanwendungen zu verbessern. Zusätzlich werden nützliche Ressourcen und Anleitungen zur Optimierung von Code und Debugging-Prozessen bereitgestellt.
Debugging und Profiling
- 1. Debugging und Profiling WalterEberl / pixelio.de
- 2. WER BIN ICH? •Sebastian Springer • https://github.com/sspringer82 • @basti_springer • Consultant,Trainer,Autor
- 5. console API zum Zugriffauf die Debugging-Konsole des Browsers.
- 6. console console.log(‘Hello World’); console.log(‘Hello’, ‘World’); console.log(‘Hello %s’, ‘ World’);
- 7.
- 8.
- 9. Weitere Funktionen console.count Counter console.dirStrukturierte Anzeige von Objekten console.group Gruppierung für Log-Nachrichten console.trace Zeigt den Stacktrace an
- 10.
- 11. Voraussetzungen • JavaScript ineigenen Dateien • Kein Caching
- 13. Show me yoursource
- 15.
- 16. Debugger Entwickler-Tools müssen offensein, sonst geht überhaupt nichts. Es muss mindestens ein Breakpoint gesetzt sein. Page-Reload.
- 17.
- 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.
- 22. Weitere Breakpoints • DOM:Bei Manipulationen des DOM • XHR: Bei Aufruf einer bestimmten URL • Events: Bei bestimmten Events z.B. Mouse click
- 23.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33. (function() {! console.log('hello');! }()); (function helloWorld(){! console.log('hello');! }());
- 34. Scope Beim Debuggen istes oft hilfreich, wenn man die Werte der aktuell gültigen Variablen sehen kann. Unterscheidung zwischen local- (Function-) und global-Scope.
- 35.
- 36. Nachteil: keiner findetwas Hier ist noch der Buchstabe A. Es geht also noch weiter…
- 37.
- 38. Watch Expressions Beliebige Ausdrücke,die bei jedem Schritt ausgewertet werden.
- 39.
- 40. Events Wann sind welcheEvents 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 derSeite. Die Applikation sollte für 60 fps optimiert werden. Vorbereitung für einen Frame liegt also bei 16,6ms (1000ms/60).
- 45.
- 46. Timeline Blocking auf freiwerdendeVerbindung warten Sending Request senden Waiting Auf initiale Antwort warten Receiving Auf gesamte Antwort warten
- 47. Time Time Zeit vomBeginn des Requests bis zu seinem Ende Latency Zeit bis zum ersten Byte der Response
- 48.
- 49.
- 50. Resources Resourcen, die voneiner Webseite verwendet werden. ! Möglichkeit zur Interaktion wie z.B. Editieren von Datensätzen. ! Dateien, Local/Session Storage, IndexedDB, WebSQL, Cookies, Application Cache.
- 51.
- 52.
- 53. Audits Der Browser machtuns Vorschläge zur Verbesserung der Applikation. z.B. Zusammenfassung von JavaScript-Dateien oder Aktivierung von gzip
- 55.
- 56. Profiles Mit dem Profilerfindet man heraus, welche Routinen besonders rechenintensiv sind und wo in einer Applikation der Speicher verloren geht.
- 57.
- 58.
- 59.
- 60.
- 63.
- 64. Source Maps minified sourcemap 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.
- 66. Map and originalsource is loaded
- 67.
- 68. Source bearbeiten aktuell nurin Chrome
- 70.
- 71. Webstorm Debugging 1. Konfigurationerstellen ! 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.