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

javascript-iconThô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.

console-dir

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-log-vs-dir

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);

console-table-array

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);

console-table-object

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

One thought on “Javascript – console.dir() và console.table()

  1. Pingback: Javascript – console.dir() và console.table() | fishgold192

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s