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

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

  1. Pingback: Cialis generika
  2. Pingback: Cialis cost
  3. Pingback: Viagra pills
  4. Pingback: Cheap cialis
  5. Pingback: Viagra generic
  6. Pingback: Cialis uk
  7. Pingback: Online viagra
  8. Pingback: Generic cialis
  9. Pingback: Cialis generic
  10. Pingback: essayforme
  11. Pingback: Generic cialis
  12. Pingback: Buy cialis online
  13. Pingback: Cialis 20mg
  14. Pingback: cialis generic
  15. Pingback: viagra 100mg
  16. Pingback: sildenafil
  17. Pingback: cialis 20mg
  18. Pingback: buy viagra
  19. Pingback: sildenafil citrate
  20. Pingback: cialis prices
  21. Pingback: viagra online
  22. Pingback: sildenafil 20 mg
  23. Pingback: buy cialis
  24. Pingback: viagra coupons
  25. Pingback: sildenafil generic
  26. Pingback: cialis online
  27. Pingback: sildenafil 50 mg
  28. Pingback: cialis tablets
  29. Pingback: viagra tablet
  30. Pingback: sildenafil 100mg
  31. Pingback: tadalafil 20mg
  32. Pingback: sildenafil 100
  33. Pingback: cialis pills
  34. Pingback: sildenafil coupons
  35. Pingback: sildenafil 100 mg
  36. Pingback: cheap cialis
  37. Pingback: buy cialis online
  38. Pingback: sildenafil tablets
  39. Pingback: cialis tadalafil
  40. Pingback: tadalafil generic
  41. Pingback: fluoxetine 20 mg
  42. Pingback: prozac generic
  43. Pingback: bactrim ds
  44. Pingback: biaxin antibiotic

Leave a Reply

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