DANH MỤC: JAVASCRIPT BLOG

TIP - debug hiệu quả trong javascript.


Đối console chắc hẳn các bạn cũng không lạ gì nữa rồi nhỉ? Nhưng các bạn đã tận dụng được hết những gì nó có chưa? Hay chỉ mới console.log(),... Bài viết này mình sẽ giới thiệu đến mọi người một số method hữu dụng trong đối tượng console giúp cho việc debug cực nhanh và hiệu quả.

Đối tượng console hỗ trợ chúng ta tất cả 24 phương thức, nhưng trong bài này mình sẽ không nói về mấy phương thức thông dụng như log, info, warn,... Mà chỉ tập trung vào các phương thức hay ho mà ít được sử dụng đến.

1, console.memory

Nếu như bạn muốn kiểm tra chương trình đang chạy sử dụng ram như thế nào thì hãy sử dụng:

console.memory;

VD:

console.memory;

2, console.trace()

Nếu như bạn muốn biết đối tượng được khởi tạo, thực hiện ở những chỗ nào thì hãy sử dụng console.trace().

VD:

Console.trace

3, console.time() và console.timeEnd()

-  Nếu như bạn muốn kiểm tra perfomance code của bạn thì 2 phương thức console.time()console.timeEnd() quả là một lựa chọn sáng giá.

VD:

console.time();

for (var i = 0; i < 10000; i++) {

}

console.timeEnd();

4, console.table()

Logging dữ liệu dưới dạng table.

VD:

var a = [];

for (var i = 0; i < 20; i++) {
    a.push({ stt: i, name: "name: " + i });
}

console.table(a);

5, console.group()

Nếu như bạn muốn logging dữ liệu một cách gọn lẹ dễ nhìn, thì hãy dùng console.group()

VD:

console.group('Root');

for (var i = 1; i < 11; i++) {
    console.group('Group %i', i);
    console.log('scope: %i', i);
    console.groupEnd();
}

console.groupEnd();

6, console.groupCollapsed()

Phương thức này cũng giống như phương thức console.group(), nhưng lần này các nội dung trong group sẽ được ẩn đi và chỉ được hiển thị khi người dùng click vào group đó.

VD:

console.group('Root');

for (var i = 1; i < 11; i++) {
    console.groupCollapsed('Group %i', i);
    console.log('scope: %i', i);
    console.groupEnd();
}

console.groupEnd();

7,  console.count()

Nếu bạn muốn đếm xem số lần object thực thi trong quá trình chạy thì console.count() sẽ giúp bạn.

VD:
 

for (var i = 1; i < 11; i++) {
    console.count("Goi lan");
}

8, Kết.

Bài này, chỉ mang tính chất giới thiệu chứ không đi sâu vào kĩ thuật của từng phần => các bạn tự mày mò thêm nhé.
Tài liệu tham khảo: https://developer.mozilla.org/en-US/docs/Web/API/Console 

Nguồn: Toidicode.com

Thông tin tác giả

Vũ Thanh Tài

Vũ Thanh Tài

The best way to learn is to share

Hãy tham gia group facebook để cùng giao lưu chia sẻ kiến thức! Tham Gia