Debugging Javascript In The Browser

Follow along at:

http://itsnull.com/presentations/debuggingjs/

Created by Kip Streithorst / @itsnull

Goal

  • Demonstrate debugging power of browser developer tools (F12)
  • Debug 7 code samples in 4 browsers
  • Why 4 browsers instead of 1? Bugs are everywhere
  • Presentation == Resource (http://itsnull.com/)
    • Click on slide titles for code samples

Alert - The Debugging Dark Ages


function onAlertClick() {
  alert('alert text was clicked');
}
  • Available everywhere.
  • But, it's visible to the user and interrupts execution
  • Still useful for phone and tablets

console.log - Alert the Developers!


var clickCount = 0;
function onLogClick() {
  clickCount++;
  console.log('log text was clicked ' + clickCount);
}
  • A better alert, is logged to developer console and doesn't interrupt execution.
  • But, beware IE8/9. Calling console.log will throw an exception unless developer tools have been opened.
  • To fix IE8/9, include https://github.com/paulmillr/console-polyfill

JS Debuggers - Now that's Power

  • Breakpoints
  • Step into and step out
  • Call stack.
  • Watch window, both variables and expressions.
  • Mouse over variable and expressions.

JS Debuggers - Break On Demand?

  • Wish you didn't stop at the breakpoint every single time?
  • Add condition to a breakpoint
  • Use debugger; statement

JS Debuggers - Logpoint/Tracepoint

  • Want to use console.log but don't want to update source and reload the page?
  • Wish third-party code had console.log?
  • Have timing dependent code like ajax or event handling?
  • Use a breakpoint with a condition of console.log

JS Debuggers - Typos are Exceptional

  • Have missing scripts?
  • Or typos?
  • Look for uncaught exceptions
  • Debugger can stop for uncaught exceptions in IE8+, Chrome, Firefox or you can ignore them.

JS Debuggers - Caught Exceptions

  • How do you find this typo? 
    
try {
 prseInt('5', 10);
 // code to update ui
}
catch () {}
  • Can tell debugger to stop on the line exception is thrown even if it's caught in IE11, Chrome, Firefox

Console - the swiss army knife

  • The "Console" tab of the developer tools.
  • Write it as you run it
  • Access and modify any global JS variables and functions including DOM
  • When debugger is stopped, access and modify any JS variables in the current frame
  • Interact with "Elements" tab of developer tools using $0, $1

Let's debug some frameworks using Console

  • The same application written in Angular, Knockout and Ember
  • Let's use a different browser for each framework

Asynchronous debugging

  • Have a useless callstack?
  • It's probably ajax, setTimeout or setInterval, e.g. something asynchronous
  • Use IE11 and Chrome which provide call stacks before the async point

Property modification debugging

  • Have a property that is changing but don't know what is changing it?
  • Use Object.defineProperty along with debugger; statement to find the code that is updating the property
  • Works in all ES5 browsers, e.g. IE9+

Out of Time

  • Debug minified JS using sourcemaps in IE11, Chrome, Firefox
  • Performance profiling available in IE8+, Chrome, Firefox
  • DOM Breakpoints that show JS that caused change in IE11 and Chrome
  • Memory profiling in IE11 and Chrome
  • Remote debugging techniques for tablets and phones, read this article
  • View attached event handlers for DOM elements in IE11, Chrome, Firefox
  • Add event breakpoints in IE11, Chrome

Resources

The END

Kip Streithorst / @itsnull