Basics
Creating a Document
Head and Body Elements
Formatting Text
Creating Lists
Embedding Images
URLs Explained
Linking to Documents
Creating Tables
Forms Form Basics
Input and Textarea
Select Lists
Frames Framesets
The Frame Element
Nested Framesets
Targetting Frames
Inline Frames
Tips and Tricks Meta Tags
Transition Effects
HTML Generators Create a Document
Create a List
Create a Table
HTML
Basics
Implementing CSS
CSS Syntax
Pseudo Classes/Elements
CSS Classes
CSS Properties Font Properties
Color and Background
Text Properties
Border Properties
Margins and Padding
Size and Position
Tips and Tricks Menu Buttons
Special Effects
CSS
Basics
Running a Script
Variables
Expressions and Operators
Objects.Properties.Methods
The Date Object
Strings
Regular Expressions
Defining RegExp Patterns
Branches and Conditions
Loops
Arrays Array Basics
Array Methods
Sorting Arrays

User-Defined Functions
Cookies
Windows
Frames
Tips and Tricks Image Replacement
Using Includes
Form Validation
Debugging
JavaScript
Basics
Creating a Script
Running a Script
Variables
Expressions and Operators
Strings Strings Basics
Strings and Substrings
Replacing Substrings
Regular Expressions
Branches and Conditions
Loops
Arrays Array Basics
Array Functions
Sorting Arrays
User-Defined Functions
Include and Require
Uploading Files
File Functions
Session Variables
Tips and Tricks Page Templates
Form Reply Scripts
Form Validation
JavaScript to PHP
PHP
Basics
Create and Drop
Show and Describe
Insert, Update and Delete
Querying
Join Queries
Functions
Table Locking
PHP/MySQL Functions Accessing a Database
Querying with PHP
Create and Drop with PHP
Insert and Update with PHP
Frequently Used Functions MySQL
Basics
Layout and Navigation
Page Content Style
Web Page Copy
Graphics and Animation
HTML Forms
Accessibility
Legal Requirements
MySQL
JavaScriptBasicsRunning a ScriptVariablesExpressions and OperatorsObjects.Properties.MethodsThe Date ObjectStringsRegular ExpressionsDefining RegExp PatternsBranches and ConditionsLoopsArraysArray MethodsSorting ArraysUser-Defined FunctionsCookiesWindowsFrames

Home > JavaScript Tips and Tricks > Debuggingprinter version

JavaScript Debugging

If you're new to JavaScript then you'll quickly discover that it's almost impossible to write a program of any appreciable length without an error of some kind.

JavaScript errors can be very difficult to trace since all that tends to be obvious in the browser is a wrong result or no result at all.

Debugging can be very time-consuming and disheartening so it's essential to settle on a method of writing and debugging that suits you then stick to it.

Both Internet Explorer and Mozilla browsers do produce error reports although they can be very cryptic.

Debugging in Internet Explorer

In Internet Explorer if a JavaScript error occurs a yellow icon appears in the left of the status bar with the wording "Error on page".

If you double click on the icon then an advice box will open with information about the error. In most cases the error description is so brief as to be useless however the line number on which the error occurred is provided.

The line number can be useful but you have to allow that this tells you the line on which the programme broke down and not necessarily where the error is.

The error may have occurred earlier in the programme then caused execution to halt at the line number indicated.

As well as this the line number may be misleading if the JavaScript is embedded in the HTML page as opposed to being within an include file.

Debugging in Mozilla

The error reports in Mozilla are a little more detailed than in Internet Explorer and are available via the Tools > Error Console menu that opens on top of the browser.

Types of Errors

Errors in any programming language, including JavaScript, can be divided into syntax errors and semantic errors.

Syntax refers to the grammar of a language and an example of a syntax error in an English sentence would be "Cows grass eat". This has 2 nouns followed by a verb so doesn't obey the rules of grammar.

Semantics refer to the meaning of statements. The English sentence "Grass eats cows" has a semantic error since clearly grass doesn't eat cows. However, the syntax of the sentence is correct since it does obey the rules of grammar.

Syntax errors are easy to trace and correct whereas semantic errors are much more difficult and cause the most problems.

Common Sense Tips

There are several ways to make things easier for yourself when writing programmes.

If you have a long programme, break it into logical modules using functions if appropriate.

Write each module separately and check that the output behaves as expected using the document.write method with a range of values before moving on to the next.

If All Else Fails

If the error console reports an error on a particular line but you still can't find it then go to half way down your code and insert a newline character and run the code again.

If the error console reports the error on the same line as before then the error must lie before the newline you inserted.

If the error console reports the error one line beyond the line it did before then the error must lie beyond the newline you inserted.

When you've isolated which half of the code contains the error then split this half and do the same again. Continue this until you find the line generating the error.

Bear in mind that this shows where programme execution ceased and that the cause may actually lie further back in the programme.


Privacy | Terms | Contact | Links | Sitemap | RSS Feeds RSS and JavaScript Feeds
©2010 www.webdesignworkmate.co.uk all rights reserved 
Design and Production by smallbizonline website design © 2000-2010
Valid HTML 4.01! Level Double-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0Valid CSS!
Tips and TricksImage ReplacementUsing IncludesForm ValidationJavaScript debuggingDebugging
Got any JavaScript Tips?
Send me your tip and if it's suitable I'll put it on the site, credit it to you and add a link back to your site.
Recommended Reading
Javascript the definitive guide

Javascript and DHTML cookbook

Pro javascript techniques

simply javascript