The Backbase Debugger

Introduction

The Backbase debugger is a convenient and powerful cross-browser tool for analyzing the state of the web application.

Overview

The Backbase debugger is engineered for use with the Backbase architecture and provides independent access to the Model and View spaces. Having this information directly accessible can significantly speed up the development and test process. The debugger is included in the development version of the package and can easily be loaded using a shortcut keys.

The debugger consists of two main components:

• The information/error bar which is always loaded and running in the background.
• The main debugger window that can be loaded dynamically. It can be loaded by a shortcut key or by an options setting.

The Information/Error Bar

Press the Esc key to toggle the visibility of the bar. If you press the arrow on the right the bar will expand:

Figure: the Backbase debugger information/error bar.

From left to right you will see:

• A grippy to move the bar around and to place it on your favorite position. The position will be remembered after a reload.
• An icon which indicates the state of the debugger window. Grey indicates that the debugger is not loaded, red indicates that it is loaded. You can also click this icon to toggle the debugger.
• Go to the first message. This will show the first message/error reported.
• Go to the previous message. This will show the previous message/error reported.
• The current information/error message. Click it to open the debugger and view a detailed report with clickable context in the console.
• Go to the next message icon. Clicking it will show the next message/error reported.
• Go to the last message icon. Clicking it will show the last message/error reported.
• Clicking the cross icon will hide the bar. You can make it to appear again with the escape key (Esc).
• An icon to minimize the bar. Clicking it will minimize to show just the first two icons and a maximize icon.

The Debugger Window

You can toggle the debugger window in multiple ways. You can either press the <Shift>+<Esc> shortcut keys, or click the icon in the information/error bar. Clicking the close button in the window itself closes the window. If the debugger is not loaded, the engine will load it automatically. You can set to load the debugger every time you load the page by selecting the Load the debugger automatic on startup checkbox, which is in the debugger window Preferences tab.

By default the debugger will load in a browser pop-up window, this allows you to keep the debugger open and maintain logs over multiple page reloads. This setting can also be changed in the Preferences tab. The state of the debugger is saved in a cookie. This means that if you leave the debugger window open while refreshing, it will open again at the same location.

The debugger window provides access to the following information tabs:

• Console: Allows the user to write and evaluate expressions. It logs messages written by a bb.console function.
• Model: Provides an interactive overview of the application's Model space.
• View: Provides an interactive overview of the View space.
• TDL: Provides an interactive overview of defined namespaces and classes.
• Network: Provides an Input/Output inspector of all XMLHttpRequests.
• Reports: Provides system information and a summary of the elements in both the Model and the View space.
• Preferences: Provides different settings to tweak certain preferences
• Help: Provides basic help on how to use the debugger.

At the bottom of the debugger you can see the command-line interface. It is context sensitive. When for example the Model tab is selected and you have a Node selected, executing "this" will be a reference to the selected Node.

Console tab

When the debugger is loaded it will add an object bb.console to the Backbase API which you can use to log and write information to the console and expose information about what is going on in the application.

For convenience reasons, the methods exposed on the bb.console object are modeled to match the same Console API as used in the Firebug tool.

bb.console.log(object[, object, ...])

Writes a message to the console. You may pass as many arguments as you'd like, and they will be joined together in a space-delimited line.

bb.console.debug(object[, object, ...])

Writes a message to the console

bb.console.info(object[, object, ...])

Writes a message to the console with the visual "info" icon and color coding.

bb.console.warn(object[, object, ...])

Writes a message to the console with the visual "warning" icon and color coding.

bb.console.error(object[, object, ...])

Writes a message to the console with the visual "error" icon and color coding.

bb.console.assert(expression[, object, ...])

Tests that an expression is true. If not, it will write a message to the console and throw an exception.

bb.console.dir(object)

Prints an interactive listing of all properties of the object.

bb.console.dirxml(node)

Prints the XML source tree of an HTML or XML element.

bb.console.group(object[, object, ...])

Writes a message to the console and opens a nested block to indent all future messages sent to the console. Call bb.console.groupEnd() to close the block.

bb.console.groupEnd()

Closes the most recently opened block created by a call to bb.console.group.

bb.console.time(name)

Creates a new timer under the given name. Call bb.console.timeEnd(name) with the same name to stop the timer and print the elapsed time.

bb.console.timeEnd(name)

Stops a timer created by a call to bb.console.time(name) and writes the elapsed time.

bb.console.count([title])

Writes the number of times that the line of code where count was called, was executed. The optional argument title will print a message, in addition to the count.

Model/View tab

In those tabs you can inspect the complete Model/View DOM tree, you can find a node by clicking the Inspect button, or you can browse through the tree on the left. The right-side tabs exposes:

DOM Node

Different objects hosted on the node selected

Layout

Shows the position of the node based on the viewport.

Computed Style

Shows the current style which is set on the viewNode

TDL tab

In this tab you can inspect the complete namespace and class structure TDL provides you can find a class by drilling down the namespaces and classes. It's possible to see from the classes on the left side the:

Descends

The classes that derive from the current class.

Extends

The classes that the current class inherits from.

Implements

The interfaces that the current class implements.

On the right side of the screen there is an overview of the different properties of the class.

Network tab

In this tab you can inspect the XMLHttpRequests occurring in the application. You can see:

Request Headers

The headers send to the server on request

Request Body

The body (data) send to the server on request

Response Headers

The headers send from the server when returning the request

Response Body

The response text of the request returned by the server

Reports tab

In this tab you can inspect different reports which are defined inside the debugger. You can also create your own reports by checking out the reports folder inside the debugger folder.

Preferences tab

In this tab you can toggle the following behavior:

• Load the debugger automatic on startup
• Load the debugger inside a Browser pop-up window
• Use the global console variable also (overwrite the possible other implementations)
• Show Inherited Attributes / Properties / Methods in DOM Tab
• Show Base Node Attributes / Properties / Methods in DOM Tab
• Show Inherited TDL Attributes / Properties / Methods
• Show Base Node TDL Attributes / Properties / Methods

Help tab

This tab provides instructions for using the debugger.

Closure

Having read this examples page you will have a good understanding of the Backbase debugger. Press the <Esc> key to see the error bar in action or the <Shift>+<Esc> keys to open the debugger window.