zoukankan      html  css  js  c++  java
  • 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="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的客户端原理是在这个基础上的,下一篇将展开讲一下这种原理会遇到的问题及解决方法。

  • 相关阅读:
    RecyclerView 数据刷新的几种方式 局部刷新 notify MD
    【图片】批量获取几万张图片
    RV BaseRecyclerViewAdapterHelper 总结 MD
    RecyclerView.ItemDecoration 间隔线
    Kotlin【简介】Android开发 配置 扩展
    Kotlin 特性 语法糖 优势 扩展 高阶 MD
    一个十分简洁实用的MD风格的UI主框架
    折叠伸缩工具栏 CollapsingToolbarLayout
    FloatingActionButton FAB 悬浮按钮
    Glide Picasso Fresco UIL 图片框架 缓存 MD
  • 原文地址:https://www.cnblogs.com/gdutbean/p/2352588.html
Copyright © 2011-2022 走看看