Cách Hiển Thị Data Theo Bảng Trong Console Trình Duyệt

Console là một công cụ tích hợp trong trình duyệt ghi lại các lỗi xảy ra trên trang web. Nếu có bất kỳ lỗi nào - chẳng hạn như các liên kết bị hỏng, các hàm JavaScript không hoàn chỉnh hoặc các thuộc tính CSS không xác định - trình duyệt sẽ hiển thị thông báo lỗi trong Console.

Hơn nữa, chúng ta cũng có thể tương tác với Console thông qua shell và Console API, rất hữu ích khi kiểm tra một số chức năng và dữ liệu đầu ra. Ở đây, chúng ta sẽ tìm hiểu một vài mẹo hữu ích khi sử dụng API Console.

Truy Cập Console Của Trình Duyệt

Trong Chrome, chúng tôi có thể chọn menu Xem> Nhà phát triển> JavaScript Console để hiển thị Console. Ngoài ra, chúng ta cũng có thể sử dụng phím tắt: Cmd + Tùy chọn + J trên OS X và Ctrl + Shift + J trên Windows.

Dưới đây là một Bảng điều khiển Chrome không có lỗi.

Từ đây, chúng ta có thể bắt đầu sử dụng lệnh được cung cấp trong Console API.

Cách Sử Dụng Console

Chúng ta có thể tương tác với Console của browser ngay trên chính Console, và bằng cách thêm JavaScript vào tài liệu (document). Ví dụ, ở đây chúng ta chỉ thị Console xuất ra “Good Morning!” bằng cách gõ lệnh console.log () trực tiếp trong Console:

Như đã đề cập, chúng ta cũng có thể áp dụng console.log () trong tài liệu. Một cách dùng thực tế của console.log () là để kiểm tra khai báo điều kiện JavaScript. Chúng ta có thể thấy rõ hơn nếu kết quả trả về true hay false với sự trợ giúp của console.log ().

Dưới đây là một ví dụ:

1 2 3 4 5 6

var a = 1; if(a == 1) {   console.log('true'); } else {   console.log('false'); }

Mã ở trên sẽ trả về true, vì một biến chứa số 1. Trong Console, bạn sẽ thấy trình duyệt xuất text true.

Xuất Data Ở Dạng Bảng

Đôi khi, chúng ta sẽ phải xử lý một tập hợp dữ liệu (array) hoặc list các Object, như bên dưới:

1 2 3 4 5 6

var data = [   { name: "Andi", age: "21", city: "Tuban" },   { name: "Ani", age: "25", city: "Trenggalek" },   { name: "Adi", age: "30", city: "Kediri" } ]; console.table(data);

Dữ liệu này sẽ khó đọc khi chúng ta sử dụng phương thức console.log (). Phương thức console.log () sẽ hiển thị Array theo chế độ xem dạng tree có thể thu gọn, như hiển thị bên dưới.

Khi làm việc với một Array như vậy, việc sử dụng console.table () sẽ phù hợp hơn. Phương thức này sẽ hiển thị dữ liệu theo định dạng bảng. Với dữ liệu giống như trên, nó sẽ xuất hiện như sau:

Lời Kết

Console của trình duyệt giúp nhà phát triển web xử lý lỗi trong trang web. Chúng ta cũng có thể sử dụng công cụ tuyệt vời này để kiểm tra đầu ra dữ liệu như với phương thức console.log (). Khi chúng ta có một data array thì lệnh console.table() sẽ hữu ích hơn, vì nó hiển thị Array ở định dạng bảng dễ đọc. Xin lưu ý rằng console.table () chỉ có thể áp dụng trong các trình duyệt dựa trên Webkit như Chrome, Safari và phiên bản Opera mới nhất.