New Version of Javascript Debugger and Trace tool

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



= ONLINE DEMO & DOWNLOAD =

OK here is the detailed explanation

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. 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.

Search Bookmarklets

Hi, I wanted to share my "search bookmarks" with you,
These are very easy to use search functions

//Prototype API
javascript:w=prompt('Search Prototype API');if(w){w=w.replace(/\./g, '/');window.location.href='http://prototypejs.org/api/'+w.toLowerCase();}else void(0);
//PHP REFERENCE
javascript:w=prompt('PHP REFERENCE...');if(w){w=w.replace(/\./g, '/');window.location.href='http://tr2.php.net/manual-lookup.php?pattern='+w.toLowerCase();}else void(0);
//Answers.com
javascript:w=prompt('Answers.com');if(w){w=w.replace(/\./g, '/');window.location.href='http://www.answers.com/'+w.toLowerCase();}else void(0);
//script.aculo.us
javascript:w=prompt('script.aculo.us');if(w){w=w.replace(/\./g, '/');window.location.href='http://wiki.script.aculo.us/scriptaculous/search/?page%5Bname%5D='+w.toLowerCase();}else void(0);
//wikipedia
javascript:w=prompt('Wikipedia.org');if(w){w=w.replace(/\./g, '/');window.location.href='http://en.wikipedia.org/wiki/'+w.toLowerCase();}else void(0);

Its pretty easy to use them just drag-and-drop these links BELOW to you bookmarks toolbar (in every browser, especially in FIREFOX)
Here is the links.

Prototype API
PHP Reference
Answers.com
script.aculo.us
wikipedia

also you can make your own search bookmarks just examine the code.
However, if you need help, feel free to ask.
Have Nice Dayy...

Alternative PNG Support for IE6

Hi,
If you are looking for an alternative PNG support for IE6 here is a piece of code.
to use this code you will need the blank.gif
a transparent gif image.

only thing you have to do is,
simply put this function in to your application.
The real matter is calling the function

function pngImages(){
if(document.all){
for(x=0;x < arguments.length;x++){
    elm = document.getElementById(arguments[x]);
    elm.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='" + elm.src + "')";
    elm.src = "images/blank.gif";
  }
}
}

function should be called after all image elements loaded, or on the body->onload event.

What you have to do is send function a string which is containing the IDs of png images. like this,

pngImages("logo","faq","blog","about","shadws","bckgrd");

Real-Time Page Editting on Browser.

Hi,
Here is a great piece of code to edit any page you want on browser.

javascript:document.body.contentEditable='true'; document.designMode='on'; void(0);

Just copy this code to the Address bar. when you hit enter you'll get the ability of editing the content of the current web page.

this is a code that most of the WYSIWYG HTML editors uses. I just made is usable for browsers.

Enjoy!!!.