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

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

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

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

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

ป.ล.: ตัวอย่างเป็นเรื่องสมมติ ดังนั้นผมไม่ได้กำลังมองหาวิธีแก้แบบ: "ใช้ XXXXXX แล้วค้นหาทั้งโปรเจกต์สำหรับ 'alert(\"bar\")'" ผมต้องการวิธีแก้ไขดีบัก/ติดตามจริง ๆ

คำตอบ #1

ใช้ Chrome 15.0.865.0 dev มีส่วน "Event Listeners" ในแผง Elements:

และ "Event Listeners Breakpoints" บนแผง Scripts ใช้เมาส์ -> คลิกที่ breakpoint แล้วเลือก "step into next function call" ในขณะที่คอยสังเกต call stack เพื่อดูว่าฟังก์ชัน userland ใดจัดการเหตุการณ์นี้ โดยอุดมคติ คุณควรแทนที่เวอร์ชัน jQuery ที่ถูกย่อด้วยเวอร์ชันที่ไม่ถูกย่อ เพื่อที่คุณไม่ต้อง step in ทุกครั้ง และใช้ step over เมื่อเป็นไปได้

คำตอบ #2

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

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

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

คำตอบ #3

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

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

คำตอบ #4

(ล่าสุด ณ ปี 2022) สำหรับเวอร์ชัน Chrome เวอร์ชัน 99:

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

2. เลือกแท็บรายการผู้ฟังเหตุการณ์

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