10 điều “nhiệm màu” bạn có thể làm với Developer Console của Chrome

4540

Ít người biết rằng Chrome luôn đi kèm theo một số công cụ lập trình built-in. Bộ công cụ hỗ trợ một loạt tính năng đa dạng, trong đó có Elements, Network, và Security. Hôm nay, chúng ta sẽ tập trung 100% nội dung bài viết vào JavaScript Console.

Khi mới bắt đầu code, tôi chỉ dùng JavaScript console cho giá trị logging như phản hồi từ server, hoặc giá trị của biến. Nhưng dần dần, sau khi đọc nhiều hướng dẫn online, tôi nhận ra console có thể làm nhiều thứ hơn ta tưởng.

1. Select DOM Elements

Nếu quen thuộc với jQuerry, bạn chắc cũng biết được tầm quan trọng của selector $(‘.class’)$(‘#id’). Chúng sẽ lựa chọn DOM element dựa trên class hoặc ID tương ứng.

Ngay cả khi không dùng được jQuerry trong DOM, bạn vẫn có thể làm việc tương tự với developer console.

$(‘tagName’) $(‘.class’) $(‘#id’)$(‘.class #id’) tương đương với document.querySelector(‘ ‘). Dòng lệnh này sẽ trả kết quả là element đầu tiên trong DOM khớp với selector.

Bạn có thể dùng $$(‘tagName’) hoặc $$(‘.class’) (hãy để ý biểu tượng $$) để lựa chọn tất cả element của DOM dựa trên một selector cụ thể. Lệnh này còn đặt element vào array.

Ví dụ, $$(‘.className’) sẽ cho bạn tất cả element có class className; còn $$(‘.className’)[0] $$(‘.className’)[1] sẽ tương ứng cho bạn element đầu tiên và thứ hai.

2. Biến trình duyệt trành editor

Bạn hoàn toàn có thể biến trình duyệt trành text editro tiện dụng. Bạn có thể thêm và bỏ text từ bất cứ đâu trong DOM.

Bạn không phải inspect element và edit HTML nữa. Thay vào đó, hãy vào developer console và gõ đoạn sau:

Sau đó, ta có thể thoải mái edit được content. Bạn có thể edit gần như mọi thứ trong DOM.

3. Tìm Events liên đới với Element trong DOM

Khi debug, bạn phải chú ý tìm event listener gán với một element trong DOM. Developer console sẽ giúp bạn tìm dễ dàng hơn.

getEventListeners($(‘selector’)) trả kết quả là một array của objects có chứa tất cả event gán với element đó. Bạn có thể mở rộng object để xem event:

Để tìm Listener cho một event nhất định, bạn có thể:

Đoạn lệnh này sẽ hiển thị listener liên đới với event cụ thể. Ở đây eventName[0] là một array liệt kê tất cả event của một event cụ thể. Ví dụ:

…. sẽ hiển thị listener liên đới với click event của element với ID ‘firstName’.

Vietnam web summit

Tham gia cộng đồng lập trình Web lớn nhất Việt Nam: Vietnamwebsummit.com

4. Monitor Events

Với developer event, bạn cũng có thể giám sát event gắn với một element cụ thể trong DOM khi chúng được thực thi. Có rất nhiều lệnh khác nhau bạn có thể sử dụng để theo dõi một vài hoặc tất cả những event này:

  • monitorEvents($(‘selector’)) sẽ giám sát tất cả event liên đới với element với selector của bạn, sau đó log in chúng vào console ngay khi được kích hoạt. Ví dụ, monitorEvents($(‘#firstName’)) sẽ log tất cả event gắn với element có ID của firstName
  • monitorEvents($(‘selector’),’eventName’) sẽ log một event nhất định gắn với một element. Bạn có thể pass event name làm đối số đến hàm. Lệnh này sẽ chỉ log một event nhất định gắn với một element cụ thể. Ví dụ, monitorEvents($(‘#firstName’),’click’) sẽ log tất cả click event gắn với element có ID firstName.
  • monitorEvents($(‘selector’),[‘eventName1’,’eventName3',….]) sẽ log nhiều event dựa vào yêu cầu của chính bạn. Thay vì phải pass một event name duy nhất dưới dạng đối số, sẽ pass một array của chuỗi chứa tất cả event. Ví dụ, monitorEvents($(‘#firstName’),[‘click’,’focus’]) sẽ log click event và tập trung và event gắn với element có ID firstName.
  • monitorEvents($(‘#firstName’),[‘click’,’focus’]): ngừng giám sát và log event trong console.

5. Tìm Time Of Execution của một Code Block

JavaScipt console có một hàm quan trọng là console.time(‘labelName’), lấy label name làm đối số, rồi bắt đầu timer. Còn một hàm quan trọng nữa là console.timeEnd(‘labelName’) cũng lấy label name và kết thúc timer liên đới với label đó.

Ví dụ:

Hai dòng code trên cho ta thời gian tiêu tốn từ đầu đến cuối timer.

Chúng ta có thể cải thiện đoạn code này hơn nữa để tính toán thời gian để thực thi một code block.

Ví dụ, nếu muốn tìm khoảng thời gian để thực thi một vòng lập, tôi có thể làm như sau:

6. Sắp xếp giá trị của một biến vào Table

Giả sử ta có nhiều array (mảng) của các object trông như sau:

Khi ta gõ tên biến vào console, ta sẽ nhận giá trị dưới dạng array của objects. Rất tiện lợi, bạn có thể mở rộng objects và xem các giá trị.

Nhưng khi số tính chất gia tăng, array sẽ rối và khó hiểu hơn. Do đó, để nhận thức biến rõ hơn, chúng ta có thể hiển thị chúng thành table.

.console.table(variableName) thể hiện biến và tất cả tính chất theo cấu trúc bảng, như ví dụ dưới đây:

 

7. Kiểm tra một element trong DOM

Bạn có thể trực tiếp kiểm tra một element từ console:

  • inspect($(‘selector’)) sẽ kiểm tra element khớp với selector và đưa bạn đến tab Element trong Chrome Developer Tools. Ví dụ, inspect($(‘#firstName’)) sẽ kiểm tra element có ID firstNameinspect($(‘a’)[3]) sẽ kiểm tra anchor element thứ tư có trong DOM của bạn.
  • $0, $1, $2,… có thể giúp bạn truy hồi các element vừa kiểm tra gần đây nhất. Ví dụ, $0 cho bạn DOM element được kiểm tra gần nhất, còn $1 sẽ cho bạn DOM element được kiểm tra gần nhì.

8. Liệt kê các tính chất của một Element

Nếu bạn muốn liệt kê ra tất cả tính chất của một element, bạn có thể thực hiện trực tiếp từ Console.

dir($(‘selector’)) trả một object với tất cả tính chất liên quan với DOM element của nó. Bạn có thể expand để xem thêm nhiều chi tiết hơn nữa.

9. Truy hồi giá trị của kết quả cuối cùng

Bạn có thể dùng console làm máy tính. Và nếu làm như vậy, bạn có thể sẽ cần phải thực hiện nhiều hơn một phép tính. Và đây là cách lấy giá trị của phép tính trước đó từ bộ nhớ:

$_

Cụ thể hơn:

10. Dọn dẹp console và Bộ nhớ

Nếu bạn muốn dọn sạch console và bộ nhớ của console, chỉ việc gõ:

clear()

Sau đó nhấn enter là xong rồi.

________________________________________________________________________________________________

Trên đây chỉ là vài ví dụ đơn giản về những tính năng hay ho mà JavaScript console của Chrome có thể làm được. Nếu bạn có trick nào hay với Chrome console, đừng ngại chia sẻ trong phần comment nhé.

Techtalk via freecodecamp

 

CHIA SẺ