Một số tips với Google DevTool Console

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.

multiple-lines

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ụ:
arguments-styled

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.
console.log

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
console.table

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:
console.table.column

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:
console.xpath

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ử:

console.benchmark2

Ờ đấ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

136 thoughts on “Một số tips với Google DevTool Console

  1. Pingback: ceftin antibiotic
  2. Pingback: cephalexin 500mg
  3. Pingback: fluconazole 150 mg
  4. Pingback: levitra
  5. Pingback: generic cialis
  6. Pingback: cefdinir 300 mg
  7. Pingback: bactrim antibiotic
  8. Pingback: cialis
  9. Pingback: cialis 5 mg
  10. Pingback: cialis 20 mg
  11. Pingback: cialis coupon
  12. Pingback: cialis generico
  13. Pingback: cialis generika
  14. Pingback: cialis vs viagra
  15. Pingback: tadalafil
  16. Pingback: tadalafil 5mg
  17. Pingback: tadalafil 20 mg
  18. Pingback: tadalafila
  19. Pingback: viagra vs cialis
  20. Pingback: viagra
  21. Pingback: generic levitra
  22. Pingback: cheap viagra
  23. Pingback: cialis canada
  24. Pingback: levitra 20 mg
  25. Pingback: levitra coupon
  26. Pingback: dutch women viagra
  27. Pingback: cialis dosage
  28. Pingback: levitra generic
  29. Pingback: female viagra
  30. Pingback: cialis free trial
  31. Pingback: levitra vs viagra
  32. Pingback: generic viagra

Leave a Reply

Your email address will not be published. Required fields are marked *