Đố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.
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
– 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)
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
