Event Listeners phác thảo mọi phần tử có event listener, được tô màu theo loại — nhấp, di chuột, cuộn, chạm, bàn phím và biểu mẫu — hiển thị vị trí của mỗi trình xử lý và hiển thị các phần tử khi DOM thay đổi.
Tìm hiểu lý do tại sao điều gì đó phản ứng — hoặc không — thường bắt đầu bằng một câu hỏi mà trang sẽ không trả lời: có trình xử lý nhấp chuột nào trên phần tử này không? Yếu tố nào thực sự sở hữu hành vi di chuột? Nghe cuộn trang mà giật trang là sao? DevTools của trình duyệt có thể liệt kê listeners của từng phần tử một, nếu bạn đã biết nên chọn phần tử nào.
Công cụ này trả lời câu hỏi cho toàn bộ trang cùng một lúc. Mọi phần tử có listener đều có đường viền theo màu của loại đó — nhấp, di chuột, cuộn, chạm và kéo, bàn phím hoặc biểu mẫu và tiêu điểm — và việc di chuột qua một phần tử sẽ hiển thị chính xác các sự kiện và nơi mỗi sự kiện đến từ: thuộc tính nội tuyến, thuộc tính trên, trình xử lý React hoặc Vue, jQuery hoặc addEventListener. Các ô danh mục bật và tắt từng loại, đồng thời danh sách bên dưới đặt tên cho từng thành phần, do đó, chỉ cần một cú nhấp chuột, bạn sẽ cuộn đến thành phần đó.
Các khung được xử lý đúng cách. React gắn listeners của nó vào thư mục gốc và gửi các sự kiện trong nội bộ, điều này sẽ làm cho toàn bộ ứng dụng trông có thể nhấp vào được; công cụ này đặt các đăng ký gốc đó sang một bên và hiển thị trình xử lý React trên các phần tử khai báo chúng. Quá trình quét nhanh không cần tải lại và bao gồm các trình xử lý nội tuyến, React, Vue và jQuery. Bạn chỉ có thể nhìn thấy Listeners được thêm bằng addEventListener đơn giản trước khi mở công cụ từ khi bắt đầu tải trang, vì vậy Reload & record sẽ tải lại trang một lần khi bật tính năng ghi — sau đó, công cụ sẽ tự mở lại với mọi listener bao gồm, các trình nghe ở cấp độ trang trên window và document.
Tab thứ hai xem chính DOM. Mỗi nút được thêm hoặc bị xóa, thay đổi thuộc tính và thay đổi văn bản sẽ nhấp nháy trên trang, bộ đếm hiển thị các đột biến mỗi giây và danh sách xếp hạng các thành phần thay đổi nhiều nhất, cùng với các thuộc tính liên quan. Luồng phát ổn định khi không có ai chạm vào trang thường có nghĩa là đồng hồ hẹn giờ, hoạt ảnh dựa trên JavaScript hoặc khung hiển thị lại nhiều hơn mức cần thiết - chính xác là những thứ làm hao pin và khiến trang bị giật.
Các thành phần có listeners nhấp chuột, di chuột, cuộn, chạm, bàn phím và biểu mẫu được viền bằng màu riêng, có các ô xếp để hiển thị hoặc ẩn từng loại.
Thuộc tính nội tuyến, thuộc tính trên, trình xử lý React và Vue, sự kiện jQuery và lệnh gọi addEventListener, được gắn nhãn trên mọi thành phần.
listeners cấp gốc của React được đặt sang một bên và trình xử lý của nó được hiển thị trên các phần tử khai báo chúng thay vì trên toàn bộ ứng dụng.
Reload & record mọi lệnh gọi addEventListener từ khi bắt đầu tải trang, bao gồm cả listeners window và document, chỉ cho một lần tải đó.
Các nút được thêm và xóa, các thay đổi thuộc tính và thay đổi văn bản sẽ nhấp nháy trên trang, với bộ đếm đột biến mỗi giây.
Danh sách được xếp hạng gồm các thành phần thay đổi nhiều nhất, cùng với các thuộc tính liên quan, chỉ thẳng vào các kết xuất lại chạy nhanh.
Xem nhanh xem nút có thực sự có listener hay không hoặc liệu trình xử lý có nằm trên phần tử trình bao bọc hay không.
Tìm mọi thành phần đang nghe thao tác cuộn, di chuyển bằng bánh xe hoặc di chuyển bằng thao tác chạm, bao gồm cả listeners trên window và document.
Kiểm tra xem điều khiển nào phản hồi với các sự kiện bàn phím và điều khiển nào chỉ phản hồi với chuột.
Xem bộ đếm đột biến khi trang không hoạt động; các phần tử liên tục thay đổi trỏ đến bộ đếm thời gian hoặc khung thực hiện công việc bổ sung.
Di chuột quanh một trang web xa lạ để xem phần nào tương tác và khung nào kết nối chúng.
Nhấp vào biểu tượng Event Listeners trong thanh công cụ DevSuite Pro. Quá trình quét nhanh sẽ diễn ra ngay lập tức và phác thảo mọi phần tử mà nó tìm thấy.
Di chuột qua bất kỳ phần tử được phác thảo nào để xem các sự kiện và nguồn của chúng. Sử dụng các ô danh mục để chỉ hiển thị listeners nhấp chuột, di chuột hoặc cuộn.
Nhấn Reload & record để tải lại trang một lần khi bật ghi. Công cụ này sẽ tự mở lại và hiện bao gồm mọi lệnh gọi addEventListener.
Bấm vào một hàng trong danh sách để cuộn trang tới phần tử đó và flash nó. Copy report cung cấp cho bạn danh sách đầy đủ dưới dạng văn bản.
Mở tab DOM mutations và sử dụng trang. Các phần tử thay đổi nhấp nháy và những phần tử bận rộn nhất sẽ xuất hiện ở đầu danh sách.
Cài đặt DevSuite Pro miễn phí và mở khóa hơn 74 công cụ dành cho nhà phát triển cho trình duyệt của bạn.
