OpenLayers 2.10 Beginner's Guide: Create, optimize, and deploy stunning cross-browser web maps with the OpenLayers JavaScript web mapping library

Firebug is a free, open source addon for Firefox. If you do not have Firefox, I recommend downloading it (it is also free and open source). However, other modern and standards based browsers, such as Google's Chrome, Apple's Safari, and Opera, also work well and have great built in developer tools.

Firebug, and other web development tools, makes the web development process much easier and quicker. What do I mean by this? With these tools, we can change anything on our site, on the fly, without editing or saving any files. We can type in JavaScript code with a command line interface and execute it immediately. We can view all the requests that our web page sends to servers, along with the server's reply. For example, if our map isn't able to get back map images from the server, we could examine the requests our page is making and find out if we have any typos or haven't set up our map layer properly.

Using these tools makes it a lot easier to develop not only an OpenLayers...

Since Firebug is an extension of Firefox, you'll need to first install Firefox. You can download it for free at http://getfirefox.com. After that, Firebug can be freely downloaded at http://getfirebug.com. When you click on the link to download Firebug, Firefox will prompt you with a message asking if you wish to install the plugin. After installing, all you have to do is restart Firefox and you'll be good to go.

If you do not already have an up to date version of Firefox installed, please do so now. After you have installed Firefox, set up Firebug by following these steps:

What Just Happened?

When Firebug is not enabled, the Firebug Icon is gray. When it is in enabled, it has an orange color—this is just a quick way for you to tell if Firebug is enabled or not for the current page you're on.

When you click on the Firebug icon (near the bottom right of your browser's window), Firebug will open and you can start using it. But before we start, let's take a look at what Firebug looks like after initially installing it and clicking on the Firebug icon:

The...

Firebug icon: The Firebug icon on the top left contains various commands and options related to Firebug when you click on it.

Page Inspector icon: This icon, a cursor inside a rectangle, is the HTML Inspector. When you click on it, your mouse cursor will identify HTML elements on the web page. So, when you mouse over anything on a website, the element will be outlined in blue and the HTML panel will open up and show you the element your mouse is over.

Each panel serves a certain purpose and all of Firebug's panels are extremely useful, but throughout the book we will be mainly focusing on the following panels:

These three panels will be used the most throughout the book. We'll occasionally come back to the other panels, but we won't spend a whole lot of time with them. However, before we conclude this chapter, let's get a bit more familiar with the Console panel, since we'll be making heavy use of it in the coming chapters.

We talked a bit about what the console panel is—essentially, a JavaScript command line. We can execute any JavaScript code we want, and interact with any page element. There are two primary components to the Console panel—the console log area and the input area.

The console log area will display information about any errors, along with displaying any code that is entered. The input area allows us to either enter a single line of code or, by clicking on the red arrow on the right side of the input box, multiple lines of code.

Before we start using the console with our maps, let's get familiar with the console by executing some JavaScript code.

We're going to do some basic JavaScript coding via the Firebug console; specifically, just calling a built in alert() function to display an alert.

We're going to introduce object literals and get acclimated with how to manipulate them now, so we can better work with OpenLayers code.

We'll use the map we created in Chapter 1 to do this example, interacting with our OpenLayers map by calling various functions of the map.

In this chapter, we learned more about how OpenLayers works. We learned how to set up and use Firebug and other Web Development tools.

We then took a look at the panels that Firebug provides and what they are used for. Finally, we spent time with the Console panel—something you'll be making extensive use of throughout this book (and when you're developing your own web maps).

This chapter aimed to provide some foundational knowledge of web development tools for getting into both OpenLayers and general web development. Web development tools, like Firebug, are one of the biggest assets in our toolkit. They speed up development time, help us identify bugs, interact with our code better, and much more.

For the code exercises in the following chapters, it will be very beneficial if you use Firebug to first test the code, to see what...