Solved

How to debug js... find the bug.

Posted on 2013-05-23
4
211 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 33

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now