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:
- Make sure you have Internet Explorer 6+ installed.
- 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.
Figure 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).
Figure 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.
Figure 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.
Figure 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.
Figure 5 – Modifying the Microsoft logo color on the page using the toolbar
- Make sure you have Firefox 1.5+ installed.
- 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.
Figure 6 – Enabling Firebug
Figure 7 – Highlighted listing of useful functionality in Firebug
Figure 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.
Figure 9 – Using the console to monitor XMLHttpRequests
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.
Figure 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).
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.
Figure 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).
Figure 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.
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
- Variable watch
- Monitor load performance
- Understand VE API backend
Article contributed by Derek Chan (www.infusion.com). Have you got something to contribute?