Kiểm tra lỗi trong lập trình là một công việc rất thường xuyên của lập trình viên, và với ngôn ngữ phía máy khách (client) như JavaScript; thì công cụ phổ biến nhất phải được đề cập là Firebug trên nền trình duyệt Firefox; nhưng công cụ này chỉ giúp chúng ta phát hiện lỗi cú pháp. Bài viết này chia sẻ kinh nghiệm của tác giả trong vấn đề kiểm tra các lỗi về giải thuật thông qua một vài cách thức đơn giản. Vui lòng xem bài viết chi tiết để biết thêm.

• Demo
• Phóng to
• Tải lại
• Cửa sổ mới

Debugging your client code is rather a normal procedures for any web developers. Everyone will shout Firebug! yeah, me too. But Firebug is great for syntax detection but how about logic problem? In this article i will share with you some of the ways i used to debug my JavaScript or jQuery codes when I’m developing my web application. I will also share with you a trick that i used on my code to alert me that a bug occurs in a particular script since i don’t get many helpful users nowadays.

Alert Them Out

The most simple and basic way of debugging is by using JavaScript alert function. This is old but is quite useful sometimes. Especially when you do not want to remember other debugging methods. It’s pretty simple, alert the message you want to see. If the alert doesn’t appear, this means that the error is before the alert statement. I usually do this when I’m debugging IE although there are tools available for IE.

alert("The Bug Is Somewhere Before ME!")

Log them up

Well, if you are using WebKit browsers for your development (FireFox, Chrome, Safari) you may want to try this.

if (window.console)
  window.console.log("The Bug is killing me");

What this does is to log the string ‘The Bug is killing me’ into the console such as Firebug. It’s always better than using alert and see this infinity loop that keep popping out until you are force to shut down your browser!

Log them with jQuery

The above two methods work both in jQuery and JavaScript. But this only function well in jQuery. This is definitely not something i came up with but its from Dominic Mitchell

  jQuery.fn.log = function (msg) {
      console.log("%s: %o", msg, this);
      return this;
  };

The above creates a function, ‘log’. This function will do exactly similar to the one above but the differences is that it format the string a little bit before displaying out to the console. This is good for debugging your long chaining with jQuery. Although the previous method also can be used to debug chaining but it will required an additional line instead of including it into the chaining process. So you can debug this way,

  $(root).find('li.source > input:checkbox').log("sources to uncheck").removeAttr("checked");

Try and catch

In JavaScript, you can try to catch the error in a particular scope. This way, it won’t propagate to other section of the code.

try
  {
  //Run some code here
  }
catch(err)
  {
  //Handle errors here
  }

This is pretty good when you are trying to debug one of the many function in your JavaScript.

Catch them all

The last one i am going to show you is to catch any one of the error into a particular function instead of using multiple try and catch.

function handleError(e)
{
alert('An error has occurred!\n'+e);
return true;
}
window.onerror = handleError;

This will handle any error occurs in your JavaScript code to the function ‘handleError’. You will want to use this at the end of your script. Especially if you want to be informed whether a particular function or script has malfunction and the users are not reporting. Basically, what you can do is to gather all information and placed them into a String or JSON. Using ajax to delivery these information to your email or database. This way, your support team will have an idea which part are having problems and your system will be more reliable. (testing doesn’t means 100% bug free) The information that you may want to know are usually located at Navigator Object in JavaScript.

Summary

These are the methods i usually look at when debugging my own client script. It might not be everything but i hope it can be useful to some of you out there. Hope you learn something!

• Mã nguồn
• In

• Lời bình (0)
• Viết

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Lời bình của khách sẽ được xem xét
Cung cấp email thật để nhận các trả lời, nếu không bình luận của bạn sẽ bị xóa

Tên bạn *
Email của bạn^g *
Website của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

• Lượt gửi (0)
• Mới