Mở đầu
Debugging là một tiến trình cần thiết trong phát triển phần mềm dù với bất kì ngôn ngữ hay nền tảng nào. Với JS cũng vậy, chắc hẳn bạn đã quen với các cú pháp cơ bản như dưới đây:
1 2 3 4 5 |
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>‘Hello World<span class="token operator">!</span>’<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//log a message or an object to console</span> console<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span>‘Something happened…’<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//same as console log</span> console<span class="token punctuation">.</span><span class="token function">warn</span><span class="token punctuation">(</span>‘Something strange happened…’<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//same as console log but outputs a warning</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>‘Something horrible happened…’<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//same as console log but outputs an error</span> |
Tuy nhiên, còn một số hàm, thuộc tính tiện ích hơn với Console mà có thể bạn chưa biết, chúng ta hãy cùng tìm hiểu trong bài này nhé
Tip #1: console.trace()
Nếu muốn biết chi tiết Log ra sao, bạn có thể sử dụng console.trace()
để truy vết ngăn xếp với dữ liệu đã ghi trong Log
Tip #2 console.time() và console.timeEnd()
Nếu muốn quan tâm đến hiệu suất, bạn có thể tính thời gian chạy với console.time()
và in ra bằng console.timeEnd()
Tip #3 console.memory
Nếu vấn đề hiệu suất trở nên quan trọng hơn và bạn đang muốn tìm ra chi tiết sử dụng bộ nhớ, bạn có thể dùng console.memory
để kiểm tra tình trạng vùng nhớ HEAP
Tip #4 console.profile(‘profileName’) & console.profileEnd(‘profileName’)
Đây không phải là một chuẩn, nhưng nó được hỗ trợ rộng rãi. Bạn có thể chạy hoặc dừng công cụ đánh giá hiệu năng của browser – performance profile, bằng cách chạy console.profile(‘profileName’)
và sau đó là console.profileEnd(‘profileName’)
. Điều này giúp bạn thiết lập chính xác những gì bạn muốn, và ngăn chặn những lần click chuột tốn thời gian.
Tip #5 console.count(“STUFF I COUNT”)
Trong trường hợp 1 hàm hoặc code được gọi nhiều lần, bạn có thể dùng console.count(‘?’)
để đếm số lần hàm hoặc code đó được chạy đến.
Tip #6 console.assert(false, “Log me!”)
Bạn có thể sử dụng console.assert(condition, msg)
để in ra thông báo lỗi trên console, nếu condition có giá trị false.
Tip #7 console.group(‘group’) & console.groupEnd(‘group’)
Khi in ra quá nhiều log, bạn có thể muốn nhóm chúng lại. Một cách hữu dụng đó là sử dụng console.group()
& console.groupEnd()
Tip #8 String substitutions
Khi in ra log, bạn có thể cần kết hợp giá trị của một số biến. Bạn có thể dùng như sau.
VD: %s = string, %i = integer, %o = object, %f = float
Tip #9 console.clear()
Khi đã log quá nhiều, bạn muốn xóa đi, console.clear()
là một giải pháp.
Tip #10 console.table()
Bạn có thể in 1 object thành 1 bảng trực quan với console.table()
Tài liệu tham khảo
https://medium.com/appsflyer/10-tips-for-javascript-debugging-like-a-pro-with-console-7140027eb5f6