Debugging Asynchronous Javascipt

Tips on quickly debugging async bugs

When a bug occurs in a complex web asynchronous promises and ‘unpromisifiable’ callbacks, it can kill a lot of brain cells trying to debug it.

Here is an example taken from this twilio blog post about a async, await.

var request = require('request');
function getQuote() {
  var quote;
  
  request('http://ron-swanson-quotes.herokuapp.com/v2/quotes',
  function(error, response, body) {
    quote = body;
  });
  
  return quote;
}
function main() {
  var quote = getQuote();
  console.log(quote);
}
main();

In this example, the console will log “undefined” instead of the expected quote. The response from the request will come after the rest of the code gets executed.

Simplest way to debug

The simplest way to debug ansynchronous code is to console log “1”, “2”, “3”, “4”, along with the output you’re expecting. Using the above example, it would look like this:

var request = require('request');
function getQuote() {
  var quote;
  
  request('http://ron-swanson-quotes.herokuapp.com/v2/quotes',
  function(error, response, body) {
    quote = body;
    console.log('1', quote);
  });
  console.log('2', quote);
  return quote;
}
function main() {
  var quote = getQuote();
  console.log('3', quote);
}
main();

You’ll see that the output looks like this:

2 undefined
3 undefined
1 <quote>

Now you know that anything inside “request” is async and it requires some special attention to get what you want out of it.

Once you know where the problem is, you can delete* the rest of the console logs. In this example, we know that the problem occurs between numbers 1 and 2, so we can delete 3.

*After you finish debugging, remember to delete all the stray console logs in your code. It’s just good practice.

Other tools

The chrome debugger is a very helpful tool to debug async problems and almost any types of JS bugs in general. All you have to do is to set a breakpoint or a debugger statement before every console log, and once it stops, step into the next step. The code would look like this:

var request = require('request');
function getQuote() {
  var quote;
  
  debugger
  request('http://ron-swanson-quotes.herokuapp.com/v2/quotes',
  function(error, response, body) {
    quote = body;
    console.log('1', quote);
  });
  debugger
  console.log('2', quote);
  return quote;
}
function main() {
  var quote = getQuote();
}
main();

Click on the “step into” every time the console stops. If you dont know what that is, it’s this button:

Note that a couple buttons to the left, there is also a “Async” checkbox. If you check it, the console will show the entire call stack and you can click on items inside the stack to see what exactly is going on. Click on the link below to play around with it.

Asyncronous Stacktraces | Down and Dirty with Chrome Developer Tools

Special characteristics of async bugs

Async bugs have a set of easily noticable and distinct characteristics:

• The output’s order is not what you expected.
• The output has helpful response message, neither error nor success, just a simple “undefined”.
• If the asynchronous process takes too long, there might be a timeout and there will not be a response at all. This is harder to debug since it can be a whole list of potential problems starting from something as simple as your wifi on your development machine is off.
• Everything after a certain process crashes or is undefined.

There are likely to be many more characteristics, but these are probably the most common.