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的客户端原理是在这个基础上的，下一篇将展开讲一下这种原理会遇到的问题及解决方法。