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

Slide 1

Slide 1 text

Yes, you can! Debugging and Tooling for JavaScript Ingo Rammer [email protected]

Slide 2

Slide 2 text

Contact, Slides and Samples @ingorammer [email protected] http://www.thinktecture.com Demos: https://github.com/ingorammer/talk-AngularJS Slides: https://speakerdeck.com/ingorammer

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Transfer-Optimisation •  Resource Combination with ASP.NET MVC •  Important: Minification might not be necessary for business applications --- maybe concatenation is enough 4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Unit Testing •  Jasmine (Tests, Fakes, Spys and Mocks) •  Karma (Test runner) •  Mocha 8

Slide 9

Slide 9 text

Demos: https://github.com/ingorammer/talk-AngularJS Slides: https://speakerdeck.com/ingorammer @ingorammer [email protected] http://www.thinktecture.com