Bất kỳ một lập trình viên nào muốn debug JavaScript hiệu quả, họ đều sử dụng DevTool của trình duyệt, thiết lập break point và di chuyển qua chúng.
Điều này, hiệu quả hơn nhiều so với cách rắc các câu lệnh console.log() xung quanh code mà bạn đã biết từ khi mới bắt đầu HỌC JAVASCRIPT.
Trong bài viết này, mình sẽ giải thích 4 lý do tại sao bạn nên ngừng sử dụng console.log() và các mẹo tốt nhất để làm việc debug chuyên nghiệp và tốt hơn.
#1: THIẾU THÔNG TIN NGỮ CẢNH
console.log() buộc bạn phải chọn thông tin để ghi log trước khi gỡ lỗi một cách có ý thức.
Nhưng những gì bạn chọn hiển thị ra ngay từ đầu là không đủ hoặc thậm chí hoàn toàn không liên quan.
Bởi bạn thường chưa có bất kỳ ý tưởng nào về những gì đang xảy ra.
Mỗi khi bạn khởi chạy ứng dụng của mình, bạn lại tiến thêm một bước nữa, nhận ra rằng bạn vẫn chưa ghi đúng thông tin vào đúng thời điểm, mất hàng giờ đồng hồ để thay đổi log, lặp đi lặp lại, để hiển thị thông tin mới và ẩn những thông tin không liên quan.
Mẹo debug JavaScript:
-
Hiển thị / xem bất kỳ biến JS nội tuyến nào trong khi debug (đối số, biến cục bộ, biến toàn cục, v.v.).
-
Mở call stack để có được bối cảnh hoàn chỉnh về sự cố vừa xuất hiện.
#2: QUÁ NHIỀU THÔNG TIN
Các thuật toán thường được thiết kế để tự động hóa nhiều tác vụ nhỏ, vòng lặp và đệ quy... là những công việc cơ bản đằng sau nó.
Với console.log(), nó có thể mang đến rất nhiều dòng hiển thị trước mặt bạn, tức là rất khó tìm được thông tin phù hợp.
Mẹo debug JavaScript:
-
Tạo các break point có điều kiện để tạm dừng việc thực thi vào đúng thời điểm để bạn có thể phân tích những gì đang diễn ra.
-
Xem các biểu thức JS tùy chỉnh (biến, điều kiện, v.v.) để bạn không lãng phí thời gian để lấy ra cùng một biểu thức ở mỗi bước của vòng lặp.
-
Bổ sung chức năng ghi log tiêu chuẩn cho ứng dụng của bạn để theo dõi mọi thứ diễn ra.
#3: THÔNG TIN KHÔNG ĐÁNG TIN CẬY
Hầu hết thời gian gọi console.log() khi console chưa hoạt động chỉ dẫn đến đối tượng được xếp hàng đợi chứ không phải đầu ra mà console sẽ chứa.
Để giải quyết vấn đề, bạn sẽ cần sao chép thông tin hoặc tuần tự hóa nó.
Quá trình kết xuất diễn ra không đồng bộ (được điều chỉnh để cập nhật giới hạn tốc độ), vì các tương tác trong tương lai với các đối tượng được ghi lại như mở rộng thuộc tính đối tượng trong console của trình duyệt.
Mẹo debug JavaScript:
-
Asynchronous stack trace (hiện là mặc định trong Chrome) cho phép bạn kiểm tra các lệnh gọi hàm ngoài vòng lặp sự kiện hiện tại.
#4: HÀNH VI CODE ĐÃ THAY ĐỔI
Cách “tiêu chuẩn” để debug code không đồng bộ là console log “1”, “2”, “3”, “4”, v.v. tức là tất cả các bước được thực hiện trước đầu ra mà bạn mong đợi cho đến khi bạn nhận được thứ tự phù hợp.
Vậy thì, cách nó chạy, dẫn đến việc theo dõi các hành vi không ổn định thực sự khó khăn.
Và sau khi hoàn tất quá trình debug, bạn lại cũng phải nhớ để xóa tất cả console.log thừa trong code của mình.
Mẹo debug JavaScript:
-
Debug không chỉ đơn giản là kiểm tra code. Đó là cả một quá trình, kiểm tra, thay đổi và sau đó tiếp tục debug. Nếu bạn dành nhiều thời gian để thiết lập các break point, liệu chúng có còn ở đó sau khi sửa đổi code và làm mới không? .... Gợi ý cho bạn: DevTools làm điều này khá tốt.
Để kết thúc bài viết này, mình đề nghị bạn tìm hiểu winston hoặc loglevel là các trình ghi nhật ký có thể tùy chỉnh khá tốt.
Hoặc tận dụng DevTools trên trình duyệt như đa số các lập trình viên vẫn hay làm. Nó vừa đơn giản lại hiệu quả lại giúp bạn HỌC LẬP TRÌNH WEB dễ dàng hơn.
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học làm Lập trình viên. Hành động ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0914939543
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python