Hướng dẫn console log object javascript - đối tượng nhật ký bảng điều khiển javascript

Trong bài này chúng ta sẽ tìm hiểu hàm console.log trong Javascript, đây là hàm dùng để in giá trị của một biến ra ngoài ô Console của Inspect Element.console.log trong Javascript, đây là hàm dùng để in giá trị của một biến ra ngoài ô Console của Inspect Element.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức.

Bạn có thể truyền mọi biến vào hàm console, và nó sẽ hiển thị kết quả trong ô console. Bạn có thể áp dụng cho tất cả các loại dữ liệu như

var info = {
    website : "freetuts.net",
    email : "",
    address : "Buôn Ma Thuột, ĐăkLăk"
};
console.log(info);

var info = {
    website : "freetuts.net",
    email : "",
    address : "Buôn Ma Thuột, ĐăkLăk"
};
console.log(info);

var info = {
    website : "freetuts.net",
    email : "",
    address : "Buôn Ma Thuột, ĐăkLăk"
};
console.log(info);

var info = {
    website : "freetuts.net",
    email : "",
    address : "Buôn Ma Thuột, ĐăkLăk"
};
console.log(info);

Quay lại bài trước thì mình đã giới thiệu với các bạn cách sử dụng Inspect Element, vậy thì trong bài này chúng ta sẽ kết hợp Firebug và hàm

var info = {
    website : "freetuts.net",
    email : "",
    address : "Buôn Ma Thuột, ĐăkLăk"
};
console.log(info);

1. Console.log trong Javascript là gì?

Console.log là một hàm của Javascript, được sử dụng để debug / kiểm tra / xem giá trị của một biến trong Javascript. Công dụng của console.log là show ra giá trị của một biến, dù biến đó thuộc kiểu dữ lliệu gì đi nữa thì vẫn được hiển thị ở ô console trong hộp thoại Inspect Element.

Bài viết này được đăng tại [free tuts .net]

2. Cú pháp console.log() trong javascript

Lệnh console.log() có cú pháp là

var info = {
    website : "freetuts.net",
    email : "",
    address : "Buôn Ma Thuột, ĐăkLăk"
};
console.log(info);

Ví dụ 1: console.log() một biến bình thường: console.log() một biến bình thường

var website = 'freetuts.net';
console.log(website);

Kết quả:

Ví dụ 2: console.log() một mảng: console.log() một mảng

var websites = ["freetuts.net", "freetuts.net", "course.freetuts.net", "qa.freetuts.net"];
console.log(websites);

Kết quả:

Ví dụ 2: console.log() một mảng: console.log() một giá trị

console.log("Chào mừng bạn đến với freetuts.net");

Kết quả:

Ví dụ 2: console.log() một mảng console.log() một object

var info = {
    website : "freetuts.net",
    email : "",
    address : "Buôn Ma Thuột, ĐăkLăk"
};
console.log(info);

Kết quả:

Ví dụ 2: console.log() một mảng: Như vậy hàm

var info = {
    website : "freetuts.net",
    email : "",
    address : "Buôn Ma Thuột, ĐăkLăk"
};
console.log(info);

1- Console

Đối tượng console cung cấp khả năng truy cập vào debugging console (bàn điều khiển gỡ rối) của trình duyệt (Chẳng hạn Web Console trong Firefox). Console không có ích đối với người dùng cuối, nhưng nó có ích đối với các lập trình viên, giúp họ biết được các mã Javascript của họ hoạt động thế nào trên trình duyệt, và hỗ trợ dò ra vị trí phát sinh lỗi để xử lý. console cung cấp khả năng truy cập vào debugging console (bàn điều khiển gỡ rối) của trình duyệt (Chẳng hạn Web Console trong Firefox). Console không có ích đối với người dùng cuối, nhưng nó có ích đối với các lập trình viên, giúp họ biết được các mã Javascript của họ hoạt động thế nào trên trình duyệt, và hỗ trợ dò ra vị trí phát sinh lỗi để xử lý.

Cú pháp để truy cập vào đối tượng console: console:

window.console

// Or Simple:

console
 

Mở cửa sổ Console trên trình duyệt Chrome: Console trên trình duyệt Chrome:

• / More Tools / Developer Tools

Mở cửa sổ Console trên trình duyệt Firefox: Console trên trình duyệt Firefox:

• / Web Developer / Web Console

2- Các phương thức thông dụng

Đối tượng console có khá nhiều phương thức, nhưng có 5 phương thức được sử dụng nhiều nhất đó là: console có khá nhiều phương thức, nhưng có 5 phương thức được sử dụng nhiều nhất đó là:

• console.debug(..)
• console.log(..)
• console.info(..)
• console.warn(..)
• console.error(..)

// (Important!!) Read more notes for debug() method.
console.debug(obj1 [, obj2, ..., objN]);
console.debug(message [, subst1, ..., substN]);

console.log(obj1 [, obj2, ..., objN]);
console.log(message [, subst1, ..., substN]);

console.info(obj1 [, obj2, ..., objN]);
console.info(message [, subst1, ..., substN]);

console.warn(obj1 [, obj2, ..., objN]);
console.warn(message [, subst1, ..., substN]);

console.error(obj1 [, obj2, ..., objN]);
console.error(message [, subst1, ..., substN]);

Các phương thức trên ghi một đối tượng (Hoặc nhiều đối tượng), hoặc một String ra cửa sổ console. Nội dung được in ra trên cửa sổ Console có thể có mầu sắc và kiểu dáng khác nhau tùy thuộc vào phương thức được sử dụng. String ra cửa sổ console. Nội dung được in ra trên cửa sổ Console có thể có mầu sắc và kiểu dáng khác nhau tùy thuộc vào phương thức được sử dụng.

Các tham số:

obj1 ... objN

Danh sách các đối tượng cần in ra trên cửa sổ Console. Console.

message

Một String cần in ra trên cửa sổ Console. String cần in ra trên cửa sổ Console.

subst1 ... substN

Các đối tượng dùng để thay thế cho các chuỗi thay thế (Substitution strings) trong chuỗi message. Điều này cho phép bạn kiểm soát bổ xung định dạng đầu ra. message. Điều này cho phép bạn kiểm soát bổ xung định dạng đầu ra.

window.console

// Or Simple:

console
 

window.console

// Or Simple:

console
 

window.console

// Or Simple:

console
 

window.console

// Or Simple:

console
 

console.debug(..)

Bạn chỉ có thể nhìn thấy nội dung được in ra bởi phương thức console.debug(..) nếu Console của bạn được cấu hình Log-Level="debug". Mặc định Log-Level="log". console.debug(..) nếu Console của bạn được cấu hình Log-Level="debug". Mặc định Log-Level="log".

Ví dụ, Sử dụng các phương thức console.log(), console.info(), console.warn(), console.error() để ghi một đối tượng ra cửa sổ Console. console.log(), console.info(), console.warn(), console.error() để ghi một đối tượng ra cửa sổ Console.

var myObject = {id : 123, text : 'Some Text'};

console.log(myObject);
console.info(myObject);
console.warn(myObject);
console.error(myObject);

console-example.html

   
      
      
      
   
   
      
Console
      
See result in the Console
      Show object in Console 
   

Ví dụ sử dụng console.log(message, obj1, obj2,.. , objN): console.log(message, obj1, obj2,.. , objN):

var message = "Hello, %s. You've called me %d times.";

console.log(message, "Tom", 5);

substitution-string-example.html

   
      
      
      
   
   
      
Console
      
console.log("Hello, %s. You've called me %d times.", "Tom", 5);
      
Click Test button, and See result in the Console
      Test 
   

3- Tùy biến kiểu dáng đầu ra

Bạn có thể sử dụng chỉ thị (directive) %c để áp dụng một kiểu dáng CSS cho đầu ra của Console. %c để áp dụng một kiểu dáng CSS cho đầu ra của Console.

var websites = ["freetuts.net", "freetuts.net", "course.freetuts.net", "qa.freetuts.net"];
console.log(websites);

styling-example.html

var websites = ["freetuts.net", "freetuts.net", "course.freetuts.net", "qa.freetuts.net"];
console.log(websites);

4- Console assert(..)

var websites = ["freetuts.net", "freetuts.net", "course.freetuts.net", "qa.freetuts.net"];
console.log(websites);

Phương thức console.assert(..) rất giống với phương thức console.error(..), điều khác biệt là nội dung chỉ được hiển thị trên cửa sổ Console nếu tham số assertion được đánh giá là false. console.assert(..) rất giống với phương thức console.error(..), điều khác biệt là nội dung chỉ được hiển thị trên cửa sổ Console nếu tham số assertion được đánh giá là false.

Các tham số:

obj1 ... objN

Danh sách các đối tượng cần in ra trên cửa sổ Console. false thì các tham số khác sẽ được dùng để hiển thị trên cửa sổ Console, giống như bạn đang sử dụng phương thức console.error(..). Ngược lại, nếu nó được đánh giá là true thì phương thức này sẽ không làm gì cả.
 

obj1 ... objN

Danh sách các đối tượng cần in ra trên cửa sổ Console. Console.

message

Một String cần in ra trên cửa sổ Console. String cần in ra trên cửa sổ Console.

subst1 ... substN

Các đối tượng dùng để thay thế cho các chuỗi thay thế (Substitution strings) trong chuỗi message. Điều này cho phép bạn kiểm soát bổ xung định dạng đầu ra. message. Điều này cho phép bạn kiểm soát bổ xung định dạng đầu ra.

Ví dụ:

var websites = ["freetuts.net", "freetuts.net", "course.freetuts.net", "qa.freetuts.net"];
console.log(websites);

Substitution

assert-example.html

var websites = ["freetuts.net", "freetuts.net", "course.freetuts.net", "qa.freetuts.net"];
console.log(websites);

string

Descriptionconsole.clear() được sử dụng để dọn dẹp (clear) hết tất cả các nội dung đã được ghi ra (log) trên cửa sổ console.

clear-example.html

var websites = ["freetuts.net", "freetuts.net", "course.freetuts.net", "qa.freetuts.net"];
console.log(websites);

%o

Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector. Console khá khó nhìn, vì vậy bạn muốn chúng hiển thị trên các khối một cách có tổ chức, có một vài phương thức giúp bạn làm được điều đó.

• console.group()
• console.groupCollapsed()
• console.groupEnd()

%O console.group() giúp bạn tạo ra một khối trong cửa sổ Console, bạn có thể tạo ra các khối lồng nhau. Và sử dụng console.groupEnd() để thoát ra khỏi khối hiện tại, trở về với khối cha.

%d console.groupCollapsed() cũng để tạo ra một khối nhưng khối này sẽ trong trạng thái cụp (Collapsed), trong khi phương thức console.group() tạo ra một khối trong trạng thái mở rộng (Expanded).

Outputs an integer. Number formatting is supported, for example 

window.console

// Or Simple:

console
 

window.console

// Or Simple:

console
 

var websites = ["freetuts.net", "freetuts.net", "course.freetuts.net", "qa.freetuts.net"];
console.log(websites);

%i Console (của trình duyệt Chrome):

Substitution

group-example.html

var websites = ["freetuts.net", "freetuts.net", "course.freetuts.net", "qa.freetuts.net"];
console.log(websites);

7- Console Timer

Đôi khi bạn muốn kiểm tra xem mất bao nhiêu lâu để một đoạn code của bạn thực thi xong, có một vài phương thức của Console giúp bạn thực hiện điều này. Console giúp bạn thực hiện điều này.

• console.time(label)
• console.timeEnd(label)
• console.timeLog(label)

console.time(label)

Phương thức console.time(label) bắt đầu một bộ đếm thời gian (Timer) trong Console. Tham số label có thể coi là tên của bộ đếm thời gian, nó giúp bạn phân biệt các bộ đếm thời gian đang hoạt động trong Console. console.time(label) bắt đầu một bộ đếm thời gian (Timer) trong Console. Tham số label có thể coi là tên của bộ đếm thời gian, nó giúp bạn phân biệt các bộ đếm thời gian đang hoạt động trong Console.

console.timeEnd(label)

Phương thức console.timeEnd(label) được sử dụng để kết thúc một bộ đếm thời gian (Timer) và hiển thị kết quả trên cửa sổ Console. console.timeEnd(label) được sử dụng để kết thúc một bộ đếm thời gian (Timer) và hiển thị kết quả trên cửa sổ Console.

console.timeLog(label)

Phương thức console.timeLog(label) ghi ra giá trị hiện thời của bộ đếm thời gian (Timer) mà bạn đã tạo ra trước đó bởi phương thức console.time(label). console.timeLog(label) ghi ra giá trị hiện thời của bộ đếm thời gian (Timer) mà bạn đã tạo ra trước đó bởi phương thức console.time(label).

Ví dụ, sử dụng Console Timer để đánh giá thời gian trả lời của người dùng. Console Timer để đánh giá thời gian trả lời của người dùng.

var websites = ["freetuts.net", "freetuts.net", "course.freetuts.net", "qa.freetuts.net"];
console.log(websites);

Xem code đầy đủ của ví dụ:

timer-example.html

var websites = ["freetuts.net", "freetuts.net", "course.freetuts.net", "qa.freetuts.net"];
console.log(websites);

8- Console Stack Trace

Đôi khi bạn muốn ghi ra (log) tất cả các hàm đã được gọi trước khi bắt gặp hàm chứa dòng mã console.trace(). Điều này giúp bạn biết được thứ tự các hàm được gọi trong chương trình. console.trace(). Điều này giúp bạn biết được thứ tự các hàm được gọi trong chương trình.

Để đơn giản hãy xem một ví dụ:

console.log("Chào mừng bạn đến với freetuts.net");

Dưới đây là hình ảnh minh họa thứ tự các hàm đã được gọi cho tới khi bắt gặp console.trace(). console.trace().

Kết quả mà bạn nhận được khi chạy ví dụ:

Xem code đầy đủ của ví dụ:

trace-example.html

console.log("Chào mừng bạn đến với freetuts.net");

8- Console Stack Trace console.trace() tại nhiều vị trí trong chương trình. Xem ví dụ:

trace-example2

console.log("Chào mừng bạn đến với freetuts.net");

Đôi khi bạn muốn ghi ra (log) tất cả các hàm đã được gọi trước khi bắt gặp hàm chứa dòng mã console.trace(). Điều này giúp bạn biết được thứ tự các hàm được gọi trong chương trình.

trace-example2.html

console.log("Chào mừng bạn đến với freetuts.net");

Để đơn giản hãy xem một ví dụ:

Dưới đây là hình ảnh minh họa thứ tự các hàm đã được gọi cho tới khi bắt gặp console.trace().

Kết quả mà bạn nhận được khi chạy ví dụ: console.table(data[,columns]) hiển thị một dữ liệu dưới dạng một bảng.

Bạn có thể gọi console.trace() tại nhiều vị trí trong chương trình. Xem ví dụ:

Và kết quả nhận được: data là một đối tượng, bảng sẽ gồm 2 cột, cột đầu tiên (Cột index) chứa các thuộc tính (property) và cột thứ hai (Cột value) chứa các giá trị của thuộc tính.

console.log("Chào mừng bạn đến với freetuts.net");

9- Console Table

console.table(data [,columns])

Phương thức console.table(data[,columns]) hiển thị một dữ liệu dưới dạng một bảng. data là một mảng của các giá trị nguyên thủy (primitive), bảng sẽ bao gồm 2 cột. Cột thứ nhất (Cột index) chứa các index của mảng. Cột thứ hai (Cột value) chứa các phần tử của mảng.

data - Object:

Nếu tham số data là một đối tượng, bảng sẽ gồm 2 cột, cột đầu tiên (Cột index) chứa các thuộc tính (property) và cột thứ hai (Cột value) chứa các giá trị của thuộc tính.

Kết quả bạn nhận được: data là một mảng của các đối tượng. Bảng sẽ có ít nhất hai cột. Cột thứ nhất (Cột index) chứa các index của mảng.

console.log("Chào mừng bạn đến với freetuts.net");

data - Array of primitives

Nếu tham số data là một mảng của các giá trị nguyên thủy (primitive), bảng sẽ bao gồm 2 cột. Cột thứ nhất (Cột index) chứa các index của mảng. Cột thứ hai (Cột value) chứa các phần tử của mảng. data là một mảng của các mảng. Bảng sẽ có ít nhất 2 cột. Cột thứ nhất (Cột index) chứa các index của mảng.

console.log("Chào mừng bạn đến với freetuts.net");

console.log("Chào mừng bạn đến với freetuts.net");

data - Array of Objects columns để chỉ định các cột mà bảng sẽ bao gồm.

console.log("Chào mừng bạn đến với freetuts.net");

Nếu tham số data là một mảng của các đối tượng. Bảng sẽ có ít nhất hai cột. Cột thứ nhất (Cột index) chứa các index của mảng.

data - Array of arrays

Nếu tham số data là một mảng của các mảng. Bảng sẽ có ít nhất 2 cột. Cột thứ nhất (Cột index) chứa các index của mảng. console.count([label]),

console.log("Chào mừng bạn đến với freetuts.net");

data, columns

var info = {
    website : "freetuts.net",
    email : "",
    address : "Buôn Ma Thuột, ĐăkLăk"
};
console.log(info);

Sử dụng tham số columns để chỉ định các cột mà bảng sẽ bao gồm.

var info = {
    website : "freetuts.net",
    email : "",
    address : "Buôn Ma Thuột, ĐăkLăk"
};
console.log(info);

10- Console count(), countReset()

count([label]) console.countReset([label]) thiết lập lại bộ đến (counter) của console.count([label]) về 0.

countReset-example.html

var info = {
    website : "freetuts.net",
    email : "",
    address : "Buôn Ma Thuột, ĐăkLăk"
};
console.log(info);