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

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

Java代码  收藏代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3. <HEAD>  
  4. <TITLE> New Document </TITLE>  
  5. <META NAME="Generator" CONTENT="EditPlus">  
  6. <META NAME="Author" CONTENT="">  
  7. <META NAME="Keywords" CONTENT="">  
  8. <META NAME="Description" CONTENT="">  
  9. </HEAD>  
  10.   
  11. <BODY>  
  12. <textarea id="jsstr" readonly style="width:400px;height:200px">  
  13. function test(){  
  14.     var a = test1();  
  15.     var b = test2();  
  16.     var c = "result is " + a + b;  
  17.     alert(c);  
  18. }  
  19. function test1(){  
  20.     return "test1-->abc";  
  21. }  
  22. function test2(){  
  23.     return "test2-->abc";  
  24. }  
  25. test();  
  26. </textarea>  
  27. <div id="result">  
  28.       
  29. </div>  
  30. <script>  
  31. var debugStr = "";  
  32. function jsdebug(resource,line,evalFunc){  
  33.     var lines = debugStr.split("\n");  
  34.     var jsLine = lines[line-1];  
  35.     lines[line-1] = "当前行：--->" + jsLine;  
  36.     var arr = [  
  37.         "调试代码：",  
  38.         lines.join("\n")  
  39.     ];  
  40.     var result = document.getElementById("result");  
  41.     result.innerHTML = result.innerHTML + "<br>执行到第" + line + "行: -->" + jsLine;  
  42.     alert(arr.join("\n"));  
  43.   
  44. }  
  45. function debug(str){  
  46.     var lines = str.split("\n");  
  47.     debugStr = str;  
  48.     var codes = [];  
  49.     for(var i=0;i<lines.length;i++){  
  50.         codes[i] = "jsdebug('test'," + (i+1) + ",function(text){return eval(text)});" + lines[i];  
  51.     }  
  52.     eval(codes.join('\n'));  
  53. }  
  54. debug(document.getElementById('jsstr').value);  
  55. </script>  
  56. </BODY>  
  57. </HTML>  



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

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

posted @ 2012-02-15 14:30  吴豆豆  阅读(302)  评论(0)  编辑  收藏  举报