Trang chủ Lập trình Javascript - HTML Một vài thủ thuật debug trong JavaScript

Một vài thủ thuật debug trong JavaScript

Đối với developer, có lẽ phần lớn thời gian họ dành ra không phải là để code nên các tính năng của sản phẩm mà là để fix các bug từ sản phẩm đó. Đúng vậy, debug chính là một phần không thể thiếu trong lập trình!

Chính vì vậy, Brian Kernighan trong cuốn sách “The Elements of Programming Style” đã viết:

Tất cả mọi lập trình viên đều biết việc debug thậm chí còn khó gấp đôi việc viết một chương trình mới. Nếu bạn đủ thông minh để viết nên một chương trình, liệu bạn sẽ còn đủ sự thông minh để debug lỗi của chương trình đó không?

Việc code một chương trình JavaScript hiệu quả mà không phải debug là một điều vô cùng bất khả thi. Bạn sẽ phải chuẩn đoán bug bằng việc lần theo các dòng code và từ đó phát hiện ra nguyên nhân gốc rễ của các lỗi trong chương trình.

Trong kỉ nguyên mà Internet thống trị thế giới này, sẽ không phải là một điều gây khó dễ cho developer khi họ phải debug trong JavaScript. Họ có thể Google, đặt câu hỏi trên các diễn đàn lập trình, hoặc hỏi đồng nghiệp. Tuy nhiên, ngày nay càng có nhiều phương pháp và công cụ mới được add vào browser. Đặc biệt là sự xuất hiện của công cụ Firebug và Chrome dev khiến cho lập trình viên có nhiều cách khác nhau để fix bug hơn.

1. Console API

Console API là tên gọi chung của các hàm được định nghĩa sẵn trong Chrome Dev Tools. Các hàm này có thể được gọi thông qua đối tượng toàn cục console, và dùng để hiện thị bất cứ thông tin gì bạn muốn xem: giá trị của một biến, một đối tượng, hay thậm chí một DOM element. Các thông tin này được xuất ra ở tab Console trong Chrome Dev Tools.

Các hàm thường được dùng nhất trong Console API:

console.log()

Hàm này sẽ in giá trị của một hay nhiều biến/đối tượng/công thức truyền vào.

In giá trị của ngày hiện tại và in kèm theo một chuỗi

 console.dir

console.dir() liệt kê tất cả thuộc tính bên trong một đối tượng hay một mảng trong Javascript.

Console table

Đây có lẽ là hàm hữu ích nhất khi làm việc với nhiều đối tượng và mảng. Hàm này sẽ giúp in các giá trị của mảng hay đối tượng dưới dạng bảng. Bảng này hỗ trợ lập trình viên dễ quan sát, so sánh và sắp xếp các giá trị theo ý muốn.

Console.time

Nếu bạn quan tâm đến tốc độ chạy của các hàm hay thuật toán, đây là hàm dành riêng cho bạn khi giúp đo thời gian chạy giữa console.time() và console.timeEnd() theo mili giây.

2. Breakpoint

Một breakpoint là một điểm dừng có chủ đích trong code, dùng để hỗ trợ lập trình viên trong quá trình debug. Khi chương trình chạy đến một breakpoint, bạn có thể “bước qua” (step-through) từng dòng lệnh và kiểm tra xem mọi logic có đúng như ý đồ. Ở trạng thái dừng của breakpoint, bạn cũng có thể kiểm tra giá trị của từng biến tại thời điểm hiện tại. Điều này giúp xác định một lỗi thường gặp nhưng ít được để ý: sử dụng một biến khi chưa khởi tạo biến đó.

Có 2 cách để đặt breakpoint:

– Bằng tay: bấm vào số dòng của code trong tab Source

Đặt breakpoint bằng tay ở tab Sources trong Chrome Dev Tools

– Bằng code: sử dụng lệnh debugger trong code.

1/ var s = ‘Hello’;
2/ console.log(s);
3/ debugger;
4/ s = s + ‘ World’;
5/ console.log(s)

Kết quả chạy của đoạn code trên

Sau khi breakpoint được gọi, bạn có thể kiểm soát quá trình thực hiện của đoạn code tiếp theo bằng các nút sau:

Continue: chương trình sẽ tiếp tục chạy cho đến khi gặp một breakpoint khác (nếu có).

Step over: chạy từng dòng lệnh, nhưng sẽ không nhảy vào trong các hàm khác (xem ví dụ và giải thích thêm ở đây http://jsfiddle.net/karmiphuc/C5kMy/).

Step into: chạy từng dòng lệnh giống như Step over, nhưng sẽ nhảy vào từng dòng lệnh trong các hàm khác (xem ví dụ và giải thích thêm ở đây http://jsfiddle.net/karmiphuc/C5kMy/).

3. Firebug

Việc phát hiện lỗi trong Javascript tương đối phức tạp bởi trong quá trình dịch, nếu gặp một đoạn code JavaScript bị lỗi thì ngay lập tức nó sẽ ngưng xử lý luôn, lúc này các đoạn code JavaScript bên dưới sẽ không thực hiện được. Chính vì vậy, việc tìm lỗi trong Javascript tương đối quan trọng. Một công cụ cũng được các developer khá ưa thích khi debug trong JavaScript là Firebug. Firebug là một plugin của FireFox rất hữu ích và hỗ trợ rất tốt, đặc biệt là đối với các Web designer, để debug trong Javascript, chỉnh sửa giao diện và CSS. Ngoài ra, với Firebug bạn có thể đo được tốc độ tải của từng thành phần trong một website. Là một người thiết kế website chuyên nghiệp thì đây là công cụ không thể thiếu đối với bạn.

Bạn có thể tải Firebug tại đây: https://getfirebug.com/downloads

Lập trình viên ngày nay không những cần biết code, debug một ngôn ngữ mà phải biết code và debug nhiều ngôn ngữ khác nếu muốn trở thành full-stack developer hoặc muốn thăng tiến trong sự nghiệp lập trình. Ngoài JavaScript, Viecbonus còn vô số những đầu sách về những ngôn ngữ lập trình khác nhau như Java, PHP Golang, Python, Android,… giúp bạn trở thành super dev trên mọi “mặt trận code”.

Theo VietBonus

Huỳnh Mai Anh Kiệthttps://www.mangbinhdinh.vn
Anh là một người đam mê công nghệ. Hiện tại anh là một lập trình viên tại Quy Nhơn.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

- Advertisment -
Shopify

BÀI VIẾT MỚI

Hướng dẫn tạo hiệu ứng slow-motion với Instagram Reels

Sau khi cộng đồng công nghệ kêu gọi tẩy chay TikTok vì nghi ngờ ứng dụng này thu thập dữ liệu người dùng thì...

Amazon ra mắt Amazon Honeycode – Công cụ hỗ trợ người dùng tạo ứng dụng di động và web

Mới đây Amazon vừa thông báo ra mắt dịch Amazon Honeycode. Đây là một dịch vụ hỗ trợ người dùng tạo ra các ứng...

Điều gì sẽ xảy ra với cơ thể khi bạn trúng đạn

Chúng ta chắc hẳn đã xem khá nhiều bộ phim hành động mà trong đó nhân vật chính bị trúng đạn vào vai, vào...

Dad, How Do I? – Kênh Youtube cho những ai không có bố

Vừa qua, một kênh YouTube mới của một người đàn ông dạy bài học, kỹ năng về cuộc sống đã lan truyền cực kỳ...

Facebook chi 400 triệu đô để mua lại Giphy

Giphy là một nền tảng trực tuyến hỗ trợ lưu trữ và tìm kiếm ảnh động (GIF) trực tuyến của Mỹ. Và mới đây...

BẠN XEM CHƯA

Widget CSS Classes – Plugin hỗ trợ tạo thêm class cho widget của WordPress

Nói chung một widget mới được khởi tạo trên WordPress đều có một ID khác nhau nhưng vì một lý do nào đó bạn...

Chúc mừng năm mới 2014

CUNG kính mời nhau chén rượu nồng CHÚC mừng năm đến, tiễn năm xong TÂN niên phúc lộc khơi vừa dạ XUÂN mới tài danh khởi thỏa...

Kiểm tra tình trạng nợ xấu ngân hàng qua… chatbot

Việc bị dính nợ xấu ngân hàng sẽ dẫn đến lịch sử nợ xấu của khách hàng có vết đen trên hệ thống CIC...

Huawei đã xin cấp bằng sáng chế hệ điều hành Harmony tại Văn phòng Sở hữu Trí tuệ Liên minh Châu Âu

Theo các thông tin dự đoán gần đây thì Huawei sẽ tự mình phát triển một hệ điều hành là Hongmeng để sử dụng...

Điều tôi sợ…

Mỗi buổi sáng dắt xe ra đi làm/học bạn đều nhận được câu nhắc nhở: Ăn sáng rồi đi làm/học nghen con... Mỗi buổi chiều...