Sử dụng Chrome, cách tìm ra sự kiện nào bị ràng buộc với một yếu tố

Giả sử tôi có một liên kết trên trang của mình:

<a href="#" id="foo">Click Here</a>

Tôi không biết gì khác, nhưng khi tôi nhấp vào liên kết, một cái alert("bar")được hiển thị. Vì vậy, tôi biết rằng ở đâu đó, một số mã đang bị ràng buộc #foo.

Làm cách nào tôi có thể tìm thấy mã liên kết alert("bar")với sự kiện nhấp chuột? Tôi đang tìm kiếm một giải pháp với Chrome.

Ps.: Ví dụ này là hư cấu, vì vậy tôi không tìm kiếm giải pháp như: "Sử dụng XXXXXX và tìm kiếm toàn bộ dự án cho" alert (\ "bar \") ". Tôi muốn một giải pháp gỡ lỗi / theo dõi thực sự.

Sử dụng Chrome 15.0.865.0 dev . Có phần "Trình lắng nghe sự kiện" trên bảng Thành phần:

Và một "Điểm dừng của Trình lắng nghe Sự kiện" trên bảng điều khiển Tập lệnh. Sử dụng Chuột -> nhấp vào điểm dừng và sau đó "bước vào cuộc gọi chức năng tiếp theo" trong khi theo dõi ngăn xếp cuộc gọi để xem chức năng người dùng nào xử lý sự kiện. Lý tưởng nhất là bạn thay thế phiên bản rút gọn của jQuery bằng một phiên bản chưa hoàn thành để bạn không phải bước vào mọi lúc và sử dụng từng bước khi có thể.

Bạn cũng có thể sử dụng trình kiểm tra của Chrome để tìm các sự kiện đính kèm theo cách khác, như sau:

1. Nhấp chuột phải vào thành phần để kiểm tra hoặc tìm thấy nó trong ngăn 'Các thành phần'.
2. Sau đó, trong tab / ngăn 'Trình nghe sự kiện', hãy mở rộng sự kiện (ví dụ: 'nhấp')
3. Mở rộng các nút phụ khác nhau để tìm nút bạn muốn và sau đó tìm vị trí của nút phụ 'trình xử lý'.
4. Bấm chuột phải vào từ 'hàm', rồi bấm 'Hiển thị định nghĩa hàm'

Điều này sẽ đưa bạn đến nơi trình xử lý được xác định, như được minh họa trong hình ảnh sau đây và được Paul Irish giải thích tại đây: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA

Hãy dùng thử tiện ích mở rộng Audit jQuery ( https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg ), sau khi cài đặt, hãy làm theo các bước sau:

1. Kiểm tra phần tử
2. Trên tab ' Kiểm toán jQuery ' mới mở rộng thuộc tính Sự kiện
3. Chọn cho sự kiện bạn cần
4. Từ thuộc tính xử lý, nhấp chuột phải vào chức năng và chọn ' Hiển thị định nghĩa chức năng '
5. Bây giờ bạn sẽ thấy mã ràng buộc Sự kiện
6. Nhấp vào nút ' In đẹp ' để xem mã dễ đọc hơn

(Mới nhất kể từ năm 2020) Đối với phiên bản Chrome Phiên bản 83.0.4103.61 :

1. Chọn yếu tố bạn muốn kiểm tra

2. Chọn tab Trình nghe sự kiện

3. Đảm bảo kiểm tra trình nghe Framework để hiển thị tệp javascript thực thay vì chức năng jquery.

Chỉnh sửa : thay cho câu trả lời của riêng tôi, câu trả lời này khá xuất sắc: Cách gỡ lỗi các ràng buộc sự kiện JavaScript / jQuery bằng Fireorms (hoặc công cụ tương tự)

Các công cụ dành cho nhà phát triển Google Chromes có chức năng tìm kiếm được tích hợp trong phần tập lệnh

Nếu bạn không quen thuộc với công cụ này: (chỉ trong trường hợp)

• nhấp chuột phải vào bất cứ nơi nào trên một trang (bằng chrome)
• nhấp vào 'Kiểm tra phần tử'
• nhấp vào tab 'Tập lệnh'
• Thanh tìm kiếm ở trên cùng bên phải

Thực hiện tìm kiếm nhanh cho #ID sẽ đưa bạn đến chức năng ràng buộc.

Ví dụ: tìm kiếm #foosẽ đưa bạn đến

$('#foo').click(function(){ alert('bar'); })

Cập nhật 2018 - Có thể hữu ích cho độc giả trong tương lai:

Tôi không chắc chắn khi điều này ban đầu được giới thiệu trong Chrome. Nhưng một cách khác (dễ dàng) có thể được thực hiện ngay bây giờ trong Chrome là thông qua các lệnh của bàn điều khiển.

Ví dụ: ( trong loại bảng điều khiển chrome )

getEventListeners($0)

Trong đó $ 0 là thành phần được chọn trong DOM.

https://developers.google.com/web/tools/chrom-devtools/console/command-line-reference#0_-_4

findEventHandlers là một plugin jquery, mã thô có tại đây: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js

Các bước

1. Dán mã thô trực tiếp vào bảng điều khiển của chrome (lưu ý: phải tải jquery)

2. Sử dụng lệnh gọi hàm sau: findEventHandlers(eventType, selector);
   để tìm trình xử lý eventType của phần tử được chỉ định của phần tử tương ứng.

Ví dụ :

findEventHandlers("click", "#clickThis");

Sau đó, nếu có, trình xử lý sự kiện có sẵn sẽ hiển thị dưới đây, bạn cần mở rộng để tìm trình xử lý, nhấp chuột phải vào chức năng và chọn show function definition

Xem: https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

Đối với Chrome Phiên bản 52.0.2743.116:

1. Trong Công cụ dành cho nhà phát triển của Chrome, hiển thị bảng 'Tìm kiếm' bằng cách nhấn Ctrl+ Shift+ F.

2. Nhập tên của yếu tố bạn đang cố gắng tìm.

Kết quả cho các phần tử được liên kết sẽ xuất hiện trong bảng điều khiển và nêu tệp mà chúng nằm trong.