Debug với console.log() trong Javascript

Trong JavaScript, console.log() được sử dụng rộng rãi để ghi thông tin debug ra console của trình duyệt hoặc môi trường chạy JavaScript khác. Đây là một phương pháp đơn giản và hiệu quả để kiểm tra giá trị của biến, ghi lại thông tin hoặc theo dõi quá trình thực thi code.

Để sử dụng console.log(), bạn chỉ cần gọi phương thức này và truyền giá trị mà bạn muốn ghi ra console như một đối số. Ví dụ:

var x = 10;
console.log("Giá trị của x là: " + x);

Khi bạn chạy đoạn mã trên, nó sẽ ghi “Giá trị của x là: 10” ra console. Đây là ví dụ với trường hợp đơn giản, với trường hợp phức tạp hơn các bạn cần lưu ý một số điểm sau để có thể debug dễ dàng nhất.

Hiển thị nội dung theo object

Thay vì các bạn console.log(param1,param2,param3) thì bạn nên sử dụng là console.log({param1,param2,param3}) thì lúc này lúc debug sẽ hiển thị chi tiết thông tin giá trị.

Đặt prefix cho console.log()

Nếu bạn đặt nhiều console.log() thì bạn nên đặt tiền tố (prefix) để có thể phân biệt giữa các loại và dễ dàng kiểm soát. Ví dụ:

function prefixedLog(prefix, message) {
  console.log(`[${prefix}] ${message}`);
}

// Sử dụng:
prefixedLog("DEBUG", "Đây là một thông điệp debug");
prefixedLog("ERROR", "Đây là một thông điệp lỗi");

Khi bạn gọi hàm prefixedLog() với tiền tố và thông điệp, nó sẽ ghi ra console với định dạng [prefix] message. Trong ví dụ trên, kết quả trên console sẽ là:

[DEBUG] Đây là một thông điệp debug
[ERROR] Đây là một thông điệp lỗi

Sử dụng console.table() cho object, array

Trong JavaScript, console.table() là một phương thức trong đối tượng console cho phép bạn in ra console dữ liệu theo dạng bảng. Điều này rất hữu ích khi bạn muốn hiển thị một mảng hoặc đối tượng dưới dạng bảng để dễ đọc và so sánh các giá trị.

Để sử dụng console.table(), bạn chỉ cần truyền một mảng hoặc đối tượng làm đối số cho phương thức này. Console sẽ tự động hiển thị các thuộc tính và giá trị của mảng hoặc đối tượng đó dưới dạng bảng.

Ví dụ, giả sử bạn có một mảng chứa thông tin về các người dùng:

var users = [
  { name: "John", age: 30, city: "New York" },
  { name: "Alice", age: 25, city: "London" },
  { name: "Bob", age: 35, city: "Paris" }
];

Bạn có thể sử dụng console.table() để in ra console mảng users dưới dạng bảng:

console.table(users);

Khi bạn chạy đoạn mã trên, console sẽ hiển thị mảng users dưới dạng bảng với các cột tương ứng với các thuộc tính và các hàng tương ứng với các phần tử trong mảng.

Tương tự, bạn cũng có thể sử dụng console.table() để in ra bảng dữ liệu của một đối tượng:

var person = {
  name: "John",
  age: 30,
  city: "New York"
};

console.table(person);

Kết quả sẽ là một bảng với các cột là các thuộc tính của đối tượng và một hàng chứa giá trị tương ứng của các thuộc tính đó.

Đo thời gian thực thi code với console.time()

Trong JavaScript, console.time() là một phương thức trong đối tượng console được sử dụng để đo thời gian thực thi của một đoạn mã. Nó giúp bạn xác định thời gian mất để thực hiện một phần code cụ thể trong ứng dụng của bạn.

Để sử dụng console.time(), bạn cần gọi phương thức này và truyền một chuỗi làm đối số, đại diện cho tên thời gian bạn muốn đo. Sau đó, bạn thực thi phần mã mà bạn muốn đo thời gian thực thi. Cuối cùng, bạn sử dụng console.timeEnd() để dừng đo thời gian và hiển thị thời gian đã trôi qua.

Ví dụ, giả sử bạn muốn đo thời gian thực thi của một vòng lặp:

console.time("myLoop");

for (let i = 0; i < 1000000; i++) {
  // Các công việc trong vòng lặp
}

console.timeEnd("myLoop");

Khi bạn chạy đoạn mã trên, console sẽ hiển thị thời gian đã trôi qua từ console.time() đến console.timeEnd() dưới dạng milliseconds và in ra tên thời gian bạn đã đặt ("myLoop" trong trường hợp này).

Kết quả trên console có thể giống như sau:

myLoop: 87.233154296875ms

Bằng cách sử dụng console.time() và console.timeEnd(), bạn có thể đo thời gian thực thi của các phần mã khác nhau và tìm ra các phần mã nào mất nhiều thời gian để thực hiện. Điều này giúp bạn tối ưu hóa hiệu suất ứng dụng của mình.

Hiển thị đối tượng dưới dạng cây với console.dir()

Trong JavaScript, console.dir() là một phương thức trong đối tượng console được sử dụng để hiển thị một đối tượng dưới dạng cây (tree structure) trong console. Điều này giúp bạn khám phá các thuộc tính và phương thức của đối tượng một cách dễ dàng hơn.

Để sử dụng console.dir(), bạn cần truyền đối tượng mà bạn muốn khám phá làm đối số cho phương thức này. Console sẽ hiển thị đối tượng và các thuộc tính của nó dưới dạng cây trong console.

Ví dụ, giả sử bạn có một đối tượng person như sau:

var person = {
  name: "John",
  age: 30,
  city: "New York"
};

Bạn có thể sử dụng console.dir() để hiển thị đối tượng person dưới dạng cây:

console.dir(person);

Khi bạn chạy đoạn mã trên, console sẽ hiển thị đối tượng person và các thuộc tính của nó dưới dạng cây, cho phép bạn khám phá cấu trúc của đối tượng một cách dễ dàng.

Ngoài ra, console.dir() cũng hữu ích khi bạn muốn khám phá các phương thức của một đối tượng. Nó sẽ hiển thị cả các phương thức và các thuộc tính của đối tượng đó.

Lưu ý rằng hiển thị của console.dir() có thể khác nhau đối với các trình duyệt và môi trường chạy JavaScript khác nhau.