Solved

How to debug js... find the bug.

Posted on 2013-05-23
4
222 Views
Last Modified: 2013-06-28
I have two questions:

Q1: What is a proper way to debug js code? I have Fire Fox DOM inspector just in case.
Q2: Why alert("aaaa"); at line 46 is not firing?

Starting from the very top, I have moved alert("aaaa"); down to spot the portion of the code that is not working (does not fire alert("aaaa");).

Do you see what the problem is?

Thank you.
window.onload=initAll;
var xhr=false;
var xPos, yPos;

function initAll(){
	var allLinks = document.getElementsByTagName("a");
	
	for (var i=0; i<allLinks.length; i++){
		allLinks[i].onmouseover = showPreview;
	}
}

function showPreview(evt){
	if(evt) {
		var url=evt.target;
	}else{
		evt = window.event;
		var url=evt.srcElement;
	}
	xPos=evt.clientX;
	yPos=evt.clientY;
}

if (window.XMLHttpRequest) {
	xhr = new XMLHttpRequest();
}
else {
	if (window.ActiveXObject) {
		try {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (e) { }
	}
}

if (xhr) {
	xhr.onreadystatechange = showContents;
	xhr.open("GET", url, true);
	xhr.send(null);
}
else {
	alert("Sorry, but I couldn't create an XMLHttpRequest");
}

function showContents(){
alert("aaaa");
/*	if (xhr.readyState == 4) {
		if (xhr.status == 200) {
			var outMsg = xhr.responseText;
		}
		else {
			var outMsg = "There was a problem with the request " + xhr.status;
		}

		// Do something here with outMsg
		var prevWin=document.getElementById("previewWin");
		prevWin.iinerHTML=outMsg;
		prevWin.stype.top=parseInt(yPos)+2 + "px";
		prevWin.stype.left=parseInt(xPos)+2 + "px";
		prevWin.stype.visibility="visible";
		
		prevWin.onmousout=function(){
			documnet.getElementByID("prevWin").style.visibility="hidden";
		}
	}
*/
}

Open in new window

0
Comment
Question by:Mike Eghtebas
  • 3
4 Comments
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39192794
Hi,
I assume the closing "}" of line 22 should be in line 44:
window.onload=initAll;
var xhr=false;
var xPos, yPos;

function initAll(){
	var allLinks = document.getElementsByTagName("a");
	
	for (var i=0; i<allLinks.length; i++){
		allLinks[i].onmouseover = showPreview;
	}
}

function showPreview(evt){
	if(evt) {
		var url=evt.target;
	}else{
		evt = window.event;
		var url=evt.srcElement;
	}
	xPos=evt.clientX;
	yPos=evt.clientY;

if (window.XMLHttpRequest) {
	xhr = new XMLHttpRequest();
}
else {
	if (window.ActiveXObject) {
		try {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (e) { }
	}
}

if (xhr) {
	xhr.onreadystatechange = showContents;
	xhr.open("GET", url, true);
	xhr.send(null);
}
else {
	alert("Sorry, but I couldn't create an XMLHttpRequest");
}
}
function showContents(){
alert("aaaa");
/*	if (xhr.readyState == 4) {
		if (xhr.status == 200) {
			var outMsg = xhr.responseText;
		}
		else {
			var outMsg = "There was a problem with the request " + xhr.status;
		}

		// Do something here with outMsg
		var prevWin=document.getElementById("previewWin");
		prevWin.iinerHTML=outMsg;
		prevWin.stype.top=parseInt(yPos)+2 + "px";
		prevWin.stype.left=parseInt(xPos)+2 + "px";
		prevWin.stype.visibility="visible";
		
		prevWin.onmousout=function(){
			documnet.getElementByID("prevWin").style.visibility="hidden";
		}
	}
*/
}

Open in new window

Otherwise the variable "url" is undefined.

HTH
Rainer
0
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39192812
And for debugging:
either FireBug, IEDev Tools or Iron (Chrome based browser).
Depending on the content/references sometimes the site jsfiddle.net
0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 39192981
How do you use FireBug to check js?

It is not working yet. There is a new question at:

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28137786.html

with the entire fiel uploaded to be tested.

Thanks,

Mike
0
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 500 total points
ID: 39197472
Hi Mike,
the console window in Firebug normally shows syntactical errors (missing ";",...).
For logical / workflow related "bugs" you normally set a breakpoint to the entry point (e.g. your initall function) and then step through the code, setting watches where necessary.

HTH
Rainer
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
ajax jquery 3 25
Binding a Grid in Javascript 5 45
insert ID of database value into database instead of text value from text field 23 30
Why is initialize not a function? 8 25
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question