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://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

BÀI VIẾT MỚI

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ó...

Hướng dẫn tạo bộ đếm lùi thời gian bằng JavaScript

Mới đó mà đã gần nửa năm 2021 trôi qua. Tình hình dịch bệnh COVID-19 cũng chẳng mấy khả quan. Nhưng vẫn cứ hy...

Hướng dẫn tạo hiệu ứng mưa rơi trên trang web với JavaScript

Quy Nhơn chớm bước vào mùa hè với nắng nóng. Những lúc thế này tự nhiên lại thèm những cơn mưa để giải tỏa...

Instagram ra mắt tính năng tạo chú thích tự động cho Stories và Reels

Tiếp bước TikTok, Instagram hiện cũng đã ra mắt tính năng tạo chú thích (caption) tự động của riêng mình. Tính năng mới này đã...

Facebook đã chính thức cập nhật tính năng “bong bóng chat” trên iPhone

Mới đây, Facebook đã chính thức cập nhật tính năng Chat Heads (hay còn gọi là bong bóng chat) trên iPhone, cho phép người...

BẠN XEM CHƯA

Bitdefender phát hành công cụ giải mã ransomware GandCrab

Nhóm phát triển đứng phía sau phần mềm ransomware nổi tiếng GandCrab tuyên bố rằng họ đã kiếm được lợi nhuận 2,5 tỷ đô...

DiaDiemQuyNhon.Vn bị hacker tấn công

Theo thông tin được đăng tải trên Zone-H thì có vẻ như vào ngày 26/12 vừa qua trang web www.diadiemquynhon.vn đã bị hacker tấn...

Sau khi Google bị hack

Trưa ngày 23/2 có vẻ như Google Việt Nam đã bị hack và cùng xem phản ứng của Google sau khi khắc phục sự...

Google Chrome sẽ chặn tất cả các liên kết tải xuống không an toàn

Google đang có kế hoạch sẽ chặn tất cả các liên kết tải xuống không an toàn trong các phiên bản sắp tới của...

Microsoft thưởng $13000 cho người tìm ra lỗi bảo mật trong cơ chế xác thực của mình

Một chuyên gia nghiên cứu bảo mật vừa được Microsoft thưởng $13000 cho việc người này đã phát hiện ra lỗ hổng bảo mật...