Gỡ lỗi là phương pháp có hệ thống để loại bỏ các khuyết tật. Tất cả bắt đầu với việc thực thi các trường hợp thử nghiệm. Bất cứ khi nào các trường hợp kiểm thử được thực thi, kết quả thực tế được so sánh với kết quả mong đợi. Nếu thiếu bất kỳ sự tương ứng nào giữa kết quả thực tế và kết quả mong đợi, phân tích nguyên nhân gốc rễ sẽ được thực hiện và các thử nghiệm bổ sung như kiểm tra hồi quy được thực hiện để đảm bảo rằng kết quả dọc theo đường mong đợi.
Để thiết kế các trang web tĩnh, HTML được sử dụng rộng rãi. Để phát triển các ứng dụng dựa trên web động, JavaScript, ngôn ngữ kịch bản của web nên được sử dụng. Để làm cho mã của họ không có lỗi, các lập trình viên dựa vào nhiều kỹ thuật gỡ lỗi. Đó là một cách tuyệt vời để tránh các lỗi và ngoại lệ. Tuy nhiên, JavaScript không được trang bị các chức năng gỡ lỗi tuyệt vời. May mắn thay, việc gỡ lỗi các dòng mã được viết bằng JavaScript bằng cách sử dụng Firebug, trình gỡ lỗi dựa trên trình duyệt web, rất dễ dàng.
Bây giờ tôi xin giới thiệu với các bạn về thuật ngữ kỹ thuật. Dưới đây là một số câu chuyên sâu về các thành phần của trình gỡ lỗi Firebug:
- JSEditor - JSEditor không là gì khác ngoài JavaScript Editor. Đối với tất cả các ý định và mục đích, JSEditor cho phép bạn gỡ lỗi mã JavaScript bằng cách sử dụng "Break on All Errors." Tất cả những gì người dùng phải làm là chọn tùy chọn này để tạm dừng thực thi tập lệnh.
- Tab tập lệnh - Bảng điều khiển là tab đầu tiên hiện diện trên ngăn của trình gỡ lỗi Firebug. HTML và CSS là các tab thứ hai và thứ ba có trên ngăn. Tab script là tab thứ tư. Bảng điều khiển tập lệnh được chia thành hai bảng phụ - bảng điều khiển bên trái là trình chỉnh sửa JavaScript. Bảng điều khiển bên phải bao gồm hai bảng phụ - Xem và Điểm ngắt.
- JSFileSelector - JSFileSelector hiển thị danh sách tất cả các tệp JavaScript nằm trong mục đích trang của bạn.
- Điểm ngắt - Việc thực thi JavaScript sẽ dừng lại ở các điểm ngắt. Công bằng mà nói, có ba loại breakpoint trong Firebug - Tĩnh, Điều kiện và Động. Để đặt các điểm ngắt tĩnh, hãy nhấp vào dòng mã mong muốn trong bảng Tập lệnh. Như tên cho thấy, các điểm ngắt có điều kiện nên được đặt dựa trên một điều kiện. Để đặt các điểm ngắt dựa trên tên hàm, bạn có thể dựa trên các điểm ngắt động. Có một cái gì đó quý mến đối với các điểm ngắt động- Chúng có thể được thiết lập từ dòng lệnh. Ngoài ra, chúng có thể được thiết lập bằng cách sử dụng hai hàm được sử dụng phổ biến - gỡ lỗi và gỡ lỗi.
- Danh sách các điểm ngắt - Tất cả các điểm ngắt sẽ được hiển thị trong bảng điều khiển. Bạn có thể xóa các điểm ngắt không cần thiết.
- Cửa sổ Xem - ‘Cửa sổ xem’ là một từ quen thuộc đối với tất cả những ai đã thành thạo với tính năng thực sự của Microsoft Visual Studio. Tuy nhiên, hiểu được những ranh giới khác biệt giữa Watch Window of Firebug và của Microsoft Visual Studio sẽ giúp ích rất nhiều. Watch Window of Firebug sẽ hiển thị tất cả các giá trị của các biến có sẵn dưới dạng danh sách. Khốn nạn! Giá trị của các biến nằm trong phạm vi chỉ được hiển thị. Ngược lại, Watch Window của Microsoft Visual Studio sẽ hiển thị giá trị của các biến đã chọn.
Cách cài đặt Tiện ích bổ sung Firebug
- Mở trình duyệt Mozilla Firefox. Ở góc trên cùng bên phải của cửa sổ, bạn có thể tìm thấy Trình đơn mở
- Nhấp vào Mở trình đơn và nhấp vào Tiện ích bổ sung. Một cửa sổ mới xuất hiện.
- Trong hộp tìm kiếm, nhập Firebug và nhấn Enter phím của bàn phím.
- Firebug tiện ích bổ sung xuất hiện. Nhấp vào Cài đặt .
Bọ lửa hiện đã được thêm vào trình duyệt Firefox của bạn.
Cách gỡ lỗi mã Javascript bằng FireBug
Đây là quy trình 8 bước đơn giản cho phép bạn gỡ lỗi mã JavaScript trong Firefox bằng cách sử dụng FireBug:
- Viết mã JavaScript của bạn trong một tệp notepad. Lưu nó với phần mở rộng .htm. Mở tệp .htm này trong trình duyệt Firefox. Không cần suy nghĩ gì thêm, hãy khởi chạy bảng điều khiển của trình gỡ lỗi Firebug.
- Đặt một điểm ngắt tĩnh trên dòng mã mong muốn. Trên bảng điều khiển bên phải của tab tập lệnh, bạn có thể xem dòng mã mà điểm ngắt tĩnh đã được chỉ định.
- Thực thi từng dòng mã bằng cách nhấp vào nút “Bước qua”. Nút này có trên thanh công cụ Firebug. Ngoài nút Bước qua, bạn có thể thấy ba nút khác - Tiếp tục, Bước vào và Bước ra. Để tiếp tục thực thi tập lệnh sau khi gặp điểm ngắt, hãy nhấp vào Tiếp tục. Như một hành động thay thế, bạn có thể nhấn nút F8. Để bước qua một cuộc gọi chức năng cụ thể, hãy bấm Bước qua. Như một hành động thay thế, bạn có thể nhấn nút F10. Để bước vào phần nội dung của một chức năng cụ thể, hãy nhấp vào Bước vào. Như một hành động thay thế, bạn có thể nhấn nút F11. Để tiếp tục thực thi tập lệnh và dừng lại ở điểm ngắt tiếp theo, hãy nhấp vào Bước ra.
- Xem kỹ các giá trị đang được hiển thị trên Cửa sổ xem.
- Làm những việc cần thiết. Xác định lỗi và sửa lỗi.
- Tải lại trang. Để làm như vậy, hãy nhấp vào nút tải lại của Firefox. Thay vào đó, bạn có thể nhấn tổ hợp phím- Ctrl + R.
- Giá trị của hầu hết các biến sẽ được hiển thị trên Cửa sổ theo dõi. Tuy nhiên, giá trị của một hoặc hai biến có thể bị thiếu. Trong trường hợp đó, người gỡ lỗi thận trọng xác nhận tính hiệu quả của API CommandLine. Để thêm một điểm ngắt trên dòng đầu tiên của một hàm cụ thể, hãy sử dụng gỡ lỗi (fn). Để xóa một điểm ngắt xuất hiện trên dòng đầu tiên của một hàm cụ thể, hãy sử dụng undebug (fu).
- Sau khi sửa lỗi, hãy thực thi mã một lần nữa. Nếu nó có bất kỳ lỗi nào, hãy gỡ lỗi mã bằng cách làm theo 7 bước trên. Lưu tệp và xem trước giống như vậy trong Firefox.
Các lập trình viên có thể loại bỏ việc sửa lỗi tồi tệ nhất của họ bằng cách dựa vào hiệu quả của Firebug. Với Firebug theo ý của bạn, việc gỡ lỗi trở nên dễ dàng.