Thursday, March 15, 2007

New Version of Javascript Debugger and Trace tool

I finally finished my project, my very own tool, my favourite application.
Javascript Debugger and Trace tool The Trace.


OK here is the detailed explanation


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. Because, to make it work you just 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 have another format to use, trace("arg1","arg2","arg3") in this option you just only give the values as arguments it will number them and print in order. this is useful to print function 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 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 elements 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, 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.

1 comment:

kunwar said...

Myself Manish Tomar from India.

You have done a fantastic job by creating this tool.
But here you can make it more useful by giving the feature to display java script file name along with the error line number, because if we are using more then one java script files, in that case it is difficult to find out the particular file which has error.