JavaScript Cookbook, 3rd Edition

Chapter 11. Browser Tools

As a web developer, the browser is the window through which the world accesses your creations. It also provides helpful tooling for developing and testing your sites. It is a worthwhile investment to learn how to use your browser’s development tools so that you may better and more easily debug your code. In this chapter we’ll cover several useful features for debugging, profiling, and analyzing JavaScript.

For simplicity, all of the examples in this book will make use of Google Chrome’s Developer Tools (DevTools). At the time of writing, Chrome’s usage makes up over 65% of the global browser share. Most other browsers offer similar functionality. Mozilla’s Firefox Developer Edition is an excellent alternative with useful developer features.

Debugging JavaScript

Problem

You need to know the value of a variable at a specific point in your JavaScript code’s execution.

Solution

Use a breakpoint to inspect code values and types. When setting a breakpoint, the browser’s debugger will stop at the point of the breakpoint’s code execution and display each of the current values in scope. It is then possible to step through the code or allow the JavaScript to finish executing. Figure 11-1 shows a screenshot of code paused on a breakpoint.

Figure 11-1. A screenshot of the Chrome debugger with a breakpoint set

To set a breakpoint on a specific ...