[JavaScript] 开发时期如何Debug使用Jscex开发的程序

在前一篇文章中，我们介绍了如何使用Jscex进行开发，它可以让我们以同步的方式撰写异步的程序，大幅度增加程序的可读性，
Jscex在开发时期，透过即时的compile程序并执行compile后的程序来运行，(当然在上线时期我们已经预编译过JS文件，不再有runtime编译的性能issue)但也因为这种方式，可能会让很多人想要Debug时无从下手，让我们来看看实际上可能发生的使用情境。

前言

在前一篇文章中，我们介绍了如何使用Jscex进行开发，

它可以让我们以同步的方式撰写异步的程序，大幅度增加程序的可读性，

Jscex在开发时期，透过即时的compile程序并执行compile后的程序来运行，

(当然在上线时期我们已经预编译过JS文件，不再有runtime编译的性能issue)

但也因为这种方式，可能会让很多人想要Debug时无从下手，

让我们来看看实际上可能发生的使用情境。

本次范例使用chrome做为Debug工具

问题点

首先我们使用Jscex撰写一个简单的Ajax Request，

它会向Server端请求使用者数据，而Server端则会回传一个Json格式的使用者数据，

点我看完整范例

var queryAsync = eval(Jscex.compile("async", function () {
    var result = $await($.ajaxAsync({
        url: '/WebApi/GetUserData.svc',
        type: 'GET',
        dataType: "json"
    }));

    $("span#result").text(result.data.message);
}));

而在以往如果我们想要知道ajax所回传的数据是什么，我们通常会使用Debug Tool下中断点

但当我们实际执行程序的时候发现，程序并不会停留在中段点的地方，

这是因为实际上浏览器真正执行的，是compile之后的程序，不再是原本撰写的程序，

所以并不能直接用设定中段点的方式来Debug，我们可以利用其他的技巧来进行Debug

使用console.log进行Debug

console.log是我们在Debug javascript时很常使用的function，

我们可以修改程序，在接受到回传值后使用console.log打印出回传的对象

var queryAsync = eval(Jscex.compile("async", function () {
    var result = $await($.ajaxAsync({
        url: '/WebApi/GetUserData.svc',
        type: 'GET',
        dataType: "json"
    }));

    console.log(result);

    $("span#result").text(result.data.message);
}));

同时我们再打开chrome的Debug Tool，切到Console Tab并重新执行程序

我们可以发现使用chrome的debug tool甚至可以完全展开或收合Object，非常的亲切，

如果我们需要显示回传的使用者资讯，只要调用result.data.message就可以取得了!

使用debugger强制中断

若今天我们并不想用使用console.log，而是希望程序可以透过debug tool，

确实的中断在我希望停止的地方，并且我可以在那个时间点观察我所想查询的各种资讯，

我们可以使用debugger，来让debug tool在执行到debugger的时候强制进入中断点

var queryAsync = eval(Jscex.compile("async", function () {
    var result = $await($.ajaxAsync({
        url: '/WebApi/GetUserData.svc',
        type: 'GET',
        dataType: "json"
    }));

    debugger;

    $("span#result").text(result.data.message);
}));

打开debug tool并执行网页

我们可以看到不但停在compile后的程序，我们想要中断的地方，

甚至我们可以在这个时间点关查所有想要查看的变量，

是不是很简单呢?

错误提示消息

在写JavaScript的时候，有时候可能会因为笔误，或是没有拦截到预期的异常，

却发现我们的程序没办法work，这时会很仰赖debug tool来查出发生错误的原因，

而Jscex所compile的程序中都会具有Logging机制，

它会拦截compile过的程序之中所发生的exception，并输出Log到console中，(你所遗漏没处理过的exception)

假设今天我们在取ajax回传时不小心笔误少打一个a

var queryAsync = eval(Jscex.compile("async", function () {
    var result = $await($.ajaxAsync({
        url: '/WebApi/GetUserData.svc',
        type: 'GET',
        dataType: "json"
    }));    

    $("span#result").text(result.dat.message);
}));

我们重新执行程序发现不能work了，这时我们打开console可以看到

如此一来就可以根据message发现，原来是我们的data少打一个a，造成错误导致程序异常

结语

虽然Jscex并不能直接在我们以特殊语法撰写的程序之中设置中断点，

但我们可以利用console.log或是debugger来准确的输出我们想要查询的资讯，

而Jscex也很贴心的在compile后的程序左侧提供原始程序的对照，来方便我们进行Debug，

甚至是在compile后的程序发生并未处理的异常，也可以透过Log来发现，

我们在使用Jscex进行开发时可以利用以上的技巧，根据各人的需要来使用，

也欢迎大家提供自己的Debug方法，请大家多多指教或一起讨论 ^_^

参考数据:

善用 JavaScript 的 debugger 命令让网页主动进入中断点
利用Firebug的console功能作JavaScript侦错

原文:大专栏 [JavaScript] 开发时期如何Debug使用Jscex开发的程序

原文地址：https://www.cnblogs.com/chinatrump/p/11516485.html