ฉันใช้ Chrome และเว็บไซต์ของตัวเอง

สิ่งที่ฉันรู้จากภายใน:

1 ) ฉันมีแบบฟอร์มที่มีคนลงชื่อสมัครใช้โดยคลิกที่ปุ่มรูปภาพส้ม:

2 ) ฉันตรวจสอบและนี่คือทั้งหมด: <img class="formSend" src="images/botoninscribirse2.png">

3 ) ที่ด้านบนของซอร์สโค้ดมีซอร์สสคริปต์มากมาย ฉันรู้ว่าปุ่มใดปุ่มหนึ่งเรียกใช้เพราะฉันเขียนมัน:<script src="js/jquery2.js" type="text/javascript"></script>

4 ) ภายในไฟล์นั้นคุณสามารถค้นหา: $(".formSend").click(function() { ... });ซึ่งเป็นสิ่งที่ถูกกระตุ้นโดยปุ่ม (เพื่อทำการตรวจสอบความถูกต้องของแบบฟอร์มที่ค่อนข้างซับซ้อนและส่ง) และสิ่งที่ฉันต้องการคือการพบว่าใช้เครื่องมือ dev Chrome บนเว็บไซต์ใด ๆ

ฉันจะทราบได้อย่างไรว่าองค์ประกอบนั้นเรียกที่ใด

แท็บฟังไม่ทำงานสำหรับฉัน ดังนั้นฉันจึงลองดูตัวเลือกเหตุการณ์การคลิกซึ่งดูเหมือนจะปลอดภัยสำหรับฉัน แต่ ... ไม่มีjquery2.jsในนั้น (และฉันไม่รู้จริงๆเลยว่าไฟล์ใดที่เป็นรหัสดังนั้นฉันจะเสียเวลาตรวจสอบสิ่งเหล่านี้ทั้งหมด .. .)

$(".formSend").click(function() { ... });ฟังก์ชั่นของฉันในjquery2.jsไฟล์ไม่ได้อยู่ที่นั่น

Jesseอธิบายว่าทำไม :

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

ที่แนะนำโดยบางส่วนของคุณผมได้รวบรวมวิธีการที่ทำงานในคำตอบหนึ่งลงมาด้านล่าง

คำตอบของ Alexander Pavlovนั้นใกล้เคียงกับสิ่งที่คุณต้องการมากที่สุด

เนื่องจากความครอบคลุมของ jQuery ที่เป็นนามธรรมและฟังก์ชั่นการใช้งานจึงต้องมีการกระโดดขึ้นมาเป็นจำนวนมากเพื่อให้ได้เนื้อสัมผัสของงาน ฉันได้ตั้งค่าjsFiddleนี้เพื่อแสดงให้เห็นถึงการทำงาน

1. การตั้งค่าจุดพักการฟังเหตุการณ์

คุณสนิทกับอันนี้

1. เปิดเครื่องมือ Chrome Dev (F12) และไปที่แท็บแหล่งที่มา
2. เจาะลึกเมาส์ -> คลิก(คลิกเพื่อซูม)
   
   

2. คลิกที่ปุ่ม!

Chrome Dev Tools จะหยุดการทำงานของสคริปต์ชั่วคราวและนำเสนอสิ่งที่สวยงามของรหัสย่อ:

(คลิกเพื่อซูม)

3. ค้นหารหัสอันรุ่งโรจน์!

ทีนี้เคล็ดลับที่นี่ก็คืออย่ากดปุ่มค้างไว้และจับตาดูหน้าจอ

1. กดF11ปุ่ม (ขั้นตอนใน) จนกระทั่งซอร์สโค้ดที่ต้องการปรากฏขึ้น
2. ในที่สุดรหัสที่มาก็มาถึง
   • ในตัวอย่างjsFiddle ที่ให้ไว้ด้านบนฉันต้องกดF11 108 ครั้งก่อนถึงตัวจัดการเหตุการณ์ / ฟังก์ชันที่ต้องการ
   • ระยะทางของคุณอาจแตกต่างกันไปขึ้นอยู่กับรุ่นของ jQuery (หรือไลบรารีเฟรมเวิร์ก) ที่ใช้ผูกเหตุการณ์
   • ด้วยความทุ่มเทและเวลาที่เพียงพอคุณสามารถค้นหาตัวจัดการเหตุการณ์ / ฟังก์ชันใด ๆ

4. คำอธิบาย

ฉันไม่มีคำตอบที่ถูกต้องหรือคำอธิบายว่าทำไม jQuery ถึงบทคัดย่อหลายเลเยอร์ที่มันทำ - ทั้งหมดที่ฉันสามารถแนะนำได้ก็คือว่ามันเป็นเพราะงานที่ทำเพื่อแยกการใช้งานออกจากเบราว์เซอร์ที่รันโค้ด .

นี่คือjsFiddle ที่มีjugeryเวอร์ชัน debug (กล่าวคือไม่ย่อเล็กสุด) เมื่อคุณดูรหัสบนเบรกพอยต์แรก (ไม่ย่อเล็กสุด) คุณจะเห็นว่ารหัสกำลังจัดการหลายสิ่ง:

    // ...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...

เหตุผลที่ฉันคิดว่าคุณพลาดในความพยายามของคุณเมื่อ " การหยุดการทำงานชั่วคราวและฉันกระโดดทีละบรรทัด " เป็นเพราะคุณอาจใช้ฟังก์ชั่น "การก้าวข้าม" แทนการก้าวเข้ามา นี่คือคำตอบ StackOverflowอธิบายความแตกต่าง

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

โซลูชันที่ 1: กรอบ blackboxing

ใช้งานได้ดีการตั้งค่าน้อยที่สุดและไม่มีบุคคลที่สาม

ตามเอกสารของ Chrome :

จะเกิดอะไรขึ้นเมื่อคุณ blackbox สคริปต์

ข้อยกเว้นที่ส่งออกมาจากรหัสห้องสมุดจะไม่หยุดชั่วคราว (หากเปิดใช้งานการยกเว้นในข้อยกเว้น) การก้าวเข้า / ออก / ผ่านข้ามรหัสห้องสมุดจุดพักการฟังเหตุการณ์จะไม่หยุดลงในรหัสห้องสมุดเครื่องดีบักจะไม่หยุดพักจุดพักใด ๆ รหัส. ผลลัพธ์สุดท้ายคือคุณกำลังดีบักรหัสแอปพลิเคชันของคุณแทนที่จะเป็นทรัพยากรบุคคลที่สาม

1. เปิดเครื่องมือนักพัฒนาซอฟต์แวร์ Chrome ( F12หรือ⌘+ ⌥+ i) ไปที่การตั้งค่า (มุมขวาบนหรือF1) ค้นหาแท็บทางด้านซ้ายที่เรียกว่า " Blackboxing "

2. นี่คือที่ที่คุณวางรูปแบบRegExของไฟล์ที่คุณต้องการให้ Chrome ละเว้นเมื่อทำการดีบัก ตัวอย่างเช่น: jquery\..*\.js(glob รูปแบบ / มนุษย์แปลjquery.*.js)
3. หากคุณต้องการข้ามไฟล์ที่มีหลายรูปแบบคุณสามารถเพิ่มไฟล์โดยใช้ไพพ์|, เช่น: jquery\..*\.js|include\.postload\.js(ซึ่งทำหน้าที่เหมือน "หรือรูปแบบนี้" เพื่อพูดหรือเพิ่มไฟล์ต่อไปด้วยปุ่ม "เพิ่ม"
4. ตอนนี้ไปที่โซลูชัน 3 ที่อธิบายไว้ด้านล่าง

เคล็ดลับโบนัส! ฉันใช้Regex101เป็นประจำ (แต่มีอื่น ๆ อีกมากมาย:)เพื่อทดสอบรูปแบบ regex ที่เป็นสนิมของฉันอย่างรวดเร็วและค้นหาตำแหน่งที่ฉันผิดด้วยดีบักเกอร์ regex ทีละขั้นตอน หากคุณยังไม่ "คล่องแคล่ว" ในนิพจน์ปกติฉันขอแนะนำให้คุณเริ่มใช้เว็บไซต์ที่ช่วยให้คุณเขียนและแสดงภาพได้เช่นhttp://buildregex.com/และhttps://www.debuggex.com/

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

โซลูชันที่ 2: เหตุการณ์ที่มองเห็น

มันเป็นเครื่องมือที่ยอดเยี่ยมที่จะมี :

Visual Event เป็น Javascriptletlet โอเพนซอร์สซึ่งให้ข้อมูลการดีบักเกี่ยวกับเหตุการณ์ที่แนบกับองค์ประกอบ DOM กิจกรรมภาพแสดง:

• องค์ประกอบใดมีกิจกรรมที่แนบกับพวกเขา
• ประเภทของเหตุการณ์ที่แนบกับองค์ประกอบ
• รหัสที่จะเรียกใช้เมื่อมีการเรียกใช้เหตุการณ์
• ไฟล์ต้นฉบับและหมายเลขบรรทัดที่กำหนดฟังก์ชั่นที่แนบมา (เบราว์เซอร์ Webkit และ Opera เท่านั้น)

โซลูชันที่ 3: การดีบัก

คุณสามารถหยุดรหัสชั่วคราวเมื่อคุณคลิกที่ใดที่หนึ่งในหน้าเว็บหรือเมื่อมีการแก้ไข DOM ... และเบรกพอยต์ JS ชนิดอื่น ๆที่จะเป็นประโยชน์ในการรู้ คุณควรใช้blackboxingที่นี่เพื่อหลีกเลี่ยงฝันร้าย

ในตัวอย่างนี้ฉันต้องการทราบว่าเกิดอะไรขึ้นเมื่อฉันคลิกปุ่ม

1. เปิดเครื่องมือ Dev -> แท็บแหล่งที่มาและค้นหาขวาEvent Listener Breakpoints:

   

2. ขยายMouseและเลือกclick

3. ตอนนี้คลิกที่องค์ประกอบ (การดำเนินการควรหยุดชั่วคราว) และตอนนี้คุณกำลังดีบักรหัส คุณสามารถกดรหัสทั้งหมดF11(ซึ่งเป็นขั้นตอน ) หรือย้อนกลับไปสองสามครั้งในกองซ้อน อาจมีการกระโดดได้หลายตัน

โซลูชันที่ 4: คำหลักตกปลา

เมื่อเปิดใช้งานเครื่องมือ Dev คุณสามารถค้นหา codebase ทั้งหมด (รหัสทั้งหมดในไฟล์ทั้งหมด) ด้วย⌘+ ⌥+ Fหรือ:

และค้นหา#envioหรืออะไรก็ตามที่แท็ก / คลาส / รหัสที่คุณคิดว่าจะเริ่มปาร์ตี้และคุณอาจไปได้เร็วกว่าที่คาด

ระวังบางครั้งไม่เพียงimgแต่มีองค์ประกอบจำนวนมากซ้อนกันและคุณอาจไม่ทราบว่าองค์ประกอบใดเป็นตัวกระตุ้นรหัส

หากเป็นบิตออกจากความรู้ของคุณจะดูที่การกวดวิชาของ Chrome ในการแก้จุดบกพร่อง

เสียงเหมือนส่วน"... และฉันข้ามทีละบรรทัด ... "ผิด คุณเป็น StepOver หรือ StepIn และคุณแน่ใจหรือไม่ว่าคุณไม่ได้พลาดสายที่เกี่ยวข้อง

ที่กล่าวว่าการแก้จุดบกพร่องกรอบสามารถน่าเบื่อด้วยเหตุผลนี้ เพื่อบรรเทาปัญหาคุณสามารถเปิดใช้งาน "เปิดใช้กรอบการแก้จุดบกพร่องการสนับสนุน" การทดลอง การแก้ไขข้อบกพร่องมีความสุข! :)

คุณสามารถใช้findHandlersJS

คุณสามารถหาตัวจัดการได้โดยทำในคอนโซลโครเมี่ยม:

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

คุณจะได้รับข้อมูลต่อไปนี้พิมพ์ในคอนโซลของ chrome:

• องค์ประกอบองค์ประกอบ
  จริงที่จัดการเหตุการณ์ที่ลงทะเบียน
• เหตุการณ์
  อาร์เรย์ที่มีข้อมูลเกี่ยวกับการจัดการเหตุการณ์ jQuery สำหรับประเภทกรณีที่เรามีความสนใจใน (เช่นคลิกเปลี่ยนแปลง ฯลฯ )
• ตัวจัดการ
  เหตุการณ์จริงวิธีจัดการที่คุณสามารถดูได้โดยคลิกขวาและเลือกแสดงความหมายฟังก์ชั่น
• selector ตัว
  เลือกที่มีให้สำหรับเหตุการณ์ที่มอบหมาย มันจะว่างเปล่าสำหรับเหตุการณ์โดยตรง
• 
  รายการเป้าหมายที่มีองค์ประกอบที่ตัวจัดการเหตุการณ์เป้าหมาย ตัวอย่างเช่นสำหรับตัวจัดการเหตุการณ์ที่มอบหมายที่ลงทะเบียนในวัตถุเอกสารและกำหนดเป้าหมายปุ่มทั้งหมดในหน้าคุณสมบัตินี้จะแสดงรายการปุ่มทั้งหมดในหน้า คุณสามารถโฮเวอร์พวกเขาและเห็นพวกเขาเน้นในโครเมี่ยม

ข้อมูลเพิ่มเติมที่นี่และคุณสามารถลองในเว็บไซต์ตัวอย่างนี้ที่นี่

การแก้ปัญหานี้ต้องใช้วิธีการที่ข้อมูลของ jQuery

1. เปิดคอนโซลของ Chrome (แม้ว่าเบราว์เซอร์ใด ๆ ที่โหลด jQuery จะทำงาน)
2. วิ่ง $._data($(".example").get(0), "events")
3. เจาะลึกเอาต์พุตเพื่อค้นหาตัวจัดการเหตุการณ์ที่ต้องการ
4. คลิกขวาที่ "ตัวจัดการ" และเลือก "แสดงฟังก์ชั่นการกำหนด"
5. รหัสจะปรากฏในแท็บแหล่งที่มา

$._data()กำลังเข้าถึงวิธีการข้อมูลของ jQuery ทางเลือกที่อ่านง่ายขึ้นอาจเป็นjQuery._data()ไปได้

จุดที่น่าสนใจโดยคำตอบ SO นี้ :

ตั้งแต่ jQuery 1.8 ข้อมูลเหตุการณ์ไม่สามารถใช้งานได้จาก "public API" สำหรับข้อมูลอีกต่อไป อ่านโพสต์บล็อก jQueryนี้ ตอนนี้คุณควรใช้สิ่งนี้แทน:

jQuery._data( elem, "events" ); elem ควรเป็นองค์ประกอบ HTML ไม่ใช่วัตถุ jQuery หรือตัวเลือก

โปรดทราบว่านี่เป็นโครงสร้างภายใน 'ส่วนตัว' และไม่ควรแก้ไข ใช้สิ่งนี้เพื่อการดีบักเท่านั้น

ใน jQuery เวอร์ชันเก่าคุณอาจต้องใช้วิธีเก่าซึ่งก็คือ:

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

jQuery รุ่นที่ไม่เชื่อเรื่องพระเจ้าจะเป็น: (jQuery._data || jQuery.data)(elem, 'events');