Chắc hẳn các bạn web developer không xa lạ gì với Console của Google DevTool, một tool không thể thiếu để debug các ứng dụng nền web 🙂
Hôm nay mình xin chia sẻ một số tips mình hay dùng với console trong quá trình phát triển ứng dụng web:
Viết nhiều dòng lệnh trong console
Để viết nhiều dòng trong console, bạn dùng tổ hợp phím SHIFT + ENTER khi muốn xuống dòng.
In cùng lúc nhiều đối tượng
console.log(obj1, obj2, obj3);
Sử dụng tham số khi in
Cái này rất cơ bản nhưng mình thấy nhiều bạn thích dùng:
var currentYear = new Date().getFullYear(),
yourName = ‘Do Nam Khanh’;
console.log('Hello ' + yourName + '! This year is ' + currentYear);
Dĩ nhiên, ví dụ này nhỏ nên có thể bạn sẽ không thấy được lợi ích của việc dùng arguments với formatted string nhưng chắc chắn đoạn code này sẽ dễ nhìn hơn rất nhiều 🙂
console.log('Hello %s! This year is %d', yourName, currentYear);
Đặc biệt, bạn có thể sử dụng %c để thêm style khi in ra console. Ví dụ:
In đối tượng theo dạng bảng
Giả sử bạn có 1 mảng dữ liệu như sau & muốn hiển thị ra console để kiểm tra:
Nếu sử dụng console.log() để in ra dữ liệu thì kết quả sẽ khá là khó nhìn.
Và nếu bạn muốn sắp xếp theo index, theo name hay age thì sao? May mắn thay, console có 1 phương thức là .table() sẽ giúp chúng ta in ra dữ liệu theo dạng bảng dễ nhìn hơn & hỗ trợ cả sắp xếp theo column
Thậm chí phương thức này còn cho phép chúng ta chỉ định sẽ hiển thị thuộc tính nào (tương ứng với cột nào). Để làm điều này, chỉ cần thêm tham số thứ 2 dạng mảng với giá trị là property tương ứng của object. Ví dụ trên sẽ được viết lại như sau:
Truy xuất DOM bằng XPath
Bạn có thể sử dụng $x(xpath) để truy xuất các phần tử DOM (trường hợp bạn đang mở Console trên 1 trang web sử dụng jQuery thì bạn thậm chí có thể sử dụng luôn jQuery ở trong console).
Mình sẽ minh hoạ luôn bằng cách sử dụng Xpath để lấy ra tất cả button Add Media có trên màn hình soạn thảo bài viết này:
Benchmark bằng cách sử dụng console.time() và console.timeEnd()
Mình hay sử dụng cách này để benchmark 1 block code. Ví dụ như tính thời gian khởi tạo 1 mảng có 1 triệu phần tử:
Ờ đấy, thấy chưa. Có quả benchmark này nhìn thấy rõ performance thế nào nè =))
Ngoài ra còn rất nhiều những tính năng cool nữa của DevTool, bạn có thể tham khảo tại: https://developer.chrome.com/devtools