Debug trong JavaScript

Trong khi mã hóa chương trình, các nhà lập trình có thể tạo ra các lỗi. Một lỗi trong một chương trình hoặc một script được xem như là một bug.

Tiến trình tìm kiếm và sửa các bug được gọi là dubugging và là một phần bình thường của tiến trình lập trình. Chương này giới thiệu một số công cụ và công nghệ mà có thể giúp bạn với nhiệm vụ debug.

Thông báo lỗi trong IE

Cách đơn giản nhất để phát hiện lỗi là bật thông tin lỗi trong trình duyệt của bạn. Theo mặc định, IE chỉ một biểu tượng lỗi trong thanh trạng thái khi một lỗi xảy ra trên trang.

Nhấn đúp chuột vào biểu tượng này sẽ hiển thị một hộp thoại chỉ thông tin về lỗi cụ thể đã xảy ra.

Khi biểu tượng này dễ bị coi nhẹ (hay khó quan sát), IE cung cấp cho bạn tùy chọn để tự động hiển thị thông báo lỗi bất cứ khi nào một lỗi xảy ra.

Để kích hoạt chức năng này, chọn Tools → Internet Options → Advanced tab. và sau đó cuối cùng kiểm tra hộp tùy chọn "Display a Notification About Every Script Error" như hình dưới.

Thông báo lỗi trong Firefox hoặc Mozilla

Các trình duyệt khác như Firefox, Netscape và Mozilla gửi thông báo lỗi tới một cửa sổ đặc biệt được gọi là JavaScript Console hoặc Error Consol. Để quan sát bàn điều khiển này, chọn Tools → Error Consol hoặc Web Development.

Không may là, khi các trình duyệt này cung cấp các chỉ dẫn không nhìn thấy khi một lỗi xảy ra, bạn phải giữ bàn điểu khiển Console này mở và so khớp cho các lỗi khi script của bạn thực thi.

Các khai báo lỗi (Error Notification)

Error Notification mà hiển thị trên Console hoặc thông qua hộp thoại IE là kết quả của cả các lỗi Syntax Error và Runtime Error. Những khai báo lỗi này bao gồm số dòng nào tại đó lỗi xảy ra.

Nếu bạn đang sử dụng Firefox, thì khi đó bạn có thể click vào lỗi có trong Console để tới chính xác dòng trong script mà có lỗi.

Cách để debug một Script

Có nhiều cách để debug các lỗi trong JavaScript của bạn:

Sử dụng JavaScript Validator

Một cách để kiểm tra code có các bug lạ là để chạy nó thông qua một chương trình mà kiểm tra nó để đảm bảo rằng nó là hợp lệ và nó tuân theo qui tắc cú pháp chính thức của ngôn ngữ. Những chương trình này được gọi là validating parsers hoặc validators, và thường đi với các bộ soạn HTML và JavaScript thương mại.

Validator tiện lợi nhất cho JavaScript là Douglas Crockford của JavaScript Lint, mà có sẵn miễn phí tại: .

Bạn ghé thăm trang web này, paste các JavaScript code vào trong khu vực văn bản đã cho, và nhấn nút jslint. Chương trình này sẽ phân tích JavaScript code của bạn, đảm bảo rằng tất cả định nghĩa biến và hàm tuân theo cú pháp chính xác. Nó cũng sẽ kiểm tra các lệnh JavaScript, như if và while, để đảm bảo chúng cũng tuân theo định dạng chính xác.

Thêm Debugging code tới chương trình của bạn

Bạn có thể sử dụng các phương thức alert() hoặc document.write() trong chương trình của bạn để debug. Ví dụ, bạn có thể viết một cái gì đó như sau:

var debugging = true;
var whichImage = "widget";

if( debugging )
alert( "Calls swapImage() with argument: " + whichImage );
var swapStatus = swapImage( whichImage );

if( debugging )
   alert( "Exits swapImage() with swapStatus=" + swapStatus );

Bằng việc kiểm tra nội dung và trình tự của alert() khi chúng xuất hiện, bạn có thể kiểm tra chương trình của bạn rất dễ dàng.

Sử dụng một JavaScript Debugger

Một Debugger là một ứng dụng mà đặt tất cả các khía cạnh của việc thực thi script dưới sự điều khiển của một nhà lập trình. Debugger cung cấp một điều khiển Fine-Grained (Điều khiển phân định tinh tế) qua trạng thái của script thông qua một giao diện mà cho phép bạn kiểm tra và thiết lập các giá trị cũng như điều khiển luồng của việc thực thi.

Một khi một script đã được tải vào trong một debugger, nó có thể được chạy một dòng tại một thời điểm hoặc được chỉ dẫn để dừng tại điểm dừng (Breakpoint). Khi việc thực thi bị dừng, nhà lập trình có thể kiểm tra trạng thái của script và các biến của nó để quyết định làm điều gì nếu có gì đó bị lỗi. Bạn có thể cũng quan sát các biến với các thay đổi trong các giá trị của chúng.

Phiên bản Mozilla JavaScript Debugger mới nhất (tên Venkman) cho cả trình duyệt Mozilla và Netscape có thể được tại tại:

Chỉ dẫn hữu ích cho nhà lập trình

Bạn có thể nên nhớ các tip sau để giảm số lượng các lỗi trong các script của bạn và làm đơn giản hóa tiến trình debug.

• Sử dụng nhiều comments. Các comment cho bạn khả năng giải thích tại sao bạn viết script, cách bạn thực hiện và để giải thích các khu vực cụ thể phức tạp trong code.

• Luôn luôn sử dụng indentation (sự thụt code) để làm code của bạn dễ dàng hơn khi đọc. Các lệnh thụt vào này cũng làm nó dễ hơn với bạn để so khớp các thẻ bắt đầu và kết thúc, các dấu ngoặc, và các phần tử HTML và script khác.

• Viết modular code. Bất cứ khi nào có thể, nhóm các lệnh vào trong các hàm. Các hàm giúp bạn tạo nhóm các lệnh liên quan nhau, và kiểm tra và tái sử dụng các phần của code mà không mất nhiều công sức.

• Nhất quán trong cách đặt tên biến và hàm. Nói cách khác, giữ tất cả chúng ở dạng chữ thường hoặc chữ hoa; nếu bạn ưa thích Camel-Back Notation, sử dụng nó một cách nhất quán.

• Sử dụng tên biến đủ dài và có ý nghĩa mà miêu tả nội dung của hàm và biến.

• Kiểm tra các script dài trong Modular Fashion. Nghĩa là, đừng cố gắng viết toàn bộ script trước khi kiểm tra bất cứ phần nào của nó. Viết một phần và thực thi nó trước khi thêm phần tới vào code.

• Sử dụng các tên biến và hàm có tính miêu tả cao và tránh sử dụng các tên đơn ký tự.

• Quan sát các dấu trích dẫn. Nhớ rằng những dấu trích dẫn này được sử dụng trong các cặp bao quanh các chuỗi và nó phải sử dụng trong cùng một kiểu giống nhau (hoặc đơn hoặc kép).

• Kiểm tra các dấu bằng. Bạn không nên sử dụng một dấu bằng đơn (=) cho mục đích so sánh.

• Khai báo các biến một cách rõ ràng bởi sử dụng từ khóa var.

Loạt bài hướng dẫn học lập trình Javascript cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: Tutorialspoint.com

Follow fanpage của team hoặc facebook cá nhân Nguyễn Thanh Tuyền để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Các bài học JavaScript khác tại VietJack: