How [JavaScript] Debug using the development stages of program development Jscex

In the previous article, we describe how to use Jscex development, it allows us to write in a synchronized manner asynchronous program, a substantial increase readability,
Jscex in the development stages, and through instant compile program program to run after the compile execution, (of course, we have on the line during the pre-compiled JS file, no runtime compiler performance issue) but also because this way, it may make a lot of people want to not start Debug, let Let's look at the use of scenarios may actually occur.

Foreword

In the previous article, we describe how to use Jscex development,

It allows us to write in a synchronized manner asynchronous program, a substantial increase readability,

Jscex in the development stages, through instant compile program compile and execute the program after the run,

(Of course, we have on the line during the pre-compiled JS file, no runtime compiler performance issue)

But also because this way, it may make a lot of people want to not start Debug,

Let's look at the use of scenarios may actually occur.

This example uses chrome as Debug Tool

Problems

First, we use Jscex write a simple Ajax Request,

It will request user data to the Server side, and Server end-user data will return a Json format,

I see the point of complete paradigm

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);
}));

In the past, if we want to know what the ajax return data, we usually use the breakpoint Debug Tool

But when we actually found when the execution of the program, the program does not stop at the middle point of the place,

This is because the browser is actually true executed, the program is after the compile, is no longer a program originally written,

Therefore it can not be directly used to set the middle point Debug way, we can use other tricks to Debug

Debug carried out using console.log

We are console.log function is often used when Debug javascript,

We can modify the program, use console.log prints out the return after receiving the return value

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，

Even the exception is not processed in the program after the compile occurs, it can also be found through the Log,

When we use Jscex can be developed using the above techniques, used according to the needs of each,

Also welcome to provide their own Debug method, please exhibitions or discuss ^ _ ^

Reference data:

1. Make the best use of JavaScript debugger commands allow the initiative to enter the page break point
2. Use Firebug's JavaScript console features for debugging

Original: Large column  [JavaScript] developed during the program how to use the Debug Jscex development