Javascript – console.dir() và console.table()

Thông thường bạn dùng console.log() để hiển thị bất kỳ thông tin gì cần xem. Tuy nhiên có những cách hiệu quả hơn giúp bạn dễ dàng hơn trong việc xem thông tin của từng loại dữ liệu.

Trong bài viết này tôi sử dụng chrome để minh họa, bạn có thể sử dụng hai hàm này trong các trình duyệt khác hoặc firebug.

console.dir()

Hiển thị dữ liệu theo dạng cây phân cấp, bạn có thể tương tác để xem các thuộc tính bên trong.

Khi sử dụng với một đối tượng HTML, bạn sẽ thấy console.log() hiển thị dạng cấu trúc HTML của đối tượng đó, còn console.dir() sẽ hiển thị các thuộc tính của đối tượng.

console.table()

Một hàm rất hay mà bạn có lẽ sẽ sử dụng thường xuyên là console.table(). Như tên gọi của nó, hàm này cho phép hiển thị dữ liệu dưới dạng bảng. Không chỉ dùng cho các dữ liệu dạng bảng, console.table() còn có thể đọc các thuộc tính của đối tượng phức tạp để hiển thị. Tất nhiên không thể thiếu, bạn có thể nhấn vào tiêu đề của một cột để table sắp xếp dữ liệu theo cột đó.

var data = [
{ name: ‘Bill’, color: ‘red’ },
{ name: ‘Kate’, color: ‘green’ },
{ name: ‘May’, color: ‘blue’ }
];

console.table(data);

Rất đẹp! Hãy thử thêm một ví dụ khác:

var data = { };
data.boy = { name: ‘Bill’, color: ‘red’ };
data.girl = { name: ‘Kate’, color: ‘green’ };

console.table(data);

Ngoài ra, nếu chỉ cần xem một vài cột, bạn có thể thêm tùy chọn tên các cột cần hiển thị:

// Show columns ‘name’ and ‘color’
console.table(data, [‘name’, ‘color’]);

// Just want to show column ‘name’
console.table(data, ‘name’);

YinYangIt Blog