Und es geht doch! Tools und Debugging für JavaScripter

Transcript

1. Ingo Rammer| thinktecture Und es geht doch! Tools und Debugging für JavaScripter think mobile!
2. Ingo Rammer •  Gründer und technischer Consultant bei thinktecture •  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!
3. Editing/IDE •  JSDoc-Kommentare –  Visual Studio –  WebStorm •  JSHint/JSLint •  Chrome Canary Workspaces 3
4. Transfer-Optimierung •  Resource Combination mit ASP.NET MVC •  Aber wichtig: Minification für Enterprise Apps evtl. nicht notwendig – evtl nur "Concatenation" 4
5. Debugging •  Debugging Tools & Commands (console …) –  IE mit Visual Studio –  Chrome mit WebStorm –  Chrome alleine •  Debugging auf Gerät ("Remote Debugging") •  Generell –  Reload-bei-F5! –  Live-Style Editing (Canary Workspaces) 5
6. Console/Chrome •  Console –  console.log(), .warn(), .error() –  console.dir() –  console.time("xyz"),.timeEnd("xyz") –  console.group("foo"), .groupEnd("foo") –  Rechter Mausklick -> "Filter", Preserve Log •  Timeline –  CPU –  Speicher •  Angular-Addin ("AngularJS Batarang") 6
7. 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 7
8. Unit Testing •  Jasmine (Tests, Fakes, Spys and Mocks) •  Karma (Test runner) •  Protractor •  Mocha 8
9. Slides: https://speakerdeck.com/ingorammer @ingorammer ingo.rammer@thinktecture.com http://www.thinktecture.com