Tôi đang sử dụng Chrome và trang web của riêng tôi.

Những gì tôi biết từ bên trong:

1 ) Tôi có một hình thức nơi mọi người đăng ký bằng cách nhấp vào nút hình ảnh màu cam này:

2 ) Tôi kiểm tra nó, và đây là tất cả: <img class="formSend" src="images/botoninscribirse2.png">

3 ) Ở đầu mã nguồn, có hàng tấn nguồn kịch bản. Tôi biết nút nào gọi bởi vì tôi đã mã hóa nó:<script src="js/jquery2.js" type="text/javascript"></script>

4 ) Trong tệp đó, bạn có thể tìm thấy: $(".formSend").click(function() { ... });đó là nút được kích hoạt (để thực hiện xác thực và gửi biểu mẫu khá phức tạp) và điều tôi muốn là có thể tìm thấy bằng cách sử dụng các công cụ chrome dev trên bất kỳ trang web nào.

Làm thế nào tôi có thể tìm ra phần tử gọi ở đâu?

Tab người nghe đã không làm việc cho tôi. Vì vậy, sau đó tôi đã cố gắng tìm kiếm những người nghe sự kiện nhấp chuột, có vẻ như là một vụ cá cược an toàn với tôi nhưng ... không có jquery2.jsở đó (và tôi thực sự không biết tập tin nào là mã nên tôi đã lãng phí thời gian để kiểm tra tất cả những điều này .. .):

$(".formSend").click(function() { ... });Chức năng của tôi trong jquery2.jstập tin không có ở đó.

Jesse giải thích tại sao :

"Cuối cùng, lý do tại sao chức năng của bạn không bị ràng buộc trực tiếp với trình xử lý sự kiện nhấp là vì jQuery trả về một hàm bị ràng buộc. Đến lượt, hàm của jQuery đi qua một số lớp trừu tượng và kiểm tra, và ở đâu đó, nó thực thi chức năng của bạn . "

Theo đề xuất của một số bạn, tôi đã thu thập các phương pháp hoạt động trong một câu trả lời dưới đây .

Câu trả lời của Alexander Pavlov là gần nhất với những gì bạn muốn.

Do tính mở rộng của tính trừu tượng và chức năng của jQuery, rất nhiều hoops phải được nhảy để có được phần chính của sự kiện. Tôi đã thiết lập jsFiddle này để thể hiện công việc.

1. Thiết lập Điểm dừng Trình nghe sự kiện

Bạn đã gần gũi về điều này.

1. Mở Chrome Dev Tools (F12) và chuyển đến tab Nguồn.
2. Xem chi tiết về Chuột -> Nhấp (nhấp để thu phóng)
   
   

2. Nhấp vào nút!

Chrome Dev Tools sẽ tạm dừng thực thi tập lệnh và cung cấp cho bạn phần vướng víu tuyệt đẹp này của mã được rút gọn:

(bấm vào để phóng to)

3. Tìm mã vinh quang!

Bây giờ, mẹo ở đây là không được mang đi bấm phím và để mắt đến màn hình.

1. Bấm F11phím (Bước vào) cho đến khi mã nguồn mong muốn xuất hiện
2. Mã nguồn cuối cùng đã đạt
   • Trong mẫu jsFiddle được cung cấp ở trên, tôi đã phải nhấn F11 108 lần trước khi đến chức năng / trình xử lý sự kiện mong muốn
   • Số dặm của bạn có thể thay đổi, tùy thuộc vào phiên bản jQuery (hoặc thư viện khung) được sử dụng để liên kết các sự kiện
   • Với đủ sự cống hiến và thời gian, bạn có thể tìm thấy bất kỳ trình xử lý sự kiện / chức năng nào

4. Giải thích

Tôi không có câu trả lời chính xác, hoặc giải thích về lý do tại sao jQuery trải qua nhiều lớp trừu tượng mà nó làm - tất cả những gì tôi có thể đề xuất là đó là do công việc mà nó làm để trừu tượng hóa việc sử dụng nó khỏi trình duyệt thực thi mã .

Đây là một jsFiddle với phiên bản gỡ lỗi của jQuery (nghĩa là không được rút gọn). Khi bạn nhìn vào mã trên điểm dừng đầu tiên (không được rút gọn), bạn có thể thấy rằng mã đang xử lý nhiều thứ:

    // ...snip...

    if ( !(eventHandle = elemData.handle) ) {
        eventHandle = elemData.handle = function( e ) {
            // Discard the second event of a jQuery.event.trigger() and
            // when an event is called after a page has unloaded
            return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
                jQuery.event.dispatch.apply( elem, arguments ) : undefined;
        };
    }

    // ...snip...

Lý do tôi nghĩ rằng bạn đã bỏ lỡ nó trong nỗ lực của mình khi " thực thi tạm dừng và tôi nhảy từng dòng ", là vì bạn có thể đã sử dụng chức năng "Bước qua", thay vì Bước vào. Dưới đây là câu trả lời StackOverflow giải thích sự khác biệt.

Cuối cùng, lý do tại sao chức năng của bạn không bị ràng buộc trực tiếp với trình xử lý sự kiện nhấp là vì jQuery trả về một hàm bị ràng buộc. Lần lượt chức năng của jQuery đi qua một số lớp trừu tượng và kiểm tra, và ở đâu đó trong đó, nó thực thi chức năng của bạn.

Giải pháp 1: Hộp đen khung

Hoạt động tuyệt vời, thiết lập tối thiểu và không có bên thứ ba.

Theo tài liệu của Chrome :

Điều gì xảy ra khi bạn hộp đen một kịch bản?

Các ngoại lệ được ném từ mã thư viện sẽ không tạm dừng (nếu Tạm dừng các ngoại lệ được bật), Bước vào / ra / bỏ qua mã thư viện, các điểm dừng của trình nghe sự kiện không ngắt trong mã thư viện, Trình gỡ lỗi sẽ không tạm dừng trên bất kỳ điểm dừng nào được đặt trong thư viện mã. Kết quả cuối cùng là bạn đang gỡ lỗi mã ứng dụng của mình thay vì tài nguyên của bên thứ ba.

1. Mở công cụ dành cho nhà phát triển Chrome ( F12hoặc ⌘+ ⌥+ i), đi đến cài đặt (phía trên bên phải hoặc F1). Tìm một tab bên trái gọi là " Blackboxing "

2. Đây là nơi bạn đặt mẫu RegEx của các tệp bạn muốn Chrome bỏ qua trong khi gỡ lỗi. Ví dụ: jquery\..*\.js(mẫu toàn cầu / bản dịch của con ngườijquery.*.js :)
3. Nếu bạn muốn bỏ qua các tệp có nhiều mẫu, bạn có thể thêm chúng bằng ký tự ống |, như vậy: jquery\..*\.js|include\.postload\.js(hoạt động như một "hoặc mẫu này", có thể nói. Hoặc tiếp tục thêm chúng bằng nút "Thêm".
4. Bây giờ tiếp tục Giải pháp 3 được mô tả dưới đây.

Tiền thưởng tip! Tôi sử dụng Regex101 thường xuyên (nhưng có nhiều thứ khác :) để nhanh chóng kiểm tra các mẫu regex rỉ sét của tôi và tìm ra lỗi của tôi với trình gỡ lỗi regex từng bước. Nếu bạn chưa "thông thạo" trong Biểu thức chính quy, tôi khuyên bạn nên bắt đầu sử dụng các trang web giúp bạn viết và hình dung chúng như http://buildregex.com/ và https://www.debuggex.com/

Bạn cũng có thể sử dụng menu ngữ cảnh khi làm việc trong bảng Nguồn. Khi xem tệp, bạn có thể nhấp chuột phải vào trình chỉnh sửa và chọn Blackbox Script. Điều này sẽ thêm tệp vào danh sách trong bảng Cài đặt:

Giải pháp 2: Sự kiện trực quan

Đây là một công cụ tuyệt vời để có :

Visual Event là một bookmarklet Javascript mã nguồn mở cung cấp thông tin gỡ lỗi về các sự kiện đã được gắn vào các phần tử DOM. Sự kiện trực quan cho thấy:

• Những yếu tố có sự kiện gắn liền với chúng
• Loại sự kiện gắn liền với một yếu tố
• Mã sẽ được chạy với sự kiện được kích hoạt
• Tệp nguồn và số dòng cho chức năng đính kèm được xác định (chỉ trình duyệt Webkit và Opera)

Giải pháp 3: Gỡ lỗi

Bạn có thể tạm dừng mã khi bạn nhấp vào một nơi nào đó trong trang hoặc khi DOM được sửa đổi ... và các loại điểm dừng JS khác sẽ hữu ích để biết. Bạn nên áp dụng hộp đen ở đây để tránh cơn ác mộng.

Trong trường hợp này, tôi muốn biết chính xác những gì diễn ra khi tôi nhấp vào nút.

1. Mở Dev Tools -> tab Nguồn và ở bên phải tìm Event Listener Breakpoints:

   

2. Mở rộng Mousevà chọnclick

3. Bây giờ hãy nhấp vào phần tử (thực thi sẽ tạm dừng) và bây giờ bạn đang gỡ lỗi mã. Bạn có thể đi qua tất cả các cách nhấn mã F11(đó là Bước vào ). Hoặc quay trở lại một vài bước nhảy trong ngăn xếp. Có thể có một tấn nhảy

Giải pháp 4: Từ khóa câu cá

Khi Dev Tools được kích hoạt, bạn có thể tìm kiếm toàn bộ cơ sở mã (tất cả mã trong tất cả các tệp) bằng ⌘+ ⌥+ Fhoặc:

và tìm kiếm #enviohoặc bất cứ thứ gì thẻ / lớp / id bạn nghĩ bắt đầu bữa tiệc và bạn có thể đến một nơi nào đó nhanh hơn dự đoán.

Hãy lưu ý đôi khi không chỉ có một imgmà rất nhiều phần tử được xếp chồng lên nhau và bạn có thể không biết cái nào kích hoạt mã.

Nếu đây là một chút kiến ​​thức của bạn, hãy xem hướng dẫn về cách gỡ lỗi của Chrome .

Âm thanh như phần "... và tôi nhảy từng dòng ..." là sai. Bạn có StepOver hoặc StepIn và bạn có chắc chắn mình không vô tình bỏ lỡ cuộc gọi liên quan không?

Điều đó nói rằng, các khung gỡ lỗi có thể tẻ nhạt vì chính xác lý do này. Để giảm bớt sự cố, bạn có thể bật thử nghiệm "Bật hỗ trợ gỡ lỗi khung" . Chúc mừng gỡ lỗi! :)

Bạn có thể sử dụng findHandlersJS

Bạn có thể tìm trình xử lý bằng cách thực hiện trong bảng điều khiển chrome:

findEventHandlers("click", "img.envio")

Bạn sẽ nhận được thông tin sau được in trong bảng điều khiển của chrome:

• phần tử
  Phần tử thực tế nơi trình xử lý sự kiện đã được đăng ký
• sự kiện
  Mảng với thông tin về các trình xử lý sự kiện jquery cho loại sự kiện mà chúng ta quan tâm (ví dụ: nhấp, thay đổi, v.v.)
• handler
  Phương thức xử lý sự kiện thực tế mà bạn có thể thấy bằng cách nhấp chuột phải vào nó và chọn Hiển thị định nghĩa hàm
• bộ chọn
  Bộ chọn được cung cấp cho các sự kiện được ủy quyền. Nó sẽ trống cho các sự kiện trực tiếp.
• mục tiêu
  Danh sách với các yếu tố mà trình xử lý sự kiện này nhắm mục tiêu. Ví dụ: đối với trình xử lý sự kiện được ủy nhiệm được đăng ký trong đối tượng tài liệu và nhắm mục tiêu tất cả các nút trong một trang, thuộc tính này sẽ liệt kê tất cả các nút trong trang. Bạn có thể di chuột và xem chúng được tô sáng bằng chrome.

Thêm thông tin ở đây và bạn có thể thử nó trong trang web ví dụ này ở đây .

Giải pháp này cần phương thức dữ liệu của jQuery .

1. Mở bảng điều khiển của Chrome (mặc dù mọi trình duyệt đã tải jQuery sẽ hoạt động)
2. Chạy $._data($(".example").get(0), "events")
3. Khoan sâu đầu ra để tìm trình xử lý sự kiện mong muốn.
4. Nhấp chuột phải vào "handler" và chọn "Hiển thị định nghĩa hàm"
5. Mã sẽ được hiển thị trong tab Nguồn

$._data()chỉ truy cập phương thức dữ liệu của jQuery. Một sự thay thế dễ đọc hơn có thể được jQuery._data().

Điểm thú vị của câu trả lời SO này :

Kể từ jQuery 1.8, dữ liệu sự kiện không còn có sẵn từ "API công khai" cho dữ liệu. Đọc bài viết trên blog jQuery này . Bây giờ bạn nên sử dụng cái này thay thế:

jQuery._data( elem, "events" ); elem phải là Phần tử HTML, không phải là đối tượng jQuery hoặc bộ chọn.

Xin lưu ý rằng đây là cấu trúc nội bộ, 'riêng tư' và không nên sửa đổi. Chỉ sử dụng cho mục đích gỡ lỗi.

Trong các phiên bản cũ hơn của jQuery, bạn có thể phải sử dụng phương thức cũ đó là:

jQuery( elem ).data( "events" );

Một phiên bản jQuery bất khả tri sẽ là: (jQuery._data || jQuery.data)(elem, 'events');