😂 Đừng dùng console.log nữa, thay thế nó bằng những cách sau.

date

Apr 23, 2023

slug

dung-dung-conole-log-nua-thay-the-no-bang-nhung-cach-sau-day

status

Published

tags

Chia sẻ

Study

Sưu tầm

summary

Debugging luôn là thời điểm gây ra nỗi đau cho anh em coder, anh em phải căng sức mình để tìm lỗi mà không biết lỗi ở đâu 😂😂

type

Post

Code mà không có lỗi thì chỉ có thần thánh phương nào ấy chứ, phương này thì chịu rồi.

Anh em hay dùng console.log để tìm lỗi trong Javascript, một trong những cách tuyệt vời. Tuy nhiên có những cách tố hơn để thực hiện việc này.

Sử dụng chúng sẽ làm cho quá trình debug nhanh hơn, dễ dàng hơn.

console.warn() và console.error()

Tuong tự như console.log dùng để dump object ra console. Điểm khác nhau của chúng dùng để định nghĩa type của nhưng thứ được dump ra.

Anh em muốn biết hệ thóng mất bao lâu để xử lý xong 1 đoạn code, đây chính là câu trả lời cho anh em.

console.time()

Hãy tạo 1 timer, cho 1 một cái tên:


console.time("Start timer")

Thêm đoạn code thực thi


for(i = 0; i < 10000; i++){
    // Some code here
}

Cuối cùng là gọi timeEnd()


console.timeEnd("End timer")

Code hoàn chỉnh của chúng ta


console.time("Loop timer")
for(i = 0; i < 10000; i++){
    // Some code here
}
console.timeEnd("Loop timer")

Chúng ta có kết quả như trên

Tracing

Đôi khi chúng ta cần biết tại sao hàm này lại được gọi, hay qua những bước nào thì tới hàm này

console.trace() là sự lựa chọn của anh em.


function trace(){
    console.trace()
}
function randomFunction(){
    trace();
}

Trên màn hình console của anh em sẽ hiển thị tiến trình như trên, thấy đc từng step gọi đến hàm đó.


var person1 = {name: "Weirdo", age : "-23", hobby: "singing"}
var person2 = {name: "SomeName", age : "Infinity", hobby: "programming"}

console.log thông thường cho chúng ta cái nhìn cơ bản về các dữ liệu mà không có format nào cụ thể

console.table giúp anh em có cái nhìn trực quan hơn, rõ ràng hơn, dữ liệu có hàng lối, đỡ đau mắt hơn

Nếu anh em thích hoa lá cành hơn nữa thì có thể thêm CSS vào, tuy nhiên không khuyến khích, hơi vẽ việc 😂


console.log("%c I love JavaScript!", 
  "color: red; background-color: lightblue; border: solid");