JavaScript Debugger and Tracer Tool

• Download source - 28 Kb

Introduction

JavaScript Tracer Tool simply covers the the function of alert(); but I took it one step forward and added some other functions to make it more useful. This application gives you the opportunity of continuously debugging and seeing each and every steps of your application, without even adding any irrelevant code to your own application.

Using the code

Tracer is a very useful application. To make it work you only have to call the trace.js file. It will run by itself.

<script type="text/javascript" src="trace.js"></script>

Here is a list of functions Tracer has. Just give them the particular elements.

• trace(): in your application you just use it as trace("hello world");, instead of alert("Hello World");. Tracer will print the result with numbering and coloring. trace() also has another format to use, trace("arg1","arg2","arg3"). In this option you just give the values as arguments and it will number them and print in order. This is useful for printing a function's arguments.
• traceArr(): this function displays the each element of an array with their positions.
• traceAssoc(): This function is for associative arrays. If you give this function an array it will show you the key and the value of each array element.
• traceStr(): This function is almost the same as traceArr() but it works for strings, and shows you the each character of a string with numbers.
• traceError()This function is for custom error messages. very suitable for Try, Catch blocks.
• RunJS tab: is for Running the JavaScript codes realtime on the page.
• Watch: When you write the ID of an Object in text box, watch follows that element's content and prompts on screen. It's quite useful for hidden elements and automatically changing values. Watch can catch more than one Element.
• Tracer also catches the runtime errors and displays them with the file name and line numbers. This feature is really useful for IE users. Error handling is optional, you can stop handling in settings tab.
• Also, the whole Tracer body is floating, that means you can move it where you want. Tracer can remember last position, last state, last tab and last setting by using cookies.

You can find more helpful information on the Online Demo page.