JavaScript Debugging for Beginners

Julie Pagano

Hi! I'm Julie Pagano.

Assumptions

• Browser-based JavaScript debugging.
• You are familiar with JavaScript in the browser.
• You have a basic understanding of debugging.

Hands On

The best way to learn JavaScript debugging is to try it.

These slides are interactive and built in the browser!

Follow along: bit.ly/js-debug-present

Disclaimer

The JS in this presentation is not necessarily good code.

Today we're focusing on debugging, not on code quality.

Dune

My slides have a bunch of silly Dune references because my original post does. I regret nothing.

Alert

The alert displays a dialog with the specified string value and an “ok” button to dismiss it.

alert("Hello! I am an alert.");

It will stop the JS from continuing until you click “ok”.

Alert

This is useful for debugging because you can set the alert value to something meaningful.

// I want to know if I reach this part of the code.
alert("I am here!");

// I want to know the value of foo in this part of the code.
alert("Foo: " + foo);

Alert

If you accidentally put an alert in a place that runs a lot of times, it can get annoying really fast.

// I heard you like alerts...
for (i = 0; i < 100; i++) {
  alert(i);
}

In the past, I occasionally had to kill a browser and restart it.

Alert

Thankfully most modern browsers have given us an out.

Alerts

Way back in the day, alerts were one of the main tools people used to debug their JavaScript.

Alerts

Unfortunately, the alert is a very limited tool. It can only display strings.

// I want to see all the H2s on the page.
alert($('h2'));

Well, that's pretty useless.

Alert

Why am I mentioning alerts if they’re old and limited?

Because sometimes you still need to fall back on them.

• Debugging issues on old browsers.
• Debugging on old mobile devices.

Thankfully, we rarely need them now.

Goodbye, alerts!

Hello, developer tools!

Developer Tools

My examples use the chrome developer tools.

Most other modern browsers have similar tools.

Developer Tools

Accessing the developer tools.

• Context menu
• Keyboard shortcut
• Tools menu

console

In many programming languages, you do debugging and logging in the terminal. The console is the equivalent for JavaScript in the browser.

console - errors

The console tab shows JavaScript errors.

console - command line

The console has an interactive command line that can be useful for debugging.

console - command line

// Try some math.
2 + 2

// How about some string manipulation
"the golden " + "path"

// You can even create an alert
alert("Muad'Dib!");

console - command line

// You can create variables.
var arr = [1, 2, 3];

// You can add multiple lines by pressing shift + enter.
for (var i = 0; i < arr.length; i++) {
  arr[i] = arr[i] * 2;
}
arr;

console - helper functions

The console provides a bunch of helper functions. See the command line api reference for more information.

// You can look up elements via css selectors
$$('h2');

// Or xpath
$x('//h2');

console - libraries

You can access libraries defined on the page. For example, this page has jQuery.

// You can make the page red.
$('body').css('background-color', 'red');

// That's a bit much. Let's put it back.
$('body').css('background-color', '');

console variables

You can access variables in the current context.

// The current context.
this;

// Access a variable I set in this context.
exampleVariable.join(' ');

console.log

The console.log method outputs a message in the console.

console.log("I am logging to the console.");

console.log

The JS equivalent of printing to terminal to debug.

Just like an alert, we can use it to output values or check that we reach certain places in the code.

// I want to know if I reach this part of the code.
console.log("I am here!");

// I want to know the value of foo in this part of the code.
console.log("Foo: " + foo);

console.log

Unlike an alert, console.log does not stop the code.

// This isn't nearly so annoying with console.log.
for (i = 0; i < 100; i++) {
  console.log(i);
}

console.log

Alerts could only output strings.

Console.log can output any JS object.

// It can output dom elements.
console.log($('h2'));

// It can output objects.
console.log({
  book: "Dune",
  characters: ["Paul", "Leto", "Jessica", "Chani", "sandworms"]
});

console.log

This is just the beginning. There is a lot more you can do.

See the console api reference for more.

beyond console.log

Console.log is great! Many people stop there and get by.

However, it's not always the best tool for the job.

Debugging complex JS using console.log can be tedious.

Thankfully, there are more tools!

interactive debugger intro

The developer tools have an interactive JavaScript debugger that provides a rich toolset useful for debugging your code. I find this especially useful for complex JavaScript code and code that interacts with other libraries.

interactive debugger

You can start the debugger at a specific point in your code by calling debugger.

// I want to start debugging here.
debugger;

interactive debugger test debug

The debugger will only do something when the developer tools are open.

interactive debugger more

I’m not going to go into much more detail about using interactive debugger. The debugging javascript documentation already does a great job of this, so it seems silly for me to duplicate it.

libraries & minified code

Sometimes, debugging needs to dig into interactions with other libraries you depend on.

minified vs. development

In production, minified JavaScript code is preferred. Most libraries will provide a minified version.

Minified code is hard to read and debug.

When possible, it is helpful to switch to the original code during development. Most libraries will provide unminified code.

Some libraries now provide source maps.

minified code

You can find minified jQuery in the sources tab. /bower_components/jquery/dist/jquery.min.js

You can use pretty-print to improve readability.

AJAX Requests

The network tab of the developer tools is really helpful for testing issues related to ajax requests.

Let's test it out looking at horse_js on twitter.

Performance

Another topic for another day, but here are some links.

• jsPerf
• Evaluating network performance
• Performance profiling with the Timeline
• Profiling JavaScript Performance
• JavaScript Memory Profiling

mobile

You can emulate some mobile interactions using the developer tools, so that you can do debugging on your desktop browser.

Check out the mobile emulation documentation for more information.

mobile

Debugging with real (or simulated) mobile devices.

• Remote Debugging Chrome on Android
• Quick Tip: Using Web Inspector to Debug Mobile Safari

Questions?