SlideShare ist ein Scribd-Unternehmen logo
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-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 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
!
@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/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/

Weitere ähnliche Inhalte

Ähnlich wie Debugging und Profiling

Einführung in Puppet und Vagrant
Einführung in Puppet und VagrantEinführung in Puppet und Vagrant
Einführung in Puppet und Vagrant
s0enke
 
Best Practices SharePoint and SQL Installation
Best Practices SharePoint and SQL InstallationBest Practices SharePoint and SQL Installation
Best Practices SharePoint and SQL Installation
Samuel Zürcher
 

Ähnlich wie Debugging und Profiling (20)

JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
 
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET Core
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET CoreHands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET Core
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET Core
 
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von AngrybirdCloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
 
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
 
Ist GraphQL das bessere REST
Ist GraphQL das bessere RESTIst GraphQL das bessere REST
Ist GraphQL das bessere REST
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
 
High performance mit PHP
High performance mit PHPHigh performance mit PHP
High performance mit PHP
 
GWT
GWTGWT
GWT
 
Continuous Lifecycle 2013: Testgetriebenes Arbeiten im Betrieb
Continuous Lifecycle 2013: Testgetriebenes Arbeiten im BetriebContinuous Lifecycle 2013: Testgetriebenes Arbeiten im Betrieb
Continuous Lifecycle 2013: Testgetriebenes Arbeiten im Betrieb
 
Einführung in Puppet und Vagrant
Einführung in Puppet und VagrantEinführung in Puppet und Vagrant
Einführung in Puppet und Vagrant
 
C/ C++ for Notes & Domino Developers
C/ C++ for Notes & Domino DevelopersC/ C++ for Notes & Domino Developers
C/ C++ for Notes & Domino Developers
 
Best Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptBest Practices für TDD in JavaScript
Best Practices für TDD in JavaScript
 
Node.js
Node.jsNode.js
Node.js
 
Node.js Security
Node.js SecurityNode.js Security
Node.js Security
 
Der Status Quo des Chaos Engineerings
Der Status Quo des Chaos EngineeringsDer Status Quo des Chaos Engineerings
Der Status Quo des Chaos Engineerings
 
mongoDB im Einsatz - Grundlagen
mongoDB im Einsatz - GrundlagenmongoDB im Einsatz - Grundlagen
mongoDB im Einsatz - Grundlagen
 
Ladezeiten Verbessern - Css Und JavaScript Komprimieren
Ladezeiten Verbessern - Css Und JavaScript KomprimierenLadezeiten Verbessern - Css Und JavaScript Komprimieren
Ladezeiten Verbessern - Css Und JavaScript Komprimieren
 
elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09
 
Best Practices SharePoint and SQL Installation
Best Practices SharePoint and SQL InstallationBest Practices SharePoint and SQL Installation
Best Practices SharePoint and SQL Installation
 

Mehr von Sebastian Springer

Mehr von Sebastian Springer (20)

HTMX - ist das die nächste Revolution im Web?
HTMX - ist das die nächste Revolution im Web?HTMX - ist das die nächste Revolution im Web?
HTMX - ist das die nächste Revolution im Web?
 
Schnelleinstieg in Angular
Schnelleinstieg in AngularSchnelleinstieg in Angular
Schnelleinstieg in Angular
 
Creating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.jsCreating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.js
 
Divide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.jsDivide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.js
 
From Zero to Hero – Web Performance
From Zero to Hero – Web PerformanceFrom Zero to Hero – Web Performance
From Zero to Hero – Web Performance
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 
A/B Testing mit Node.js
A/B Testing mit Node.jsA/B Testing mit Node.js
A/B Testing mit Node.js
 
Angular2
Angular2Angular2
Angular2
 
Einführung in React
Einführung in ReactEinführung in React
Einführung in React
 
ECMAScript 6 im Produktivbetrieb
ECMAScript 6 im ProduktivbetriebECMAScript 6 im Produktivbetrieb
ECMAScript 6 im Produktivbetrieb
 
Streams in Node.js
Streams in Node.jsStreams in Node.js
Streams in Node.js
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJS
 
Testing tools
Testing toolsTesting tools
Testing tools
 
Typescript
TypescriptTypescript
Typescript
 
Reactive Programming
Reactive ProgrammingReactive Programming
Reactive Programming
 
Warum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser machtWarum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser macht
 
Lean Startup mit JavaScript
Lean Startup mit JavaScriptLean Startup mit JavaScript
Lean Startup mit JavaScript
 
Webapplikationen mit Node.js
Webapplikationen mit Node.jsWebapplikationen mit Node.js
Webapplikationen mit Node.js
 
Node.js für Webapplikationen
Node.js für WebapplikationenNode.js für Webapplikationen
Node.js für Webapplikationen
 
JavaScript Architektur
JavaScript ArchitekturJavaScript Architektur
JavaScript Architektur
 

Debugging und Profiling