JavaScript调试的小工具(jsTrace)
2007-01-23 13:14
447 查看
前段时间写一个JavaScript的程序，根据用户鼠标的操作进行控件的拖放。感觉用 alter 或 断点跟踪调试的方法太难受了。就仿照MFC的TRACE功能写了如下的小代码(trace.js)。
拥有的功能如下：
trace(str) : 在调试窗口输出信息；
traceObj(obj): 在调试窗口输出对象所有不为空的属性；
tracefmt(...): 按照用户定义的格式进行输出
traceHTML(): 输出当前函数所在页面的HTML页面
调试窗口：
支持调试信息拷贝到剪贴板和清空调试信息
使用例子如下：
<input type ="button" onclick = "tracefmt('%s add %s = %s', val1.value, val2.value, result.value)" value = "TestTrace">
请将后面的代码分别保存成 trace.js 和 trace.html, sample.html
//--------------------------trace.js-------------------------------
var tracewin = null;
var tracenum=1;
function trace(str){
if(tracewin==null || tracewin.closed)
{
tracewin = window.open('trace.html','tracewindow',
'height=400;width=100;top=600;left=800;resizable=yes');
}
if(tracewin){
tracewin.traceStr(tracenum+":"+str);
tracenum++;
}
}
function traceObj(obj){
//return;
var strObj='obj:'+obj+'/n/r';
for(prop in obj)
{
if(obj[prop])
strObj += ('/t'+prop +'='+obj[prop]+';/n/r');
}
trace(strObj);
return strObj;
}
function format()
{
var i, msg = "", argNum = 0, startPos;
var args = format.arguments;
var numArgs = args.length;
if(numArgs)
{
theStr = args[argNum++];
startPos = 0; endPos = theStr.indexOf("%s",startPos);
if(endPos == -1) endPos = theStr.length;
while(startPos < theStr.length)
{
msg += theStr.substring(startPos,endPos);
if (argNum < numArgs) msg += args[argNum++];
startPos = endPos+2; endPos = theStr.indexOf("%s",startPos);
if (endPos == -1) endPos = theStr.length;
}
if (!msg) msg = args[0];
}
return msg;
}
function tracefmt()
{
var i, msg = "", argNum = 0, startPos;
var args = tracefmt.arguments;
var numArgs = args.length;
if(numArgs)
{
theStr = args[argNum++];
startPos = 0; endPos = theStr.indexOf("%s",startPos);
if(endPos == -1) endPos = theStr.length;
while(startPos < theStr.length)
{
msg += theStr.substring(startPos,endPos);
if (argNum < numArgs) msg += args[argNum++];
startPos = endPos+2; endPos = theStr.indexOf("%s",startPos);
if (endPos == -1) endPos = theStr.length;
}
if (!msg) msg = args[0];
}
trace(msg);
}
function traceHTML(){
var parObj = document.body;
while(parObj && parObj.tagName != 'HTML'){
parObj = parObj.parentElement;
}
trace(parObj.outerHTML);
}
function getTime(){
var now= new Date();
var strTime= now.toLocaleTimeString()+':'+ (now%1000);
return strTime;
}
function traceTime(info){
var strInfo = getTime()+':'+ info;
trace(strInfo);
}
//--------------------------trace.html-------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript">
function traceStr(str){
var oOption = document.createElement("OPTION");
form1.traceList.options.add(oOption);
oOption.innerText = str;
oOption.selected=true;
//form1.btnClose.focus();
}
function traceInfoClick(){
var nIndex=form1.traceList.selectedIndex;
if(nIndex!=-1)
{
form1.txtComments.value=form1.traceList.options[nIndex].innerText;
form1.btnCopy.disabled=false;
}
else
{
form1.txtComments.value='';
form1.btnCopy.disabled=true;
}
}
function CopyData()
{
var nIndex=form1.traceList.selectedIndex;
if(nIndex!=-1)
{
strSelect = form1.traceList.options[nIndex].innerText;
window.clipboardData.setData('text',strSelect.substr(strSelect.indexOf(':')+1));
}
}
function ClearData()
{
form1.traceList.innerHTML="";
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>JavaScript Tracer;</title>
</head>
<body>
<form name="form1">
<center>
<select name="traceList" style="width:80%;height:40%" size="2"
onclick="traceInfoClick()">
</select><br/>
<TEXTAREA style="width:80%;overflow:scroll" name="txtComments" rows="10">
</TEXTAREA>
</center>
<p align="right">
<input type="button" value="Clear" name="btnClear"
onclick="ClearData()"/>
<input type="button" value="Copy" name="btnCopy"
onclick="CopyData()" disabled="disabled"/>
<input type="button" value="Close" name="btnClose"
onclick="window.close()" align="right" />
</p>
</form>
</body>
</html>
//--------------------------Sample.html-----------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> TestJavScriptTrace </title>
<script language="JavaScript" src="trace.js"></script>
</head>
<body>
<input type ="text"name ="val1" size="30" value = "11111"><br/>
<input type ="text"name ="val2" size="30" value = "22222"><br/>
<input type ="text" name ="result" size="30" value = "33333"><br/>
<input type ="button" onclick = "tracefmt('%s add %s = %s', val1.value, val2.value, result.value)" value = "TestTrace">
</body>
</html>
拥有的功能如下：
trace(str) : 在调试窗口输出信息；
traceObj(obj): 在调试窗口输出对象所有不为空的属性；
tracefmt(...): 按照用户定义的格式进行输出
traceHTML(): 输出当前函数所在页面的HTML页面
调试窗口：
支持调试信息拷贝到剪贴板和清空调试信息
使用例子如下：
<input type ="button" onclick = "tracefmt('%s add %s = %s', val1.value, val2.value, result.value)" value = "TestTrace">
请将后面的代码分别保存成 trace.js 和 trace.html, sample.html
//--------------------------trace.js-------------------------------
var tracewin = null;
var tracenum=1;
function trace(str){
if(tracewin==null || tracewin.closed)
{
tracewin = window.open('trace.html','tracewindow',
'height=400;width=100;top=600;left=800;resizable=yes');
}
if(tracewin){
tracewin.traceStr(tracenum+":"+str);
tracenum++;
}
}
function traceObj(obj){
//return;
var strObj='obj:'+obj+'/n/r';
for(prop in obj)
{
if(obj[prop])
strObj += ('/t'+prop +'='+obj[prop]+';/n/r');
}
trace(strObj);
return strObj;
}
function format()
{
var i, msg = "", argNum = 0, startPos;
var args = format.arguments;
var numArgs = args.length;
if(numArgs)
{
theStr = args[argNum++];
startPos = 0; endPos = theStr.indexOf("%s",startPos);
if(endPos == -1) endPos = theStr.length;
while(startPos < theStr.length)
{
msg += theStr.substring(startPos,endPos);
if (argNum < numArgs) msg += args[argNum++];
startPos = endPos+2; endPos = theStr.indexOf("%s",startPos);
if (endPos == -1) endPos = theStr.length;
}
if (!msg) msg = args[0];
}
return msg;
}
function tracefmt()
{
var i, msg = "", argNum = 0, startPos;
var args = tracefmt.arguments;
var numArgs = args.length;
if(numArgs)
{
theStr = args[argNum++];
startPos = 0; endPos = theStr.indexOf("%s",startPos);
if(endPos == -1) endPos = theStr.length;
while(startPos < theStr.length)
{
msg += theStr.substring(startPos,endPos);
if (argNum < numArgs) msg += args[argNum++];
startPos = endPos+2; endPos = theStr.indexOf("%s",startPos);
if (endPos == -1) endPos = theStr.length;
}
if (!msg) msg = args[0];
}
trace(msg);
}
function traceHTML(){
var parObj = document.body;
while(parObj && parObj.tagName != 'HTML'){
parObj = parObj.parentElement;
}
trace(parObj.outerHTML);
}
function getTime(){
var now= new Date();
var strTime= now.toLocaleTimeString()+':'+ (now%1000);
return strTime;
}
function traceTime(info){
var strInfo = getTime()+':'+ info;
trace(strInfo);
}
//--------------------------trace.html-------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript">
function traceStr(str){
var oOption = document.createElement("OPTION");
form1.traceList.options.add(oOption);
oOption.innerText = str;
oOption.selected=true;
//form1.btnClose.focus();
}
function traceInfoClick(){
var nIndex=form1.traceList.selectedIndex;
if(nIndex!=-1)
{
form1.txtComments.value=form1.traceList.options[nIndex].innerText;
form1.btnCopy.disabled=false;
}
else
{
form1.txtComments.value='';
form1.btnCopy.disabled=true;
}
}
function CopyData()
{
var nIndex=form1.traceList.selectedIndex;
if(nIndex!=-1)
{
strSelect = form1.traceList.options[nIndex].innerText;
window.clipboardData.setData('text',strSelect.substr(strSelect.indexOf(':')+1));
}
}
function ClearData()
{
form1.traceList.innerHTML="";
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>JavaScript Tracer;</title>
</head>
<body>
<form name="form1">
<center>
<select name="traceList" style="width:80%;height:40%" size="2"
onclick="traceInfoClick()">
</select><br/>
<TEXTAREA style="width:80%;overflow:scroll" name="txtComments" rows="10">
</TEXTAREA>
</center>
<p align="right">
<input type="button" value="Clear" name="btnClear"
onclick="ClearData()"/>
<input type="button" value="Copy" name="btnCopy"
onclick="CopyData()" disabled="disabled"/>
<input type="button" value="Close" name="btnClose"
onclick="window.close()" align="right" />
</p>
</form>
</body>
</html>
//--------------------------Sample.html-----------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> TestJavScriptTrace </title>
<script language="JavaScript" src="trace.js"></script>
</head>
<body>
<input type ="text"name ="val1" size="30" value = "11111"><br/>
<input type ="text"name ="val2" size="30" value = "22222"><br/>
<input type ="text" name ="result" size="30" value = "33333"><br/>
<input type ="button" onclick = "tracefmt('%s add %s = %s', val1.value, val2.value, result.value)" value = "TestTrace">
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- IE下的优秀JavaScript调试工具Companion.JS
- javascript 调试工具Companion.JS
- JS调试工具：Venkman(JavaScript Debugger)
- js调试工具 Javascript Debug Toolkit 2.0.0版本发布
- JavaScript 代码调试工具js代码调试 在火狐浏览器中调试js代码
- js调试工具 Javascript Debug Toolkit 2.0.0版本发布
- IE下的JavaScript调试工具Companion.JS
- Companion.JS 与 Microsoft Script Debugger 结合IE javaScript 调试工具
- (转)JavaScript调试工具（Companion.JS）
- 发现IE下的优秀JavaScript调试工具Companion.JS
- chrome调试工具F12方式javascript(js调试)jqueryui拖拽
- 提高效率 JavaScript调试 js 调试工具
- 发现IE下的优秀JavaScript调试工具Companion.JS
- 5个最好的 javascript 调试工具
- chrome调试js工具的使用
- Vue.js调试工具vue-devtools
- Chrome新版JS调试工具
- IE6,7,8"开发人员工具"使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)
- firefox js 调试工具下载