Chapter 6

Debugging

Software developers make mistakes. You can avoid many of these mistakes by taking the test-driven development (TDD) approach. Nevertheless, you will still find yourself in situations where you have to manually debug an application. In this chapter, we introduce a few tools and methods to make our lives easier in this respect.

In order to debug an application, you need a tool that monitors the running of the application. With this tool, you can set breakpoints at which the application execution will stop. You can then analyze the current state of affairs. In addition, you can look into changes in the application states one step at a time.

Chrome Developer Tools

Without question, the Chrome Developer Tools are some of the most popular and frequently used web debugging tools. These tools come with the Google Chrome browser and offer a variety of useful utilities. We deal with some of these utilities in this section.

You can open the Chrome Developer Tools in one of these two methods. First, you can select the Inspect Element menu item on the context menu that appears when you right-click on a web page. Second, the keyboard combination Ctrl+Shift+I (or Cmd+Alt+I on the Macintosh) opens this view. As long as no other settings are currently open, you can open a new area at the bottom of the browser currently executing the program.

The Elements Tab

In the Elements tab you can analyze and manipulate the current document object model (DOM). As you can see in Figure 6.1, the DOM is rendered as a navigable XML structure. The syntax highlighting makes the HTML code very readable. If you move the mouse over one of these structures, you will see the corresponding container in your browser window with a partially transparent blue layer. If you select an element with a mouse click, you will see information about this element at the right portion of the window. This information is contained in various panes to structure a large amount of data about the HTML element. You can then examine the CSS styles applied to this element.

Figure 6.1: The Element Tab of the Chrome Developer Tools

With a double click, you can manipulate an HTML element. If you double-click on an element or attribute, a small text box will open to allow you to change the current value. You can simply type a new value and press Enter. Numerical values can be incremented or decremented with the arrow keys.

The DOM Breakpoints submenu shows you the current registered breakpoints for DOM manipulation. This tool is very useful, because there may be situations where it is not fully clear which part of your JavaScript code modifies a certain HTML element. By right-clicking on the corresponding element, you can set a breakpoint under Break on.. to modify an attribute directly, delete an element or modify a subtree. If a statement activates this breakpoint, processing is stopped and it jumps to the corresponding line of JavaScript code.

The Console

Under the Console tab, you can view the consoles of the currently opened tabs. Here, you can look at different log results and filter them by log level. In addition, you can enter a JavaScript statement in an entry field in the console. You can also evaluate these statements directly in the context of the current website. In this case, the console makes it easier for you by providing automatic completion. The return value of an executed statement is also provided directly after the execution. If the return value is an object, you can analyze it in the console. The console thus provides a tree-like view. The function clear() is also available in the console. This allows you to delete the current console results. With the console you can export and manipulate all variables that are defined in the current website. In addition, you can select HTML elements from the DOM easily using the function $(). The syntax should be familiar to most web developers. You can pass a string representation of a CSS selector to this function using the style made famous by jQuery. The return value is a reference to the first correct element or null if there is no match.

Figure 6.2: The Console tab of the Chrome Developer Tools

When analyzing an AngularJS application, you usually have access to the global variable angular. Through this variable, you can call the angular.element() function, which allows you to select DOM elements by passing a CSS selector. DOM elements returned by angular.element() include functions you can call to analyze specific AngularJS constructs. For example, you can call the scope() function to obtain the currently valid scope for the selected element.

You can learn more about angular.element() from this web page:

http://docs.angularjs.org/api/angular.element

The Sources Tab: Debugging JavaScript Code

The Sources tab provides an overview of all JavaScript files that have been loaded from the current website. In this tab you can define breakpoints in your source code at which the application would stop and you can analyze the current application states.

Figure 6.3: The Sources Tab of the Chrome Developer Tools

Like in any powerful integrated development environment (IDE), you can set a breakpoint in any line of code. Double-clicking on a line toggles the breakpoint on that line. If the runtime environment succeeded in executing your script on a line marked with a breakpoint, the application will stop at that point. You can then analyze the scope of the current function and possibly the inherited scopes too. When you are no longer interested in the current state, you can continue or run the program to the next breakpoint.

The following keyboard can be used to help you with debugging.

• ▪ F8 – Resume the program
• ▪ F10 – Step over the next function call
• ▪ F11 – Step to the next function call
• ▪ Shift+F11 – Step out of the current function call

If you are debugging a website that serves minified JavaScript code, you can format the source code automatically using the pretty printing option. This also allows you to set breakpoints on any line in the minified source code. The option can be found in the editor and is represented by an empty JavaScript object in the object literal notation. To analyze general exceptions in a web application, you have these options on the pause function:

• ▪ Do not pause on exceptions
• ▪ Pause for all exceptions
• ▪ Pause for all uncaught exceptions

Thanks to this function, you can uncover errors that are swallowed by try-catch blocks and that have not been dealt with properly.

Summary

• ▪ The Chrome Developer Tools are a set of valuable tools for every web developer.
• ▪ In the Elements tab you can investigate and manipulate the current DOM. In addition, you can use breakpoints to pause DOM manipulations.
• ▪ The Console tab provides an interactive console that allows you to execute JavaScript code in the current context of the website. You can also select DOM elements with CSS selectors.
• ▪ You can examine the loaded JavaScript files and set breakpoints in the Sources tab.

Batarang: Inspecting A Running AngularJS Application

In addition to the established standard tools such as the Chrome Developer Tools, Firebug and various JavaScript debuggers, there is a special tool that you can use to inspect a running AngularJS application. With the Chrome extension Batarang, you can view information about the state and performance of an AngularJS application. You can investigate the server’s individual dependencies, measure the execution times of controller functions and see relevant information about scopes. It is this last aspect that makes Batarang a must for so many developers. Project Batarang is an open source project created by Brian Ford. The source code is available from this GitHub site:

https://github.com/angular/angularjs-batarang

Scroll down to see the installation instructions. You can either install Batarang from the Chrome web store or from the source. The former is the easier method of installation, all you can do is click the link and confirm you want to install it. Once Batarang is successfully installed, a tab named AngularJS will be added to the tab collection of the Chrome Developer Tools. Within the AngularJS tab, there are five subtabs: Models, Performance, Dependencies, Options and Help. There is also a checkbox named Enable that you have to check to start using Batarang.

Looking into Scopes

As discussed in Chapter 2, “Basic Principles and Concepts,” scopes form the connecting link between the model layer and the presentation layer. Many people soon wonder which data they can access on a view or which variables are defined within a scope. Since the states of a scope changes during program execution, it is sometimes useful to look into the scope when the program is running. Batarang offers exactly this feature in the Models subtab. The subtab provides you with an overview of the current scope hierarchy of the running application.

By selecting a scope, you can look at the current variable allocation. The three digit number behind a scope represents the scope ID. It is worth mentioning that you can view your scopes and bindings in the Options tab. This occurs via simple CSS classes, which draws a red rim around the respective elements for which a new scope has been created. With this function, a developer who does not completely understand the concept of scope can see it visually. Also, after the installation of Batarang, you can find more features in the Elements tab of the Chrome Developer tools.

As soon as you select a DOM element in the overview, you will find the element’s valid scope in the information column under the AngularJS tab. Unlike the model analysis in Batarang, the scope variables internal to AngularJS, which can be recognized by the prefixes $ and $$, are not hidden. In addition, Batarang stores a reference to the selected scope in the global variable $scope. You can then analyze or manipulate a selected scope by using the console.

Figure 6.4: Scope Analysis with Batarang

Figure 6.5: Issuing scope in the console

Measuring Function Execution Time

Unlike most other similar frameworks, AngularJS uses dirty checking to create two-way data binding. This means that at any given time, all scopes that can be manipulated will be examined for changes in order to update the dependent components accordingly. This type of calibration makes developing with AngularJS very convenient and easy, because you can work with ordinary JavaScript objects in the data layer and not have to inherit from special framework constructs. In a complex application, however, dirty checking can lead to problems: as soon as examining the scope begins to take a long time, the application starts becoming slower.

Figure 6.6: The Run Duration Analysis of Functions

In the Performance subtab, Batarang allows you to analyze dirty checking in your application. When you activate this function, you will receive a detailed overview of the the functions that are retrieved from your application and how much time their execution takes. You can discover potential problems that can slow down your application relatively quickly.

Inspecting Service Dependencies

When an application has reached a certain size, it becomes more difficult to see through the tangle of service dependencies. This is nonetheless very important in the case that you want to split your application into different modules. In order to get an overview of the loaded services and their dependencies, Baratang provides you with a dependency graph, in which you can see how the services are dependent on each other.

Figure 6.7: Analysis of the service dependencies

Summary

• ▪ Batarang is an extension to the Chrome Developer Tools that allows you to gain additional information about an AngularJS application.
• ▪ You can analyze and manipulate a scope in many ways.
• ▪ Since AngularJS uses dirty checking, it is important to look at performance. Batarang allows you to measure the performance of a function. You can easily uncover performance problems with Batarang.

The WebStorm IDE

WebStorm is a professional IDE for development with JavaScript, HTML and CSS. It is one of the most popular development environments in this area and can be downloaded from this URL.

http://www.jetbrains.com/webstorm

http://www.jetbrains.com/webstorm/features/#zen_coding_&_emmet

Although WebStorm offers many useful features, we will focus on its debugging feature in this chapter. WebStorm allows you to pause the running of an application at the desired spot and analyze the current program state.

First, you need to install WebStorm from Chrome web store by clicking this link.

https://chrome.google.com/webstore/detail/jetbrains-idesupport/
hmhgeddbohgjknpmjagkdomcpobmllji

Figure 6.8: Jetbrains IDE Extension

When the extension is installed, the JB icon is displayed next to the Chrome address bar. Once you have installed the extension, you can create a new start configuration type JavaScript Remote Debug. You just have to provide a base URL and define a local map on your project structure.

Figure 6.9: Configuring JavaScript Remote Debug

Now start Chrome in debug mode by using the debug icon or the keyboard combination shift+F9. You can easily set breakpoints inside the IDE by clicking on the left edge of the desired location. When the application reaches one of the defined breakpoints, execution will stop.

Figure 6.10: Setting breakpoints in WebStorm

You can then examine the current stack trace and variable allocation. In addition, you can control the program execution using the following keyboard shortcuts:

• ▪ F9 – Resume the program
• ▪ F8 – Step over the next function call
• ▪ F10 – Step to the next function call
• ▪ Shift+F8 – Step out of the current function call

Summary

• ▪ WebStorm is one of the most popular IDEs for JavaScript development. It provides tools for debugging web applications.
• ▪ To connect WebStorm with Chrome, you need a special Chrome extension called JetBrains IDE Support
• ▪ Setting up the debug configuration for an application is not a difficult task. During the debug process, you can control the course of execution using keyboard shortcuts.