|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Tracer</title>
<!-- This is the only code to run the tracer -->
<script type="text/javascript" src="trace.js"></script>
<script type="text/javascript">
// Testing veriables
var str = "Hello World";
var arr = new Array("element 1","element 2","element 3","element 4","element 5","element 6");
var assoc = new Array();
assoc["BMW"] = "3.20 CI";
assoc["Audi"] = "RS4";
assoc["Mercesed Benz"] = "CSL";
assoc["Volkswagen"] = "EoS";
assoc["Mitsubishi"] = "Evo VIII";
assoc["Subaru"] = "Impreza WRX";
assoc["Alfa Romeo"] = "GT";
</script>
<style type="text/css">
body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; background:#ffffff}
fieldset{-moz-border-radius:8px;}
legend{color:#0066CC;}
.btn{border:1px #CCCCCC solid; border-right:1px #666666 solid; border-bottom:1px #666666 solid; background-color:#C5E4E4;}
.btn:hover{border-right:1px #00CC00 solid; border-bottom:1px #00CC00 solid;}
.txt{border:1px #CCCCCC solid; border-left:1px #666666 solid; border-top:1px #666666 solid;}
.txt:hover{border-left:1px #00CC00 solid; border-top:1px #00CC00 solid;}
.copy{ color:#666666; font-family:"Trebuchet MS"; font-size:12px;}
</style>
</head>
<body>
<fieldset style="width:550px;">
<legend><b>JavaScript Trace & Debug Tool. List Of Fetures</b></legend>
<table width="535" border="0" cellpadding="3" cellspacing="0">
<tr>
<td width="264" valign="top">
<fieldset style="width:250px;">
<legend><b>Normal Trace Function</b></legend>
<span>
trace("msg") , Works Like Alert:<br />
Write Something down there </span><br />
<input type="text" class="txt" id="text" /> <input type="button" class="btn" value="Click Me" onclick="trace('You Wrote: '+document.getElementById('text').value);" />
<br />
Also trace() has a second usage, <br />
now it can print the parameters by gettin argument like inputs, so printing the function arguments is more easy now. <br />
trace(textbox1,textbox2);<br />
<input type="text" size="15" class="txt" id="textbox1" /><br />
<input type="text" size="15" class="txt" id="textbox2" /> <input type="button" class="btn" value="Click Me" onclick="trace(document.getElementById('textbox1').value,document.getElementById('textbox2').value);" />
<br />
</fieldset>
<fieldset style="width:250px;">
<legend><b>Associative Array Function</b></legend>
<span>
traceAssoc(), prints the each associative element of the given array with their keys: </span><br />
<input type="button" class="btn" value="Click Me" onclick="traceAssoc(assoc);" />
</fieldset>
<fieldset style="width:250px;">
<legend><b>Array Function</b></legend>
<span>
traceArr(), prints the each element of the given array: </span><br />
<input type="button" class="btn" value="Click Me" onclick="traceArr(arr);" />
</fieldset> <fieldset style="width:250px;">
<legend><b>Error Handling</b></legend>
<span>
Tracer Can Handle The Errors. It Can Show you the error name, line number and file name</span>,
<input type="button" class="btn" value="Error" onclick="javascript:errfunc()" />
You can define custom Error messages by using the <strong>traceError()</strong> function. it is usable for try catch blocks, also you can stop the Error handling. <br />
<input type="text" id="err" class="txt" value="Write a custom msg" /> <input type="button" class="btn" value="Custom Error" onclick="javascript:traceError(document.getElementById('err').value)" /></fieldset>
</td>
<td width="259" valign="top">
<fieldset style="width:250px;">
<legend><b>Run JS tab </b></legend>
On the run js tab you can write any javascript code and run it in realtime.<br />
it is a very useful property
<br />
<img src="images/runjs.JPG" width="250" height="375" /><br />
</fieldset>
<fieldset style="width:250px;">
<legend><b>String Function</b></legend>
<span>
traceStr(), prints the each Character of the given string with their positions: </span><br />
<input type="button" class="btn" value="Click Me" onclick="traceStr(str);" />
</fieldset></td>
<td width="259" valign="top"> <fieldset style="width:250px;">
<legend><b>Watch Function</b></legend>
Watch function display the content of the form elemets that we gave the ids. watch now follow more than one element.<br />
You can try it here. just write the ID's in watch box as shown here<br />
<img src="images/watch.JPG" width="240" height="68" />
when the textboxes changed it will be displayed.
<br />
<input type="text" class="txt" id="box1" value="id='box1'" /><br />
<input type="text" class="txt" id="box2" value="id='box2'" /><br />
<input type="text" class="txt" id="box3" value="id='box3'" />
</fieldset>
<fieldset style="width:250px;">
<legend><b>Miscellaneous</b></legend>
Tracer remembers the last position, last state, last tab and last settings by using cookies.
<br />
Refresh the page and try it yourself.<br />
Also there are style improvements.<br />
Speed optimizations.
<br />
and lots of things which I can't remember. :)
</fieldset>
<fieldset style="width:250px;">
<legend><b>Download Tracer</b>
</legend>
<table style="cursor:pointer" onclick="window.location.href='source.js'"><tr>
<td><img src="images/winrar.jpg" width="36" height="27" /></td><td>trace.js</td>
</tr></table>
</fieldset>
<span class="copy">
Copyrigth© Interlogy LLC, Serkan Yersen.</span>
</td>
</tr>
</table>
</fieldset>
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
Hi, My name is Serkan Yerşen, I'm 24 years old and I'm from TURKEY,
I recently graduated from The Computer Technologies and Programming department of Bilkent University, Bilkent is the one of the many biggest Universities in TURKEY.
I worked for my school for a year. After i quit job at my school. i started to work on web apllication developments.
Currently I'm Working for
The Jotform Development Team in
Interlogy LLC Company.
My proficiencies are VB6, PHP, MySQL, JavaScript and AJAX technics, CSS+HTML, and Linux Systems.
You can find more information about me by visiting my blogs.
My English Blog
My Turkish Blog
Submit an article or tip