Home arrow JavaScript arrow Page 2 - Debugging in Javascript
JAVASCRIPT

Debugging in Javascript


Despite its widespread use, there is little support for debugging in Javascript. When scripts get complicated, the debugging process can cause even the most patient programmer to pull out their hair in frustration. Chris Root offers several tools and techniques that just might keep you from going prematurely bald during the debugging process.

Author Info:
By: Chris Root
Rating: 4 stars4 stars4 stars4 stars4 stars / 26
February 16, 2005
TABLE OF CONTENTS:
  1. · Debugging in Javascript
  2. · The Hard Way
  3. · Using Comments
  4. · Are We There Yet?
  5. · Make a Log Window

print this article
SEARCH DEVARTICLES

Debugging in Javascript - The Hard Way
(Page 2 of 5 )

If there is a situation where you can't use Mozilla or Venkman for your development, you will have to do things the hard way. Internet Explorer and Firefox both have a way to display Javascript errors, which will sometimes help. Apple's Safari also has this feature, using a separate application. Neither browser will help you if there are no syntax errors in your code. If you are trying to figure out why the wrong data is being written, or a number isn't right for instance, you're out of luck.

The most common method for debugging code in the browser is to use the alert box. It can be used to display variable contents, object names and types and loop counters. Unlike the way a debugger works however, you must write the alert function into your code.

An Example

For instance, say you are trying to determine if you have a comment before a paragraph and if you do, you want to add a second comment in the source before the paragraph. For some reason the "if" construct is not evaluating. Use the alert() function to bring up a dialog box that shows you the value for which you are supposed to be checking.

function process(pName,addedText)
{
   var paragraph = document.getElementById(pName);
   alert(paragraph.previousSibling.nodeName);
   if(paragraph.previousSibling.nodeName == "comment")
   {
      paragraph.parentNode.insertBefore(document.createComment(text),paragraph);
   }
}



So what's the problem? Well, as you can see in the screen shot, the dialog shows that the nodeName property for a comment tag in this browser (Firefox) is "#text" which means it is being parsed as a text node. You might not know this if you're used to working with the nodeName properties of other tags, such as a paragraph tag, which is simply "p." if you changed the if construct to look for "#text" it would evaluate properly.

Please note that, curiously, if you create a comment as we did above and check its node name property, it will come up as "#comment." Only comments that were in the source to start with come up as "#text," if indeed they come up at all. Comments are a node type, but they are apparently not parsed as such by most user agents when the document is loaded.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials