Hướng dẫn console.log javascript

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.

Facebook

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ý.

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


window.console

// Or Simple:

console

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

/ More Tools / Developer Tools

Mở cửa sổ 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.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.

Các tham số:

obj1 ... objN

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

message

Một 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.

Substitution string	Description
%o	Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector.
%O
%d	Outputs an integer. Number formatting is supported, for example `console.log["Foo %.2d", 1.1]` will output the number as two significant figures with a leading 0: `Foo 01`
%i
%s	Outputs a string.
%f	Outputs a floating-point value. Formatting is supported, for example `console.log["Foo %.2f", 1.1]` will output the number to 2 decimal places: `Foo 1.10`

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".

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.


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

console.log[myObject];
console.info[myObject];
console.warn[myObject];
console.error[myObject];

console-example.html




   
      Console
      
      
          function test[] {
             var myObject = {id : 123, text : 'Some Text'};

             console.log[myObject];
             console.info[myObject];
             console.warn[myObject];
             console.error[myObject];
          }
      
   
   
      Console
      See result in the Console
      Show object in Console

Ví dụ sử dụng 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
      
      
          function test[] {
             var message = "Hello, %s. You've called me %d times.";
             console.log[message, "Tom", 5];
          }
      
   
   
      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.


function test[] {
    var style = "color: yellow; font-style: italic; background-color: blue;padding: 2px";
    console.log["This is %cMy stylish message", style];
}

styling-example.html





    Styling Console
    
    
        function test[] {
          var style = "color: yellow; font-style: italic; background-color: blue;padding: 2px";
          console.log["This is %cMy stylish message", style];
        }
    


    Styling Console
    
       Click the button, and See result in the Console
     
    Call test[]

4- Console assert[..]


console.assert[assertion, obj1 [, obj2, ..., objN]];
console.assert[assertion, message [, subst1, ..., substN]];

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.