ตรวจสอบองค์ประกอบที่ปรากฏเฉพาะเมื่อมีการป้อน / ป้อนองค์ประกอบอื่นด้วยเมาส์

บ่อยครั้งที่ฉันต้องการตรวจสอบองค์ประกอบ (เช่นคำแนะนำเครื่องมือ) ที่ปรากฏขึ้นเมื่อมีการป้อน / ป้อนองค์ประกอบอื่นด้วยเมาส์เท่านั้น องค์ประกอบที่ปรากฏจะปรากฏให้เห็นผ่านเหตุการณ์ mouseenter ของ jQuery

ฉันไม่สามารถตรวจสอบคำแนะนำเครื่องมือได้เนื่องจากคำแนะนำเครื่องมือจะหายไปเมื่อเมาส์ของฉันออกจากองค์ประกอบที่มีอยู่

มีวิธีหยุดเหตุการณ์ JS ชั่วคราวเพื่อให้ฉันสามารถวางเมาส์บนองค์ประกอบจากนั้นหยุด JS ของเบราว์เซอร์ชั่วคราวและตรวจสอบได้สำเร็จหรือไม่

ยกตัวอย่างให้ลองตรวจสอบคำแนะนำทวิตเตอร์บูตของ: http://getbootstrap.com/javascript/#tooltips

มันค่อนข้างง่ายใน Chrome 38.0.2094.0

นี่คือสิ่งที่จะมีลักษณะดังนี้:

เป็นขั้นเป็นตอน:

1. เปิด DevTools ในแผง Sources
2. ทำให้คำแนะนำเครื่องมือปรากฏขึ้นโดยวางเมาส์เหนือปุ่ม
3. กด F8 เพื่อหยุดหน้า
4. สลับไปที่แผงองค์ประกอบและใช้ไอคอนแว่นขยายที่ด้านบนซ้ายเพื่อเลือกคำแนะนำเครื่องมือ

หากคำแนะนำเครื่องมือปรากฏขึ้นเนื่องจาก CSS สิ่งที่คุณสามารถทำได้ในกรณีนั้นมีดังนี้

เป็นขั้นเป็นตอน:

1. เปิด DevTools
2. เลือกองค์ประกอบทริกเกอร์ในเครื่องมือ dev (ลิงค์)
3. คลิกขวาและเลือก "สถานะองค์ประกอบบังคับ" และเลือก ": hover"
4. ตรวจสอบคำแนะนำเครื่องมือ CSS

ทั้ง Safari และ Chrome เว็บของสารวัตรเสนอช่องทำเครื่องหมายที่คุณสามารถสลับ:active, :focus, :hoverและ:visitedสถานะขององค์ประกอบ การใช้สิ่งเหล่านี้อาจง่ายยิ่งขึ้น

Safari:

โครเมียม:

นอกจากนี้ยังมีวิธีที่ยุ่งยากอีกวิธีหนึ่ง:

1. ไปที่องค์ประกอบที่ทำให้คำแนะนำเครื่องมือของคุณปรากฏขึ้น
2. คลิกขวาเพื่อเปิดเมนูตามบริบท
3. เลื่อนเมาส์ไปที่หน้าต่างเครื่องมือ dev แล้วคลิกซ้ายที่ใดก็ได้ในแผงเครื่องมือ dev

คำแนะนำเครื่องมือของคุณจะยังคงมองเห็นได้จากนั้นคุณจะสามารถตรวจสอบได้ในแท็บองค์ประกอบ

ทดสอบบน Chrome ดูเหมือนจะไม่ทำงานบน Firefox

ในขณะที่คำตอบของ @ SomeGuyนั้นยอดเยี่ยม (t-up สำหรับ gif แบบเคลื่อนไหว) เป็นทางเลือกที่คุณสามารถทำได้โดยใช้โปรแกรม เพียงเปิดคอนโซลและพิมพ์ชื่อเหตุการณ์

document.getElementById('id').dispatchEvent(new Event('event-type'));

(ด้วยไวยากรณ์เฉพาะจาวาสคริปต์ที่แท้จริงอาจแตกต่างกันไปตามเบราว์เซอร์)

ง่ายยิ่งขึ้นด้วย jQuery:

$('#id').trigger('event-type');

ในตัวอย่างของคุณ ( http://getbootstrap.com/javascript/#tooltips ) เปิดคอนโซลแล้วพิมพ์ตัวอย่างเช่น:

$("button:contains('Tooltip on right')").mouseenter();

และคำแนะนำเครื่องมือจะปรากฏใน DOM และสามารถตรวจสอบ / แก้ไขได้ด้วยตนเอง:

<div style="top: 14406.9px; left: 1048.25px; display: block;"
id="tooltip952596" class="tooltip fade right in" role="tooltip">
<div style="" class="tooltip-arrow"></div>
<div class="tooltip-inner">Tooltip on right</div></div>

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