Fixing JavaScript Bugs

4 powerful mechanisms to assist you in fixing JavaScript bugs
- as soon as they appear

By Dr Alex

Even the best of web developers make errors - and being able to find them and fix them as soon as they appear is essential. Any lingering problems undermine your visitor's faith in you and damage your reputation.

Bugs can be present even if you do not write any JavaScript code - adding someone else’s scripts may cause a range of problems due to logical errors.

In practice, most developers spend 10% of the time writing code and 90% of the time chasing bugs.

So, how do you go about fixing JavaScript bugs - quickly and effortlessly, without wasting your time?

There is a way to eradicate all errors in no time and ensure your JavaScript code stays error-free, by using 4 powerful mechanisms built into JavaScript Editor, a versatile program that can handle everything from designing tools like the pregnancy calculator to stock charting software:
 

1. Syntax check your JavaScript code

Examples of syntax errors are mistyping the name of the variable or forgetting to close a string, mismatched parentheses or braces, etc. When you use JavaScript in your web pages, the browser will not report an error unless it tries to execute that part of the script.

Some parts of the script might be rarely executed, with the errors remaining hidden for days, months or even years.

Having hidden syntax errors is never the problem with JavaScript Editor: finding syntax errors is easy:

Click on the Syntax Check button (or press Ctrl+F8)

If you made an error, JavaScript Editor locates it in no time, highlights it and explains it for a speedy correction:

You can find out the detailed explanation at the JavaScript Syntax check section of the JavaScript Editor reference.

Check it out...

Pregnancy calculator (JavaScript at its best!)

2. Effortlessly test your code - immediately after writing it

JavaScript Editor makes testing your code exceptionally easy - just highlight the JavaScript code you want to test and click Execute.

No web page or a driver function needed, this unique feature lets you run the selected code straight from the integrated environment, for example:

function factorial (n)
{
    if (n==0) return(1);
    return (n * factorial (n-1));
}
 
factorial(5);

In this example, clicking the Execute button runs the script and displays "Script returned: 120" at the status line.

The ability to highlight and immediately execute JavaScript code is a great time-saver and lets you see if the code performs as expected.

 

3. Evaluate your functions at run-time

Traditionally, to test a function you have to:

Code a driver function
Set alerts to see the return value, and
Remove all this extra code when the testing is done. 

Luckily, none of this is needed when you do black-box testing with JavaScript Editor:

Simply call any JavaScript function that is available to the Web page, specify the parameters (if any), and observe the return value.

This one-of-a-kind feature makes testing a breeze.

This mechanism is fully explained at the Testing JavaScript code page of the tutorial.
 

4. One-click debugging with breakpoints and line-by-line execution

Finally, there will be cases when the only way to locate and eradicate logical errors is to set your breakpoints, run your code line-by-line and watch your variables.

Other JavaScript debuggers force you to:

Open a browser

Navigate to a page you wish to debug

Open the page for debugging

Switch back to the debugger and list the processes you can connect to

Select the one with your page - and finally you are ready to start debugging...

...this bunch of steps takes one single click in JavaScript Editor.

In our trials, single-click debugging and greatly improved watch lists and variable inspectors mean easier and over 350% faster debugging.

JavaScript debugger tutorial gives you in-depth instructions on stepping through the code, using the Variable Watch window, viewing the stack frames, inspecting variables, and other aspects of debugging your code.
 

Putting it all together

Fixing JavaScript bugs does not need to take 90% of your time - save this time for writing your code!

Four powerful mechanisms let you find and eradicate bugs in your JavaScript code as soon as they appear: syntax check, testing your code - immediately after writing it, evaluating your functions at run-time, and one-click debugging with breakpoints and line-by-line execution.

...

Ensure your web pages are error-free with JavaScript Editor