How to debug the MapTP Ajax API

In this tutorial we want to show how to enhance your MapTP Ajax API development process using different tools and classes.
You always should try to keep the amount of code, where a bug can be situated, as small as possible. To isolate the critical area you should analyse the code to find out if the logic was implemented correctly.
A good practice is always the dumping of test values at different points of your application, so you can see at which step the first unmeant action occurs. Further, different debug tools offer you advanced options to test your code, so we will introduce you to some of them.

I. Basics

• Check Your Deployment

  In JavaScript, like in any other programming language, you should always keep your deployment in mind. Which operating system are you using for development and in which browser (also the version is pretty important) are you testing it is always a good hint for you or others looking for a solution or trying to reproduce the problem.
  These facts are also helpful, if you want to post an issue to the forums in the MapTP Zone or to your account manager. So it's a good idea to provide this information in order to get quick solutions for your inquiries.

• The MapTP Ajax API Version

  For debugging (esp. if you want to ask for help in the forums) it's very helpful if you know the exact version of the Ajax API you are using.
  There are different ways to get this information:
  First, you can look it up in your MapTP user account, next to your "Application Key".
  Second, just read the property Map24.VERSION in your application, once the MapTP Ajax API has loaded.

• Static vs. Interactive Map

  In some parts, the techniques used by the static or the interactive map differ. So if there is a bug, make sure you mention which map type you are using and/or on which map type the problem occurs.

II. Different Ways to Debug Your Code

• Map24.Debug

The MapTP Ajax API 2.x offers a debug class by itself, named Map24.Debug. The most useful method is probably "enable", which opens a debug console in a new window.
From this console, you can get a lot of very important informations, like the communication between your application and the Web services or error and status messages.
Besides the call in the code you can also open the console with the shortcut Shift+Alt+C

Map24.Debug.enable( true, Map24.E_ALL_DEBUG );

The best place for this call is the callback function after the loading of the API is completed:

function goMap24() {
  Map24.loadApi( ["core_api", "wrapper_api"], map24ApiLoaded );
}

function map24ApiLoaded() {
  Map24.Debug.enable(true, Map24.E_ALL);
  Map24.MapApplication.init( { NodeName: "maparea" } );
}

In fact, this class can do many more useful things, just take a look at it in the documentation.

Using the API version 1.2, you can also open a console window, using the following methods of the Map24 class.

Map24.enableDebug();
Map24.openDebugConsole();

No matter, which version you are using, the console should look like this:

You can create own output in the console in different ways:

 

// will output the string "Hello World"
Map24.dump("Hello World");

// will output the value of the variable routeID
Map24.dump(routeID);

// Will output a text string and the version number of the AJAX API
Map24.dump("AJAX Version:");
Map24.dump(Map24.VERSION);

// with the optional second parameter, you can specify the depth for dumping an object/array
Map24.dump(myMultidimensionalArray, 3)

• MapTP Applet Console

  If you are using the interactive map, you can make use of the MapTP Console. Just press Shift+Alt+D when the map is focussed and a new window opens up, providing informations about your map, the objects on it and the commands you have sent.

  

  If you extent the Map24.Debug.enable command with Map24.E_DEBUG_APPLET_CONSOLE the Map24 Applet console will automatically open when you call the page.

Map24.Debug.enable(true, Map24.E_ALL_DEBUG + Map24.E_DEBUG_APPLET_CONSOLE);

• Firebug

  The Firefox add-on Firebug is probably the best debugging tool for web development, providing you many ways to look into your code. If you are not familiar with it yet, you should have a look at the firebug tutorials of Michael Sync to get an idea of the possibilites Firebug offers to the developer.
  The following example show you a way to output the AJAX API version with the firebug console:
  
  

  Note:
  You can combine Firebug and the MapTP debug classes, to take full advantage of both. For example it is possible to redirect the MapTP Console output to the Firebug console. Therefore you have to call:
  

Map24.Debug.LogToFirefoxConsole = true;

before you send the

Map24.Debug.enable(true, Map24.E_ALL);

call

• Java Console

  When you assume a bug in the applet of the interactive map you can make use of the Java Console. If you develop in Firefox, you maybe already have the "Web Developer Toolbar" add-on installed. If so, you just click on "Java Console" in the "Tools" menu of the toolbar. Otherwise you can enable the Java Console in any Browser, following these instructions.

III. Browser specific debugging

Of course, there are more browsers around than just Firefox, therefore you can't count on Firebug only. Here is a listing of debugging tools for all major browsers.

Internet Explorer

Microsoft provides an Internet Explorer Developer Toolbar for troubleshooting. In addition, there are different tools on this site that can help you testing your code in IE.

Safari

In Safari you can enable a hidden debug menu and a additional entry in your context menu called "inspect element". This provides you different tools like a Javascript console and a DOM inspector. The ways to enable it depend on the operating system you are using. On this page both the Windows-specific way and the OSX-specific way are explained.

Opera

The browser Opera also provides a Firebug-like debugging tool since version 9.0. You can install it via this page. Since Opera 9.5 a enhanced tool called Dragonfly is built in, which you can activate by clicking Tools -> Advanced -> Developer Tools.

IV. Benefit from IDEs

Integrated Development Environments can help you to be more productive when you're writing code. They highlight your code for better orientation, offer code completion for faster writing and notify you about syntax errors while you are writing. It is worthwhile having a look at Eclipse, extended with the ATF plug-in and Aptana Studio, a Eclipse fork that focusses on web development.