Event Listeners จะสรุปทุกองค์ประกอบที่มี event listener ซึ่งมีสีตามประเภท เช่น การคลิก โฮเวอร์ เลื่อน การสัมผัส แป้นพิมพ์ และแบบฟอร์ม แสดงให้เห็นว่าตัวจัดการแต่ละตัวมาจากไหน และจะกะพริบองค์ประกอบต่างๆ เมื่อ DOM เปลี่ยนแปลง
ค้นหาว่าเหตุใดบางสิ่งจึงตอบสนอง — หรือไม่ — มักจะเริ่มต้นด้วยคำถามที่หน้าเว็บจะไม่ตอบ: มีตัวจัดการการคลิกในองค์ประกอบนี้เลยหรือไม่? องค์ประกอบใดเป็นเจ้าของพฤติกรรมการโฮเวอร์จริงๆ อะไรฟังเลื่อนแล้วทำให้เพจตะกุกตะกัก? Browser DevTools สามารถแสดงรายการ listeners ขององค์ประกอบได้ทีละรายการ หากคุณทราบแล้วว่าควรเลือกองค์ประกอบใด
เครื่องมือนี้ตอบคำถามทั้งหน้าพร้อมกัน ทุกองค์ประกอบที่มี listener จะได้รับเค้าร่างในสีตามประเภท — คลิก โฮเวอร์ เลื่อน แตะแล้วลาก แป้นพิมพ์ หรือรูปแบบและโฟกัส — และการโฮเวอร์องค์ประกอบหนึ่งจะแสดงเหตุการณ์ที่แน่นอนและที่มาของแต่ละรายการ: คุณลักษณะแบบอินไลน์, on-property, ตัวจัดการ React หรือ Vue, jQuery หรือ addEventListener ไทล์หมวดหมู่จะเปิดและปิดแต่ละประเภท และรายการใต้ชื่อทุกองค์ประกอบ ดังนั้นเพียงคลิกเดียวก็จะเลื่อนคุณไปยังรายการนั้น
มีการจัดการกรอบงานอย่างเหมาะสม React แนบ listeners เข้ากับรูทและส่งเหตุการณ์ภายใน ซึ่งจะทำให้แอปทั้งหมดดูสามารถคลิกได้ เครื่องมือจะแยกการลงทะเบียนรูทเหล่านั้นออกไปและแสดงตัวจัดการ React บนองค์ประกอบที่ประกาศ การสแกนอย่างรวดเร็วไม่จำเป็นต้องโหลดซ้ำ และครอบคลุมตัวจัดการแบบอินไลน์, React, Vue และ jQuery Listeners ที่เพิ่มด้วย addEventListener ธรรมดาก่อนที่เครื่องมือจะเปิดขึ้นจะมองเห็นได้ตั้งแต่เริ่มโหลดเพจเท่านั้น ดังนั้น Reload & record จะโหลดเพจซ้ำหนึ่งครั้งโดยเปิดการบันทึก จากนั้นเครื่องมือจะเปิดขึ้นใหม่ด้วยตัวเองพร้อมกับ listener ทุกตัวที่รวมอยู่ด้วย ระดับเพจบน window และ document ด้วย
แท็บที่สองเฝ้าดู DOM เอง ทุกโหนดที่เพิ่มหรือลบออก การเปลี่ยนแปลงแอตทริบิวต์ และการเปลี่ยนแปลงข้อความจะกะพริบบนเพจ ตัวนับแสดงการกลายพันธุ์ต่อวินาที และรายการจัดอันดับองค์ประกอบที่เปลี่ยนแปลงมากที่สุด โดยที่แอตทริบิวต์ที่เกี่ยวข้อง การสตรีมอย่างต่อเนื่องในขณะที่ไม่มีใครแตะต้องหน้านั้นมักจะหมายถึงตัวจับเวลา แอนิเมชั่นที่ขับเคลื่อนด้วย JavaScript หรือเฟรมเวิร์กที่เรนเดอร์ใหม่มากกว่าที่ควรจะเป็น ซึ่งล้วนเป็นสิ่งที่ทำให้แบตเตอรี่หมดและทำให้หน้ากระตุก
องค์ประกอบที่มีการคลิก โฮเวอร์ เลื่อน สัมผัส แป้นพิมพ์ และ listeners แบบฟอร์มจะมีเค้าร่างเป็นสีของตัวเอง โดยมีแถบรายการเพื่อแสดงหรือซ่อนแต่ละประเภท
คุณลักษณะแบบอินไลน์, คุณสมบัติ, ตัวจัดการ React และ Vue, เหตุการณ์ jQuery และการเรียก addEventListener ซึ่งมีป้ายกำกับในทุกองค์ประกอบ
listeners ระดับรูทของ React จะถูกแยกออกไป และตัวจัดการของมันจะแสดงบนองค์ประกอบที่ประกาศสิ่งเหล่านั้น แทนที่จะแสดงบนแอปทั้งหมด
Reload & record จะจับทุกการเรียก addEventListener ตั้งแต่เริ่มต้นการโหลดหน้าเว็บ รวมถึง window และ document listeners สำหรับการโหลดครั้งเดียวเท่านั้น
โหนดที่เพิ่มและลบ การเปลี่ยนแปลงแอตทริบิวต์ และการเปลี่ยนแปลงข้อความจะกะพริบบนหน้า พร้อมด้วยตัวนับการกลายพันธุ์ต่อวินาที
รายการองค์ประกอบที่ได้รับการจัดอันดับซึ่งเปลี่ยนแปลงมากที่สุดโดยคำนึงถึงแอตทริบิวต์ ชี้ไปที่การเรนเดอร์ซ้ำแบบไม่ต่อเนื่อง
ดูได้อย่างรวดเร็วว่าปุ่มมี listener จริงหรือไม่ หรือตัวจัดการอยู่บนองค์ประกอบ Wrapper แทนหรือไม่
ค้นหาทุกองค์ประกอบที่ฟังการเลื่อน วงล้อ หรือ touchmove รวมถึง listeners บน window และ document
ตรวจสอบว่าตัวควบคุมใดตอบสนองต่อเหตุการณ์ของแป้นพิมพ์ และตัวควบคุมใดตอบสนองต่อเมาส์เท่านั้น
ดูตัวนับการกลายพันธุ์ในขณะที่เพจไม่ได้ใช้งาน องค์ประกอบที่เปลี่ยนแปลงตลอดเวลาจะชี้ไปที่ตัวจับเวลาหรือเฟรมเวิร์กที่ทำงานพิเศษ
เลื่อนเมาส์ไปรอบๆ ไซต์ที่ไม่คุ้นเคยเพื่อดูว่าส่วนใดที่มีการโต้ตอบและเฟรมเวิร์กใดที่เชื่อมโยงส่วนเหล่านั้นไว้
คลิกไอคอน Event Listeners ใน DevSuite Pro dock การสแกนอย่างรวดเร็วจะทำงานทันทีและสรุปองค์ประกอบทั้งหมดที่พบ
วางเมาส์เหนือองค์ประกอบที่มีโครงร่างเพื่อดูกิจกรรมและแหล่งที่มา ใช้ไทล์หมวดหมู่เพื่อแสดงเฉพาะ listeners แบบคลิก โฮเวอร์ หรือเลื่อน
กด Reload & record เพื่อโหลดหน้าซ้ำหนึ่งครั้งโดยเปิดการบันทึก เครื่องมือจะเปิดขึ้นใหม่อีกครั้ง และตอนนี้รวมทุกการเรียก addEventListener
คลิกแถวในรายการเพื่อเลื่อนหน้าไปยังองค์ประกอบนั้นและกะพริบ Copy report จะแสดงรายการทั้งหมดเป็นข้อความ
เปิดแท็บ DOM mutations และใช้เพจ องค์ประกอบที่เปลี่ยนไปจะกะพริบ และองค์ประกอบที่ยุ่งที่สุดจะขึ้นไปอยู่ด้านบนสุดของรายการ
ติดตั้ง DevSuite Pro ฟรีและปลดล็อกเครื่องมือสำหรับนักพัฒนามากกว่า 74 รายการสำหรับเบราว์เซอร์ของคุณ
