Browser Debugging for Virtual Earth | Via Virtual Earth

Virtual Earth Home.

Browser Debugging for Virtual Earth

Tracing program execution and debugging code are two of the major challenges of developing JavaScript applications.  These challenges are especially apparent in Virtual Earth, which is essentially a large obfuscated JavaScript library with limited documentation on available methods and no documentation on how the backend API works.  An additional challenge when debugging Virtual Earth applications is deciphering all the CSS classes and HTML elements applied in order to display the Virtual Earth map.  Fortunately, there are many available debugging tools that can be used to help you understand the back end of Virtual Earth applications.  In this article, we will look at two popular debuggers for browsers that are compatible with Virtual Earth: the Internet Explorer Developer Toolbar (for Internet Explorer) and Firebug (for Mozilla Firefox).

The Internet Explorer Developer Toolbar

The Internet Explorer Developer Toolbar helps you inspect the Virtual Earth tiles and examine the CSS styles being applied to all the HTML elements on the map.  To install the Developer Toolbar:

  1. Make sure you have Internet Explorer 6+ installed.
  2. Run the .msi package located at https://www.microsoft.com/en-us/download

After installation, you should have a blue cursor icon located somewhere on your Internet Explorer toolbar, as shown in Figure 1.

image001Figure 1 – The toolbar icon should appear somewhere on the top of your browser

After clicking on the Developer Toolbar icon, a toolbar menu will appear on the bottom of your browser. For Virtual Earth purposes, the functions on this toolbar that you will probably find useful are the Inspect button (the leftmost icon on the toolbar) and the main area below the toolbar menu (both highlighted in Figure 2 as red squares).

image002-1Figure 2 – The inspect icon is very useful for inspecting Virtual Earth tiles

Clicking on the Inspect button will allow you to scroll down a list and inspect all the HTML elements on the page.  When you find an HTML element that you wish to look at in more detail, click on the element name and its information will populate the centre (HTML) and right (CSS) panels below the toolbar, as shown in Figure 2.

For example, in Figure 3 the left panel shows a series of <IMG> tags representing tiles from a Virtual Earth application.  Inside the center panel you will notice that the src attribute contains an actual link to this particular tile (http://r3.ortho.tiles.virtualearth.net/tiles/r0213.png?g=72).  The panel on the right shows CSS styles that apply to this HTML element.

image003-1Figure 3 – Inspecting a Virtual Earth tile

Practically speaking, you could use the toolbar to help you decide which CSS classes you may need to override when modifying the dashboard.  You could even use the toolbar to inspect the shapes, bubbles, and routes that are generated by VE.  A useful aspect about the inspect feature is that Virtual Earth onmouseover and onmouseout events will still fire when you are inspecting HTML elements.  This can be used to inspect your pushpin bubbles, as well looking at custom features you add that use these events.

image004Figure 4 – You can use the toolbar to inspect the structure of a pushpin bubble

Finally, you may want to apply CSS styles to your elements on the fly.  The toolbar allows you to do that by either using the +/X buttons inside the attribute panel (highlighted in Figure 5) or by clicking in an empty cell in the center panel and adding in your own attributes.

image005Figure 5 – Modifying the Microsoft logo color on the page using the toolbar

Firebug

Firebug is an add-on for Mozilla Firefox that has powerful JavaScript debugging and in-line console capabilities.  In order to install Firebug:

  1. Make sure you have Firefox 1.5+ installed.
  2. Install the Firebug add-on at https://addons.mozilla.org/en-US/firefox/addon/1843

After you have installed Firebug and restarted Firefox, you should see Firebug represented as a grayed out icon on the right site of the Firefox status bar.  To turn on the debugger, click the icon and select “Enable Firebug”, as shown in Figure 6.

image006Figure 6 – Enabling Firebug

When the debugger is turned on, the Firebug icon becomes a green circle with a checkmark in the center.  This indicates that the debugger is enabled and no JavaScript errors occurred on the HTML page that you are currently on (see Figure 7).

image007Figure 7 – Highlighted listing of useful functionality in Firebug

The Firebug Console allows you to test JavaScript code inline.  For example, you could run lang=EN-US style=’font-size:10.0pt;line-height:115%;font-family:”Courier New”‘>alert(‘map.LoadMap’); to see what that the VEMap.LoadMap method actually executes.  Another example is that you can use the console to directly load a GeoRSS Feed or try out undocumented Virtual Earth functions on the page.

image008Figure 8 – Adding a pushpin to the center of the map without embedding the code inside the page

The Options pull-down in the top right corner of the Console allows you to toggle what kinds of application responses and requests are viewable.  One particular feature, “Show XMLHttpRequests,” can be very useful for applications that rely on GeoRSS feeds.  By default “Show XMLHttpRequests” is turned on, and with Firebug you can monitor what requests are being sent from your application and the exact feed being returned by Virtual Earth through the “Headers” and “Response” tabs as shown in Figure 9.

image009Figure 9 – Using the console to monitor XMLHttpRequests

The Script feature in Firebug is also very useful for Virtual Earth JavaScript developers. After clicking on the Script button, you can view all the JavaScript files that are being fired on a page by cycling through the listing next to the Inspect button (highlighted in Figure 10).  The JavaScript file that you are currently viewing (mapcontrol.ashx in Figure 10) is displayed on left panel.  In the Watch panel on the right, you can view variables that are in the scope of the Virtual Earth application.

In Figure 10 you can see that the “map” object (an instance of the VEMap class) actually contains a lot of undocumented properties and methods that are not described by the current VE SDK.  This can help you to implement unsupported features by giving you complete access to the underlying methods and objects that make up Virtual Earth.  Also in Figure 10, you will notice a  “_sm” object which handles the disambiguation box for Find calls.  You may wish to use this object to input your own text in the disambiguation box or create your own boxes.

image010Figure 10 – Firebug is capable of breaking down all the Virtual Earth methods and objects available to you behind the scenes

What makes Firebug really powerful is that you can place breakpoints in your scripts and step through your code and follow the actual execution.  You can step over or step into blocks of code or methods using the arrow buttons highlighted in Figure 11, or by pressing F10 (step over) or F11 (step into).

image011Figure 11 – You can also use Firebug to step through your JavaScript code

It�s important to note that asynchronous calls will keep running in the background while you step through code, which can cause your Virtual Earth instance to crash or freeze at Firebug breakpoints.  Some notable methods that make asynchronous calls are map.Load and XMLHttpRequest.Send.

The Net feature can be used to analyze your application load times.  When selected, Firebug has the capability to show exactly which files were requested from the Virtual Earth servers and the time it took for the reply from the servers to return.  You can use this information to find ways to optimize your application load times.

image012Figure 12 – The mapcontrol.ashx (140 KB) and tile .png files make up most of the Virtual Earth load times

Finally, Firebug has file text searching provided in the blank textbox field which can be used to quickly find keywords inside the left main panel (and is also very useful for scanning through API).

image013Figure 13 – Searching for keywords using Firebug

The Firebug HTML, CSS, and DOM features behave very similar to the Internet Explorer Toolbar Inspect with its underlying features and will not be covered in this article.  In short, you may find that the Internet Explorer Toolbar is much more intuitive at analyzing HTML elements, CSS styling and looking at the DOM structure.

Conclusion

Both of the debuggers reviewed in this chapter have features that can greatly help you develop your Virtual Earth applications. The following list provides a summary of each of them:

Internet Explorer Toolbar

  • Inspect HTML elements / VEShapes / map tiles
  • Pull out and manipulate CSS styles

Firebug

  • In-line JavaScript console
  • JavaScript debugging (breakpoints and execution control)
  • Variable watch
  • Monitor load performance
  • Understand VE API backend

Article contributed by Derek Chan (www.infusion.com). Have you got something to contribute?


Post a Comment

Your email address will not be published. Required fields are marked *

  • Recent Posts

  • Tags

  • Categories