在前一篇文章中，我们介绍了如何使用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