2007 April | SweetVision

19
Apr/070

Debugging using Conditional breakpoints with Firefox and Firebug.

Some times you have an error inside a loop that can be a real pain to get to. You certainly don’t want to put a breakpoint inside a loop and hit F10 a few thousand times until you get to the error condition. In this article, I would like to talk about a few tools in Firebug for Firefox to make debugging in these situations much easier and faster. Note, if you are not familiar with debugging, you may want to read my previous Firebug article

First, there is Continue. Continue is the function that will tell the debugger to continue executing the script until it encounters another breakpoint. In Firebug, Continue is the blue arrow pointing to the right in the upper right of Firebug. You can also use the F8 key to continue. You can use continue inside a loop to skip to your breakpoint in the next iteration of the loop.

Perhaps the most important tool for debuging inside of loops is the conditional breakpoint. You can set a condition on a breakpoint so it will only break when a specified condition is true. Giving the following code (open debug loops example):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1: &lt;SCRIPT LANGUAGE="JavaScript"&gt;

2:

3: function init(){

4:  var myArray = new Array(99);

5:

6:  for(i = 0; i&lt;99; i++){

7:      myArray[i] = i*2;

8:  }

9:

10:     myBody = document.getElementsByTagName("body").item(0);

11:     for(i = 0; i&lt;=99; i++){

12:         myBody.innerHTML += myArray[i];

13:         myBody.innerHTML += "&lt;br /&gt;";

14:     }

15: }

16:

17: &lt;/SCRIPT&gt;

18: &lt;BODY onload="init();"&gt;

19:

20: &lt;/BODY&gt;

21: &lt;/HTML&gt;

I could put a breakpoint on line 12, but I would have to hit F8 (Continue) 99 times to get to the end of the loop, which can get tiresome. Something much less tiresome and much more efficient is to attach a condition to the breakpoint. A condition can be added to a breakpoint by right clicking on it. Right clicking on a break point will bring up a pop up that will allow you to enter a condition for the breakpoint. In the case of the code above I am going to use ‘i=99′, so my code execution will break when the variable ‘i’ is equal to 99.

By using conditional breakpoints you can easily conquer errors in your loops, find those pesky random values that break everything, and save time getting to the core of the issue.

Filed under: Debugging, FireFox, Firebug, JavaScript, breakpoint, conditional, programming

No Comments

15
Apr/074

Debugging JavaScript in Firefox with Firebug

In this article I would like to cover some of the basics of using Firebug to debug JavaScript in Firefox. If you do not have Firefox or the latest version I suggest you download Firefox, install it then get the Firebug extension. There is simply no better solution for debugging JavaScript than Firefox and Firebug at least not from what I have seen.

If you want to debug JavaScript in Internet Explorer check out this post: Debug JavaScript in Internet Explorer

Firebug provides many features that help you write better code for your web sites from Inspecting HTML to debugging scripts. The latter being one of the most important additions to the web application programming arsenal to come along in a long time, especially in this day and age of web 2.0 and AJAX. If you are familiar with another IDE such as Visual Studio, debugging in Firebug will be very familiar. All of the tools you are used to, well all of the important ones anyway, are there.

If you have just installed Firebug it is likely disabled by default. Click on the Tools menu in Firefox then the Firebug menu and finally if Disable Firebug has a check next to it, click it to remove the check. Alternately, you can press F12 then click the Enable Firebug link.

So for this article we need just a simple html file with some JavaScript in order to go over the basics. Following is a block of html you can use or you can download the html file here.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Debug Example</title>
	<script language="javascript" type="text/javascript">
		function init(){
			var myDiv = document.createElement("div");
			var bodyNode = document.getElementsByTagName("body").item(0);;
			myDiv.style.backgroundColor = "#aaffaa";
			myDiv.style.width = "100px";
			myDiv.style.height = "100px";
			var divText = document.createTextNode("Hello World!");
			myDiv.appendChild(divText);
			bodyNode.appendChild(myDiv);
		}

	</script>
</head>
<body onload="init();">

</body>
</html>

Once you have the debug_example_script.html on your system, open it in Firefox. It should load with no errors and have the text “Hello World” in a green box. Now that the page is open, look on the right hand side of the Firefox status bar, you should see a green circle with a check mark in it. Click that circle to open Firebug. Firebug will open as a frame in your browser and, along the top of that frame, there will be a set of menu items/tabs, starting with Console. The fourth option should be Script. Click the Script tab to open the script debugger.

Now that you have the script debugger open you should see the code from the page on the left and the Watch pane on the right. The first thing we are going to do is set a break point so we can step into the code and inspect its variables and objects. To set a Break Point, click the gray area next to the line number on which you want the code to break. In this case we want to click the gray area to the left of line number 7.

Now that we have a break point set, we want to reload the page so that our code will execute. Hit the refresh button or F5 to reload the page. You will notice that the green box does not appear on the page, and that in the left pane of the Firebug frame there is a yellow arrow on our break point. This means that the execution of the script has paused on that line so we can inspect things. In the Watch pane you will see a few items that Firebug has automatically added for us. For now you can ignore those.

Now that we are actively debugging you can mouse over variables and objects in the code to see to what value they are set. Since we have stopped on the first line of our init() function most everything is undefined as we have not actually executed any of the code. To execute the current line of code and move to the next line (step over) you can press the yellow arrow that points down on the top right of Firebug or, press the F10 key.

After pressing the F10 key you will notice that the yellow arrow next to the line numbers has moved down to line 8. Now if you hover your mouse over myDiv you will get a popup that says “div”. So line 7 has executed and created a new div element and assigned it to the myDiv variable. If you look over in the Watch pane in Firebug you will notice that myDiv says “div” and has a plus sign next to it. Go ahead and click the plus sign, this will open a tree view of the myDiv object so you can inspect all of its members.

Ok, so lets make use of stepping through code to solve a problem. First, after line 14, add the following lines to your JavaScript:


	var aNum1 = "55a";
	var aNum2 = 10;
	var ar = aNum1 * aNum2;
	alert(ar);

We are going to pretend that we do not know why our alert keeps displaying NaN. So we are going to put a break point on line 14 and step through the code. Click the break point next to line 7 to remove it and click next to line 14 to add a break point there, then hit F5 (reload the page.) Next we press F10 to step over line 15 and 16 and stop when the yellow arrow is on line 17. Now we can look at aNum1 and aNum2 in the Watch pane, and it is easy to see that aNum1 is a string and aNum2 is a number.

That should give you a basic introduction to the Firebug debugger and how it can help you develop JavaScript more efficiently. There is a lot more that Firebug can do for you so make sure to explore the tool thouroughly.

Filed under: Debugging, FireFox, Firebug, JavaScript, programming

4 Comments

11
Apr/071

The correct way to work with table elements in FireFox, IE and all other browsers

In my last post I talked about the differences between IE and Firefox when creating dynamic tables with the Document Object Model. Thanks to chatdor’s comment to my “Dynamic Tables In JavaScript for IE and Firefox” post, I realized that I was not paying attention to the full DOM. Perhaps many of us, like me, tend to only think of the Element object when thinking about manipulating the DOM, but there are a couple of higher level objects that derive from the Element object, the Table Element, and the Form Element, that make dealing with the more complex Elements easier. The good folks over at Mozilla have a great DOM reference which I almost always have open.

So, all that being said, I would like to post some code on a better way of creating dynamic tables in JavaScript with the DOM. In the following block of code we will use createElement(‘table’), to create our table but from then on we will use the Table Element’s member function insertRow and the Row’s insertCell to build the table.

1
2
3
4
5
var myTable = document.createElement('table');

var myRow = myTable.insertRow(-1);

var myCell = myRow.insertCell(-1);

var myTextNode = document.createTextNode('Hello World!');

myCell.appendChild(myTextNode);

In this block, I pass -1 into the insert functions to append the row or cell to the end of the rows or cells. Also in the example instead of setting the cell’s innerHTML or useing createElement(“text”) to make a text node and append, I instead use document.createTextNode, which is another case where there is a DOM function that is likely better to use than the less specific functions.

By using the higher level Table object and calling functions more specific to an action the code should have better cross-browser functionality.

Filed under: DOM, FireFox, IE, JavaScript, createElement, tables

1 Comment

8
Apr/072

Dynamic Tables In JavaScript for IE and Firefox

Edit : After reading chatdor’s comment I realized that I was consentrating so much on the Element that I was not seeing the whole DOM. See my new post on the DOM, for a better sample for creating table elements in JavaScript.

Recently I had the “pleasure” of dynamic creating some tables in JavaScript. In the process, I ran into and interesting issue or two. The first issue is that you cannot just append <tr> elements into a <table> element in IE. It will work, but IE will not render the rows. In IE you must create a <tbody> element, append the <tbody> element to the <table> element, then append your rows to your <tbody> element. This does not follow the W3C Row groups specification for the table specification which states that: “Table rows may be grouped into a table head, table foot, and one or more table body sections, using the THEAD, TFOOT and TBODY elements, respectively.” Note that the W3C specification states ‘may be’ whereas IE treats it as “must be.”

So, the following will get you nothing in IE but will work fine in Firefox:

1
2
3
4
5
6
var myTable = document.createElement("table");

var myRow = document.createElement("tr");

var myCell = document.createElement("td");

myCell.innerHTML = "Hello World!";

myTable.appendChild(myRow);

myRow .appendChild(myCell);

This will render a table in both IE and Firefox:

1
2
3
4
5
6
7
8
var myTable = document.createElement("table");

var myTbody = document.createElement("tbody");

var myRow = document.createElement("tr");

var myCell = document.createElement("td");

myCell.innerHTML = "Hello World!";

myTable.appendChild(myTbody);

myTbody.appendChild(myRow);

myRow.appendChild(myCell);

So now we have a table that renders in both IE and Firefox but there is still an issue remaining. Now in Firefox there is a space between the top of the table and the first row that you cannot get rid of. This is not going to be evident in all situations but will be in enough situations to be a problem. The reason for the space is that when you add a <tbody> to a table in Firefox it appears to reserve or auto include the <thead> and <tfoot> elements in the table. This is most likely done because the W3C specification states that you must have a <thead> and <tfoot> if you have a <tbody>. In order to prevent this extra space you need to add the<thead> and the <tfoot> and set their height to 0px or their display to none or something of the sort unless, of course, you are going to use them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var myTable = document.createElement("table");

var myThead = document.createElement("thead");

myThead.style.height = 0px;

var myTfoot = document.createElement("tfoot");

myTfoot.style.height = 0px;

var myTbody = document.createElement("tbody");

var myRow = document.createElement("tr");

var myCell = document.createElement("td");

myCell.innerHTML = "Hello World!";

myTable.appendChild(myThead);

myTable.appendChild(myTfoot);

myTable.appendChild(myTbody);

myTbody.appendChild(myRow);

myRow.appendChild(myCell);

This gives you a way to render tables that match in both IE and Firefox with the same code.

Filed under: DOM, FireFox, IE, JavaScript, createElement, tables

2 Comments

8
Apr/070

Color Picker version 1.0.2 released

I have made a couple of small updates to the JavaScript Color Picker and the Color Picker project page today.

I fixed a bug with IE and dynamically created tables using the DOM method. Fixed a few layout issues I came across and added the showColorInfo Option. I also updated the example pages so they are integrated into the site and layout a little better.

Enjoy!

-=Kelly

Filed under: Color, Color Picker, FireFox, IE, JavaScript, MooTools, Opera, tables

No Comments

2
Apr/072

Color Picker v1.0.1 Released

I have done some debugging of the color picker in Opera. There were problems with many of the Canvas functions needed in Opera 9.0, but things work beautifully in Opera 9.1.

I have also done some testing with Firefox 1.5 and Safari. Things do not work at all well in FireFox 1.5 as it is missing some key functionality and I am not planning on making it work in old versions of FireFox given 2.0’s wide spread install base.

Safari is close to working but I am having specific problems with the context.createLinearGradient() function in my version of Safari. Even though; when I look at the context it says that the createLinearGradient function exists it keeps returning undefined for me when I call it. If there are any Mac/Safari gurus out there that can see why this might be happening I would love to hear from you.

The Color Picker now supports FireFox 2.0, IE 7.0, and Opera 9.10.

See examples and download from the Color Picker Project Page.

Filed under: Canvas Element, Color, Color Picker, FireFox, IE, JavaScript, MooTools, Object Oriented, Opera, Safari

2 Comments

1
Apr/070

Complete JavaScript Color Picker

Welcome to the final installation of my JavaScript based Color Picker series. I have made a lot of changes to the color picker since my last installment.

Layout
I found some major problems based on the document type with the way I was laying out elements in the color picker dialog, so I decided that it needed to use the lowest common denominator in order to work reliably, so it is laid out with, *gasp* tables.

Sizing
After adding the support for the Canvas element I decided to add options to size the HueBar and the SV Box.

1
2
3
4
5
6
7
8
9
10
    if(this.Options.hueBarWidth){

        this.HueBar.setStyle("width", this.Options.hueBarWidth);

    }else{

        this.HueBar.setStyle("width", "30");

    }

    if(this.Options.hueBarHeight){

        this.HueBar.setStyle("height", this.Options.hueBarHeight);

    }else{

        this.HueBar.setStyle("height", "360");

    }

Options
I added the ability to pass in an Options object that gives the ability to customize many parts of the Color Picker.

1
2
3
4
    this.Options = {};

    if(objOptions){

        this.Options = objOptions;

    }

Open/Close
I created Open and Close member functions on the color picker object its self.

1
2
3
4
5
6
    open: function (){

        this.Container.setStyle("display", "block");

    },

    close: function (){

        this.Container.setStyle("display", "none");

    }

You can download the full source from the JavaScript Color Picker project page.

Filed under: Canvas Element, Color, Color Picker, FireFox, IE, JavaScript, MooTools, Object Oriented

No Comments

SweetVision Javascript and other web programming topics

Debugging using Conditional breakpoints with Firefox and Firebug.

Debugging JavaScript in Firefox with Firebug

The correct way to work with table elements in FireFox, IE and all other browsers

Dynamic Tables In JavaScript for IE and Firefox

Color Picker version 1.0.2 released

Color Picker v1.0.1 Released

Complete JavaScript Color Picker

Categories

Blogroll

Archives

Meta