การใช้ Chrome วิธีค้นหาเหตุการณ์ที่ผูกพันกับองค์ประกอบ

สมมติว่าฉันมีลิงก์ในหน้าของฉัน:

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

ฉันไม่รู้อะไรเลย แต่เมื่อฉันคลิกที่ลิงค์alert("bar")จะมีการแสดง #fooดังนั้นผมจึงรู้ว่าบางที่รหัสบางอย่างกำลังจะถูกผูกไว้กับ

ฉันจะค้นหารหัสที่เชื่อมโยงalert("bar")กับเหตุการณ์คลิกได้อย่างไร ฉันกำลังมองหาวิธีแก้ปัญหาด้วย Chrome

ป.ล. : ตัวอย่างเป็นเรื่องสมมติดังนั้นฉันไม่ได้มองหาวิธีแก้ปัญหาเช่น: "ใช้ XXXXXX และค้นหาโครงการทั้งหมดสำหรับ" alert (\ "bar \") "ฉันต้องการโซลูชันการแก้จุดบกพร่อง / การติดตามจริง

ใช้Chrome 15.0.865.0 dev มีส่วน "ผู้ฟังเหตุการณ์" ในแผงองค์ประกอบ:

และ "จุดพักเหตุการณ์ผู้ฟัง" บนแผงสคริปต์ ใช้เมาส์ -> คลิกเบรกพอยต์จากนั้น "ก้าวเข้าสู่การเรียกฟังก์ชั่นถัดไป" ในขณะที่คอยดูสแต็คการโทรเพื่อดูว่าฟังก์ชั่นของ userland จัดการกับเหตุการณ์อย่างไร เป็นการดีที่คุณจะแทนที่รุ่นย่อของ jQuery ด้วยรุ่นที่ไม่ จำกัด เพื่อให้คุณไม่ต้องทำขั้นตอนตลอดเวลาและใช้ขั้นตอนที่เป็นไปได้

คุณสามารถใช้ผู้ตรวจสอบของ Chrome เพื่อค้นหากิจกรรมที่แนบมาด้วยวิธีอื่นดังนี้:

1. คลิกขวาที่องค์ประกอบเพื่อตรวจสอบหรือค้นหาในบานหน้าต่าง 'องค์ประกอบ'
2. จากนั้นในแท็บ / บานหน้าต่าง 'Event Listeners' ให้ขยายกิจกรรม (เช่น 'คลิก')
3. ขยายโหนดย่อยต่าง ๆ เพื่อค้นหาสิ่งที่คุณต้องการจากนั้นค้นหาตำแหน่งของโหนดย่อย 'ตัวจัดการ'
4. คลิกขวาที่คำว่า 'ฟังก์ชั่น' แล้วคลิก 'แสดงคำจำกัดความของฟังก์ชัน'

สิ่งนี้จะนำคุณไปยังตำแหน่งที่กำหนดตัวจัดการดังแสดงในรูปภาพต่อไปนี้และอธิบายโดย Paul Irish ที่นี่: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA

ลองใช้ส่วนขยาย jQuery Audit ( https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg ) หลังจากติดตั้งทำตามขั้นตอนเหล่านี้:

1. ตรวจสอบองค์ประกอบ
2. บนแท็บ' jQuery Audit ' ใหม่ให้ขยายคุณสมบัติเหตุการณ์
3. เลือกกิจกรรมที่คุณต้องการ
4. จากคุณสมบัติตัวจัดการคลิกขวาที่ฟังก์ชันแล้วเลือก ' แสดงนิยามฟังก์ชัน '
5. ตอนนี้คุณจะเห็นรหัสผูกพันเหตุการณ์
6. คลิกที่ปุ่ม ' พิมพ์สวย ' เพื่อดูรหัสที่อ่านได้ง่ายขึ้น

(ล่าสุดจนถึงปี 2020) สำหรับเวอร์ชัน Chrome เวอร์ชัน 83.0.4103.61 :

1. เลือกองค์ประกอบที่คุณต้องการตรวจสอบ

2. เลือกแท็บ Event Listeners

3. ตรวจสอบให้แน่ใจว่าได้ตรวจสอบ Framework Listeners เพื่อแสดงไฟล์จาวาสคริปต์จริงแทนฟังก์ชั่น jquery

แก้ไข : แทนคำตอบของฉันเองอันนี้ยอดเยี่ยมมาก: วิธีการดีบัก JavaScript / jQuery การเชื่อมโยงเหตุการณ์กับ Firebug (หรือเครื่องมือที่คล้ายกัน)

เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Google Chromes มีฟังก์ชั่นการค้นหาอยู่ในส่วนของสคริปต์

หากคุณไม่คุ้นเคยกับเครื่องมือนี้: (ในกรณี)

• คลิกขวาที่ใดก็ได้บนหน้า (ใน Chrome)
• คลิก 'ตรวจสอบองค์ประกอบ'
• คลิกแท็บ 'สคริปต์'
• แถบค้นหาที่ด้านบนขวา

ทำการค้นหาด่วนสำหรับ #ID ควรนำคุณไปสู่ฟังก์ชันการผูกข้อมูลในที่สุด

เช่นการค้นหา#fooจะนำคุณไป

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

อัพเดต 2018 - อาจเป็นประโยชน์สำหรับผู้อ่านในอนาคต:

ฉันไม่แน่ใจว่าเมื่อใดที่สิ่งนี้ถูกนำมาใช้ครั้งแรกใน Chrome แต่วิธีอื่นที่สามารถทำได้ใน Chrome ตอนนี้ก็คือผ่านคำสั่งคอนโซล

ตัวอย่างเช่น: ( ในประเภทคอนโซลโครเมี่ยม )

getEventListeners($0)

ในขณะที่$ 0เป็นองค์ประกอบที่เลือกใน DOM

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

findEventHandlers เป็นปลั๊กอิน jquery รหัสดิบอยู่ที่นี่: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js

ขั้นตอน

1. วางรหัสดิบโดยตรงลงในคอนโซลของโครเมี่ยม (หมายเหตุ: ต้องโหลด jquery แล้ว)

2. ใช้การเรียกใช้ฟังก์ชันต่อไปนี้: findEventHandlers(eventType, selector);
   เพื่อค้นหาตัวจัดการ eventType ของอิลิเมนต์ที่ระบุของตัวเลือกที่สอดคล้องกัน

ตัวอย่าง :

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

จากนั้นถ้ามีตัวจัดการเหตุการณ์ที่พร้อมใช้งานจะแสดงเสียงร้องคุณต้องขยายเพื่อค้นหาตัวจัดการคลิกขวาที่ฟังก์ชันและเลือก show function definition

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

สำหรับ Chrome เวอร์ชัน 52.0.2743.116:

1. ในของ Chrome เครื่องมือสำหรับนักพัฒนาขึ้นมาแผง 'ค้นหา' โดยการกดปุ่มCtrl+ +ShiftF

2. พิมพ์ชื่อองค์ประกอบที่คุณต้องการค้นหา

ผลลัพธ์สำหรับองค์ประกอบที่ถูกผูกไว้ควรปรากฏในพาเนลและระบุไฟล์ที่พวกเขาอยู่