Testable JavaScript

Chapter 7. Debugging

Debugging sucks. I heartily recommend not doing it. For those rare times when you must, however, there are many great tools and techniques to assist you.

In-Browser Debugging

Debugging client-side JavaScript invariably leads to using the debuggers provided by the various browsers themselves, or extensions to the browsers. You can view the current market share of each browser worldwide, or in your region, at the StateCounter website. Figure 7-1 shows the graph as of October 2012.

Of course, your web server logs will provide the most accurate assessment of browser usage for your application, but according to the global statistics shown in Figure 7-1, usage of Google Chrome is on the rise while all other browsers are either declining or stagnant. In terms of specific browser versions, Figure 7-2 shows that as of October 2012, use of Chrome 17 and IE 9.0 was rising, while use of all other major browser versions, representing only about a 15% share of the market, was falling. The scariest part of the graph in Figure 7-2 is the dotted line. This line represents mobile and tablet browsers, and its position in the graph indicates that these browsers are used more than the others.

We will discuss debugging on mobile and tablet browsers later in the chapter. In the meantime, let’s take a quick look at the various debuggers each major desktop browser provides. I will highlight some basics and differences between them, but for the most part they are similar and are constantly ...