JSFoo 2013

Developers will learn about debugging techniques and recent advancements to tools that can help them become more productive while debugging their web applications.

Outline

In this talk, I’ll discuss tools and techniques for debugging JavaScript effectively. The talk will also include tips and tricks for debugging as well as lesser-known features of Chrome DevTools. It will be based on my own learnings and will include things I wish someone had told me about earlier, that would’ve made my JavaScript debugging a lot easier.

Proposed outline:

• Using the right tools
• Modern JavaScript debugging techniques
  • Source Maps
  • DOM Breakpoints
  • Event Listener Breakpoints
  • Event Listener Inspection
  • Conditional breakpoint logs
• Useful Chrome DevTools Features and API
  • Console API
  • Command line API
  • Useful keyboard shortcuts
  • Edit and continue (JavaScript)
• Tips and Tricks for Effective Debugging
  • Working with jQuery
  • Pausing on exceptions (all and uncaught)
  • Pretty-print
  • Versioning .js files, disabling the cache
  • $0-$4, $_: Recently selected elements and evaluated result
  • debugger;
  • Initiating JS code for network requests
  • High-precision timing
  • Cloning JS objects for logging

Speaker bio

I’m a Senior Computer Scientist at Adobe (Noida office). My work involves exploring web technologies and building prototypes of web development tools. My full-time job requires me to work with JavaScript, HTML and CSS.

I’ve spoken at the following conferences:

• World Wide Web 2012: Better Web Development with WebKit Remote Debugging
• HTML5 Developer Conference 2013: Pro JavaScript Debugging
• JSDay 2013: Modern JavaScript Debugging

Links

• Twitter: https://twitter.com/zorder/
• My blog: http://deceptiveweb.com/blog/
• Bio: http://deceptiveweb.com/blog/about/