Like most of our customers, you're probably a fan of Visual Site Designer because it allows you to steer clear of HTML code and style sheets. But what can you do when you need to look into your own website's source code?

For a brief tutorial on reading source code, take a look at this article: Reading the Source Code of a Webpage. We're going to be using Firefox with the Firebug plug-in for this article, so you may need to read this article if you have any questions about how to install and use this plug-in: Using Firebug to View Source Code.

First, go to your webpage and view the source code by either choosing View > Page Source or opening Firebug by choosing Tools > Firebug > Open Firebug. You should see code that looks similar to the code seen at the bottom of the following example:

You can click the mouse pointer icon (see arrow) and then click on any element on the page to show its corresponding HTML code in the Firebug window. In this example, we have clicked on the title and the code is shown in the Firebug window.

See all the <div> tags? Visual Site Designer creates a <div> tag for each object that you make within the program. For example, in the above image, the code <div class="Object163"> refers to a text box that was made within Visual Site Designer using the text "We'll Make Your Album a Success." Each one of those <div> tags is a different element on the webpage — text boxes, images, etc.

The following example shows the contents of a <div> tag which refers to a single item in a list on the webpage:

Therefore, if an element on your page is malfunctioning, you can select the malfunctioning element to view its code. You can then inspect the details of the HTML to try to determine what is causing a bug in the code. This is precisely why these kinds of plug-ins are referred to as "debugging tools."

For example, let's say you have some text that is formatting improperly. You would click the mouse pointer icon, click the improperly formatted text, and view the source code in the Firebug window. The border drawn around the element in the webpage might be your first indicator that something is wrong; if the box extends far beyond where the text is intended to be, you would know that this is the problem. You might also notice in the HTML code some unnecessary formatting — like a bunch of <br /> tags — which may be causing the malfunction. You would then be able to return to Visual Site Designer and change or replace the malfunctioning element as needed.