Debugging | SweetVision

2
Dec/083

Debug JavaScript in Internet Explorer

If you have ever had the horror of finishing up some complex JavaScript in Firefox, and when you try it in IE you just get a bunch of usless and cryptic errors that all point to the wrong line of code, this article is for you. You can actually get a full debugger for Internet Exploerer for free that is about as cabable as debugging Javascript as Firebug is in Firefox. There is no plugin or addon for IE that will give you a firebug like experience, but with a little extra downloading and work you can get a setup that will allow you to set break points and inspect objects in JavaScript applications in IE. First thing you will need to download the free Visual Web Developer Express IDE from Microsoft Visual Web Developer is like Firebug for Internet Explorer, only it is not an addon and you have to do a bunch of setup befure it will be useful. It is free but it will cost you more than 200 megs of hard drive space and about an hour of downloading and installing.

Once you have Visual Web Developer Express installed launch the IDE and create a new blank web site:
File >> New Web Site
Select “Empty Web Site” and give the project a name and click OK.

If your default web browser is something other than IE you will need to setup Visual Web Developer do debug in Internet Explorer by default.

On the right side of the IDE you will find the Solution Exploerer, right click on your solution and select “Browse With”. In the browse with window select Internet Explorer and click the Set as Default button. This will not change your system default browser just the browser that will be used by this solution by default. Once you have IE set as default for the solution you can click cancel.

Now you need to make sure IE is ready to be debugged. Open Internet Explorer, click on Tools >> Options, select the Advanced tab and remove the check from “Disable Script Debugging (Internet Explorer)” and click OK.

Now you are ready. Switch back to Visual Web Developer and press F5 to start debugging. If this is the first time you have launched this solution Visual Web Developer may display a dialog stating that a web.config could not be found. If you recieve this dialog choose “Add a new web.config…” and click ok. This should launch Internet Explorer with an error page, just type in the URL of the page you want to debug in the address bar. Once the page loads if you switch back to Visual Web Developer Express you will see all of the files loaded by the page in the Solution Explorer on the right. Double click the file with the JavaScript you wish to debug, which will open the file in the IDE. You can now set break points where you want them. Once you have your break points set switch back to IE and take the action that will execute the code you are debugging and Visual Web developer will stop on your break points letting you inspect the objects and variables at that point.

To make the process easier you can right click on the solution in the solution explorer and select “Add New Item”. From the presented installed templates choose “HTML Page”, and name it index.htm. In the head of the generated HTML add a meta refresh to go to the page you wish to debug. e.g. <meta http-equiv=”refresh” content=”0;url=http://www.yourdomain.com/pagetodebug.html” />. After adding that when you debug it will automatically redirect to the page you are working on.

Filed under: Debugging, Firebug, IE, Internet Explorer, JavaScript, breakpoint

3 Comments

26
Feb/080

Quick Tip, “Firebug breakpoints not breaking!”

When using FireBug to step through your JavaScript code in FireFox, sometimes it does not break on a line that you know is being executed. If you are like me you are like WTF, what is going on? I eventually realized that the reason FireBug was not breaking on some lines of my code was that the code I set my breakpoint on was inline and not inside a function. Apparently FireBug will not break on a line that is not inside a function. A quick fix for this is to wrap your code in a function and call the function immediately after declaring the function.

Instead of:

1
2
var foo = "stuff";

alert(foo);

Use:

1
2
3
4
5
function showFoo(){

    var foo = "stuff";

    alert(foo);

}

showFoo();

In the second block you can put breakpoints on either line inside the function showFoo() and FireBug will break when you expect it to.

For more on debugging JavaScript in Firefox check my Firebug post or my article on conditional break points.

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

No Comments

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

SweetVision Javascript and other web programming topics

Debug JavaScript in Internet Explorer

Quick Tip, “Firebug breakpoints not breaking!”

Debugging using Conditional breakpoints with Firefox and Firebug.

Debugging JavaScript in Firefox with Firebug

Categories

Blogroll

Archives

Meta