The Better Way to Debug Your JavaScript Program

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了The Better Way to Debug Your JavaScript Program相关的知识,希望对你有一定的参考价值。

Debugging JS program is not as easy as we do in Visual Studio or any other IDE. I usually us "alert()" function to add some breakpoints for debugging.

For example:

 var costAdjust = $(e.container).find("input[name=‘CostAdjustment‘]").data("kendoNumericTextBox");
 costAdjust.value(Number($("#extraMinTotal").html()) * Number($("#extraMinRate").html()));
 costAdjust.trigger("change", { value:costAdjust.value() });

If the costAdjust didn‘t trigger like I expect. I will add a alert try to check if the #extraMinRate got the right value.

 var costAdjust = $(e.container).find("input[name=‘CostAdjustment‘]").data("kendoNumericTextBox");
 alert($("#extraMinRate").html());
 costAdjust.value(Number($("#extraMinTotal").html()) * Number($("#extraMinRate").html()));
 costAdjust.trigger("change", { value:costAdjust.value() });

 

But in this way it will stop your page coding flow and it can‘t show all the detail if you try to see object‘s value. Like this:

 var costAdjust = $(e.container).find("input[name=‘CostAdjustment‘]").data("kendoNumericTextBox");
 alert($("#extraMinRate"));
 costAdjust.value(Number($("#extraMinTotal").html()) * Number($("#extraMinRate").html()));
 costAdjust.trigger("change", { value:costAdjust.value() });

This time alert will only showing "Object" without any detail:

技术分享

The better way to show the object detail is using "console.log()" instead of alert.

 var costAdjust = $(e.container).find("input[name=‘CostAdjustment‘]").data("kendoNumericTextBox");
 console.log($("#extraMinRate"));
 costAdjust.value(Number($("#extraMinTotal").html()) * Number($("#extraMinRate").html()));
 costAdjust.trigger("change", { value:costAdjust.value() });

You should check your output using chrome browser inspect function (Ctrl + Shift + I). At he Console tab, you will see the object detail.

技术分享

 

You can click the little trianggle to find more details of this object. That allows you to trace your code data easierly and your page flow will not be stoped.

<END>

以上是关于The Better Way to Debug Your JavaScript Program的主要内容,如果未能解决你的问题,请参考以下文章

csharp 检查文件或目录是否存在 - 来自http://stackoverflow.com/questions/1395205/better-way-to-check-if-a-path-is-a

A. The Way to Home

The way to unwind the stack on Linux EABI

The best way to learn a programming language

The happy secret to better work,https://www.ted.com/talks/shawn_achor_the_happy_secret_to_better_wor

How to Choose the Best Way to Pass Multiple Models in ASP.NET MVC