javascript调试原理(二) 模拟实现（转）

javascript调试原理(一)中讲了javascript的调试原理，本单给出一个javascript调试的客户端模拟实现：

Java代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<textarea id="jsstr" readonly style="400px;height:200px">
function test(){
var a = test1();
var b = test2();
var c = "result is " + a + b;
alert(c);
}
function test1(){
return "test1-->abc";
}
function test2(){
return "test2-->abc";
}
test();
</textarea>
<div id="result">
</div>
<script>
var debugStr = "";
function jsdebug(resource,line,evalFunc){
var lines = debugStr.split("\n");
var jsLine = lines[line-1];
lines[line-1] = "当前行：--->" + jsLine;
var arr = [
"调试代码：",
lines.join("\n")
];
var result = document.getElementById("result");
result.innerHTML = result.innerHTML + "<br>执行到第" + line + "行: -->" + jsLine;
alert(arr.join("\n"));
}
function debug(str){
var lines = str.split("\n");
debugStr = str;
var codes = [];
for(var i=0;i<lines.length;i++){
codes[i] = "jsdebug('test'," + (i+1) + ",function(text){return eval(text)});" + lines[i];
}
eval(codes.join('\n'));
}
debug(document.getElementById('jsstr').value);
</script>
</BODY>
</HTML>

只要把其中的alert换成同步的ajax请求，一可以实现每句执行时把当前的行号，context等信息传给调试服务器。

Javascript Debug Toolkit的客户端原理是在这个基础上的，下一篇将展开讲一下这种原理会遇到的问题及解决方法。