by Ashutosh Sharma (@toshsharma) on Friday, 2 August 2013

+16
Vote on this proposal
Status: Submitted
Section
Full talk

Technical level
Intermediate

Objective

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

Description

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: