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

zoukankan html css js c++ java

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

相关阅读:
【JavaScript】RegExp 实例方法
 【JavaScript】RegExp 静态和实例属性
 【JavaScript】String 实例方法（三）
【JavaScript】String 实例方法（一）
【JavaScript】String 构造函数和静态方法
 【JavaScript】Symbol 实例属性和方法
 【JavaScript】Symbol 静态属性（二）
第三节：备忘录模式——游戏角色恢复状态实例
 第二节：备忘录模式——原理&应用
 第一节：备忘录模式——需求说明&传统实现

原文地址：https://www.cnblogs.com/gdutbean/p/2352588.html

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

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