Web programming can be difficult without debugging tools, especially when dealing with JavaScript and HTTP requests. This series of screencasts shows you how to use several tools that can help you develop and debug yours Maps API mashups faster. The resources section has links to download sites for some of the tools used (Web Developer Toolbar, Firebug), which you can download before watching the screencasts if you'd like.
Click on the screenshots below to open the screencasts. Watching a screencast requires the Adobe Flash Player plug-in. You can navigate through a screencast by moving the slider or pressing the backwards/forwards buttons.
Screencast Transcript
This Firefox extension adds a toolbar with all sorts of nifty tools for web developers.
This screencast just shows how a few of them relate to the Maps API, but you should experiment with all the tools and see how you might use them in the future.
Outline Images
This tool is useful for understanding what parts of a page are images and how those images are positioned and sized. In the case of Maps, it shows you how the Maps API is really composed of many images tiled in a div.
Now you can see the map is just a series of 256*256 tiles.
Image Information
This tool is useful for seeing all the images that make up a page in their original, un-scaled and un-repeated form. It's a good way of seeing how a web designer has manipulated images with CSS in order to create their site.
Notice the URL gives an x, y, and zoom level (this is used in the getTileUrl function for map types).
Ruler
The Web Developer Toolbar comes with a Ruler that can be used to figure out exact measurements where pixel positioning is necessary, like with Maps API controls.
Drag the ruler to the new position where you'd like to put the control.
Screencast Transcript
Firefox browsers come with a native Error Console, which outputs any JavaScript/CSS/HTML errors or warnings encountered while rendering a page.
This example is meant to display 3 markers based on data in an XML file. Clearly, that hasn't happened. I can check the Error Console for any JavaScript errors outputted before I go on to more sophisticated debugging.
The Error Console is natively available in all Firefox browsers.
Errors such as undefined variables or functions will show up here, with a pointer to the line number if available.
Now it becomes obvious my error: I tried using the variable 'point' though I'd defined 'latlng'.
Screencast Transcript
Internet Explorer can be configured to display script errors and open problematic JavaScript files in a Script Debugger. Since the debugging process in IE takes a bit longer, it's recommended to debug in Firefox first and only in IE for IE-specific errors.
First we need to enable debugging (off by default).
Turn both of the disable script debugging options off.
IE will halt execution of the script with the error and line number. If you want to see the actual script causing the error, click "Yes."
The arrow points to the problem line. It is now obvious our error of defining 'latlng' and using 'point' instead.
If you don't "stop debugging", IE will stay in a halted state of execution and be unusable.
Screencast Transcript
Firebug is a Firefox extension that places a icon in your status bar that can be expanded to provide a multiple tab UI with various web development and debugging tools, a few of which we'll review in this screencast. It is an incredibly powerful tool - just be aware that having it enabled all the time may slow down your normal browsing experience.
SCRIPT tab
This tab will show you all the SCRIPT includes that are used on a webpage. It's useful for quickly checking your own JavaScript, but especially useful for studying the code used on other developer's websites.
Click on Firebug icon
The Maps API loader script.
This script tag is loading in v=2.93
The additional javascript file added by the Maps API loader script.
Obfuscated JavaScript. Not pretty (but it's a smaller download)!
NET tab
This tab shows you all the requests going over the network: retrievals of script files, images, xml http requests, etc. This is useful for debugging Maps API classes that make calls over the network for information: GClientGeocoder, GGeoXML, and GDirections.
This calls GClientGeocoder.getLatLng() which just returns a point.
Click on Firebug icon
Geocode request.
Click params to see what the request sent.
Click Response tab to see the server response.
The status code correlates to the GGeoStatusCode.
You can see that 200 is a successful query, as expected.
Let's try a query that definitely doesn't exist in the world.
The new query.
The new GGeoStatusCode.
This indicates a bad address, as expected.
HTML tab
The HTML tab in Firebug lets you inspect the DOM elements on the page, as well as edit their HTML and CSS styles. This lets you quickly play with small changes in style or content.
Mouseover parts of the page to have their HTML and CSS highlighted in the HTML tab.
You can edit the HTML here.
You can edit styles and add more here. Note that this shows where styles have cascaded from for the selected element.
Console tab
The Console tab in Firebug lets you run JavaScript on the current page, and output debug messages from console.log() statements in the current page's JavaScript. It's a powerful Firefox-only alternative for debugging.
Click for Firebug console
The console can output String messages similar to GLog.write.
The output is easy to copy and paste to elsewhere.
The console can also output more detailed information about non-String variables in your code (in this case, a GLatLng object), simply by writing console.log(variableName).
Clicking on the console output will bring you to the DOM tab with a detailed breakdown of the object's member functions and properties.
You can execute any line of JavaScript here, and it can be used to act on any global variables or IDs in the page.
Click here to toggle between single-line and multi-line JavaScript input.
The console output is displayed on the left-hand side.
Screencast Transcript
The Maps API comes with its own debug console, GLog. Though it doesn't provide the same variable inspection functionality as Firebug, it has the advantage of working on every browser in the same way and is a great alternative to alert().
This example downloads an XML file and creates markers based on lat/lng attributes in it. We'll demonstrate debugging the lat/lng with alert vs. GLog.
Now we'll add the alert() statement in the for loop.
Remember that alerts break execution of the JavaScript until the "OK" button is pressed. This can be time consuming and deceiving, as it changes the natural timing of your page functions.
Now we'll replace the alert with GLog.write().
GLog outputs your statement in a scrolling console with timestamps.
Resources
The following links should be useful for you in following this screencast or finding out more about debugging:
|
