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

- Advertisement -
Huỳnh Mai Anh Kiệthttps://anhkiet.biz
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 cho Hura Apps - một startup nhỏ về công nghệ 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

BÀI VIẾT MỚI

Binance Launchpad có dễ… húp như bạn tưởng

Tiền kỹ thuật số (cryptocurrency) đang dần mở rộng. Kể ra mình biết khái niệm này từ rất lâu. Nếu các bạn là độc...

10 Công Cụ Có Thể Thay Thế ChatGPT

ChatGPT là một mô hình ngôn ngữ lớn được phát triển bởi OpenAI. Nó cung cấp các câu trả lời nhanh chóng và ngắn...

Hướng Dẫn Đăng Ký Nhận Mã Giảm Giá Highland Coffee

Highland Coffee đang có nhiều chương trình khuyến mã cho khách hàng của mình. Các khuyến mãi có thể bao gồm upsize, mua 1...

Quà cuối năm 2022 từ Shopify

Năm nay nhận quà từ các đối tác công nghệ hơi bị nhiều. Mới đây mình lại nhận được quà từ Shopify. Quà về đúng...

Nhận quà từ đối tác công nghệ Recharge

Recharge là một trong những công ty chuyên cung cấp giải pháp bán hàng đăng ký định kỳ (subscription payments) cho các nền tảng...

BẠN XEM CHƯA

Hình ảnh thị xã An Nhơn trước năm 1975

Mạng Bình Định mời các bạn nhìn xem lại hình ảnh của thị xã An Nhơn trước năm 1975. Thời bấy giờ An Nhơn là...

5 Youtuber bạn cần theo dõi nếu muốn tìm hiểu về tiền điện tử

Càng ngày, Youtube càng có nhiều kênh thảo luận về tiền điện tử. Tuy nhiên không phải tất cả những kênh đó đều có...

Bồ và vợ

Bồ là cô gái qua đường Vợ mới trân quí nhớ thương vô vàn Bồ thì nũng nịu than van Vợ lo nhà cửa lầm than vô...

Xài internet trên điện thoại trong khi chờ wifi

Theo thời gian khoảng chừng hơn 1 năm sử dụng, chiến smartphone của bạn sẽ bị chậm dần. Trong đó rõ nhất là tính...