Yes, you can --- Debugging and Tooling for JavaScript (NDC London 2013)

Transcript

1. Yes, you can! Debugging and Tooling for JavaScript Ingo Rammer ingo.rammer@thinktecture.com
2. Contact, Slides and Samples @ingorammer ingo.rammer@thinktecture.com http://www.thinktecture.com Demos: https://github.com/ingorammer/talk-AngularJS Slides: https://speakerdeck.com/ingorammer
3. Editing/IDE •  JSDoc-Comments –  Visual Studio –  WebStorm •  JSHint/JSLint •  Chrome Workspaces 3
4. Transfer-Optimisation •  Resource Combination with ASP.NET MVC •  Important: Minification might not be necessary for business applications --- maybe concatenation is enough 4
5. Debugging •  Debugging Tools & Commands (console …) –  IE with Visual Studio –  Chrome with WebStorm –  Chrome standalone •  Debugging on mobile devices ("Remote Debugging") –  Chrome with Android –  Safari on Mac (also for PhoneGap-style apps!) •  Generally –  Reload-on-F5! (URL parameters vs. implicit state) –  Dynamic/Live editing (Chrome Workspaces) 5
6. Console/Chrome •  Console –  console.log(), .warn(), .error() –  console.dir() –  console.time("xyz"),.timeEnd("xyz") –  console.group("foo"), .groupEnd("foo") –  Right mouse click -> "Filter", Preserve Log •  Timeline –  CPU –  Memory •  Angular-Addin ("AngularJS Batarang") 6
7. Communication •  Chrome XHR Tracing –  Right click à "Export as HAR with Content" –  HAR-Viewer (code.google.com/p/harviewer) •  Fiddler (Windows) oder Charles (Mac) –  Can import HARs! •  PostMan for REST-Debugging 7
8. Unit Testing •  Jasmine (Tests, Fakes, Spys and Mocks) •  Karma (Test runner) •  Mocha 8
9. Demos: https://github.com/ingorammer/talk-AngularJS Slides: https://speakerdeck.com/ingorammer @ingorammer ingo.rammer@thinktecture.com http://www.thinktecture.com