Ingo Rammer | Thinktecture AG Und es geht doch! Tools und Debugging für Javascripter

Ingo Rammer • Gründer und technischer Consultant der Thinktecture AG • Mein Fokus – Unterstützung von Entwickler von verteilten, mobile Business- Anwendungen – HTML5/JavaScript auf Windows, iOS, Android – Interoperabilität von HTML5 mit nativem Code auf allen Plattformen @ingorammer ingo.rammer@thinktecture.com http://www.thinktecture.com Slides: https://speakerdeck.com/ingorammer think mobile!

Editing/IDE • JSDoc-Kommentare – Visual Studio – WebStorm • JSHint/JSLint • Chrome Workspaces

Transfer-Optimierung • Resource Combination mit ASP.NET MVC • Aber wichtig: Minification für Enterprise Apps evtl. nicht notwendig – evtl nur "Concatenation"

Debugging • Debugging Tools & Commands (console …) – IE mit Visual Studio – Chrome mit WebStorm – Chrome alleine • Debugging auf Gerät ("Remote Debugging“) – Chrome – Safari • Generell – Reload-bei-F5! (URL vs. impliziter Status) – Live-Style Editing (Chrome Workspaces)

Console/Chrome • Breakpoints – DOM Modifications – Exceptions – Event Listeners • Device Emulation • Storage-Explorer • Pretty-Print JavaScript

Console/Chrome • Console – console.log(), .warn(), .error() – console.trace() -> stacktrace – console.dir() – console.time("xyz"),.timeEnd("xyz") – console.timeStamp() -> Timeline Ansicht – console.group("foo"), .groupEnd("foo") – Rechter Mausklick -> "Filter", Preserve Log • Timeline – CPU – Speicher • Angular-Addin ("AngularJS Batarang")

Communication • Chrome XHR Tracing – Rechtsklick  "Export as HAR with Content" – HAR-Viewer (code.google.com/p/harviewer) • Fiddler (Windows) oder Charles (Mac) – Kann HARs importieren! • PostMan für REST-Debugging

Unit Testing • Jasmine (Tests, Fakes, Spys und Mocks) • Karma (Test runner) • Protractor • Mocha

Slides: https://speakerdeck.com/ingorammer @ingorammer ingo.rammer@thinktecture.com http://www.thinktecture.com