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

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

ฉันไม่รู้ว่าเป็น ID คลาสหรืออะไร แต่ต้องการตรวจสอบ

วิธีแก้ปัญหาที่ฉันได้ลอง:

เรียกใช้ตัวเลือก jQuery ภายในคอนโซล$('*:contains("some text")')แต่ไม่มีโชคใด ๆ เป็นส่วนใหญ่เนื่องจากองค์ประกอบไม่ถูกซ่อน แต่อาจถูกลบออกจากต้นไม้ DOM

การตรวจสอบต้นไม้ DOM ด้วยตนเองสำหรับการเปลี่ยนแปลงทำให้ฉันไม่มีอะไรเลยดูเหมือนเร็วเกินไปที่จะสังเกตเห็นว่ามีการเปลี่ยนแปลงอะไร

ความสำเร็จ:

ฉันประสบความสำเร็จกับจุดพักเหตุการณ์ โดยเฉพาะ - mousedown ในกรณีของฉัน เพิ่งไปที่Sources-> Event Listener Breakpoints-> Mouse-> mousedownใน Chrome หลังจากนั้นฉันคลิกองค์ประกอบที่ฉันต้องการตรวจสอบภายในScope Variablesฉันเห็นทิศทางที่เป็นประโยชน์

(คำตอบนี้ใช้ได้กับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome เท่านั้นดูอัปเดตด้านล่าง)

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

อัปเดต 22 ต.ค. 2019:ด้วยการเปิดตัว v. 70 ดูเหมือนว่าในที่สุด FireFox จะรองรับการแก้ไขข้อบกพร่องประเภทนี้2 3 :

วิธีอื่นใน Chrome:

• เปิด devTools (F12)
• เลือกแท็บ "แหล่งที่มา"
• ในขณะที่องค์ประกอบที่คุณต้องการแสดงขึ้นให้กด F8 (หรือ Ctrl + /) การดำเนินการนี้จะหยุดการทำงานของสคริปต์และ "หยุด" DOM ​​ตรงตามที่แสดง
• จากจุดนี้ใช้ Ctrl + Shift + C เพื่อเลือกองค์ประกอบ

1. เปิดคอนโซล
2. พิมพ์ใน setTimeout(()=>{debugger;},5000);
3. กดปุ่มตกลง

ตอนนี้คุณมี 5 วินาทีเพื่อให้องค์ประกอบของคุณปรากฏขึ้น เมื่อปรากฏขึ้นให้รอจนกว่าโปรแกรมดีบั๊กจะทำงาน ตราบใดที่คุณไม่กลับมาทำงานคุณสามารถเล่นกับองค์ประกอบของคุณและมันจะไม่หายไป

เคล็ดลับที่มีประโยชน์เพื่อหลีกเลี่ยงการทำซ้ำขั้นตอนข้างต้นทุกครั้ง:

เพิ่มสิ่งนี้เป็น bookmarklet:

1. คั่นหน้าใด ๆ
2. แก้ไขบุ๊คมาร์คใหม่นี้
3. แทนที่ URL / ตำแหน่งด้วย: javascript:(function(){setTimeout(()=>{debugger;},5000);})();

ครั้งต่อไปที่คุณต้องการใช้สิ่งนี้เพียงแค่คลิก / แตะที่คั่นหน้านี้

ฉันกำลังใช้ chrome บน Mac ที่นั่นฉันได้ทำตามขั้นตอนข้างต้นแล้ว แต่ฉันจะพยายามอธิบายเพิ่มเติมอีกเล็กน้อย:

1. คลิกขวาและไปเพื่อตรวจสอบองค์ประกอบ
2. ไปที่แท็บแหล่งข้อมูล
3. จากนั้นเลื่อนเมาส์ไปที่องค์ประกอบ
4. แล้วใช้แป้นพิมพ์หรือF8 Command(Window) \มันจะหยุดหน้าจอในสถานะคงที่และองค์ประกอบจะไม่หายไปเมื่อเลื่อนเมาส์ออก

ใน Firebug มีวิธีแก้ไขปัญหาต่าง ๆ สำหรับสิ่งนี้:

1. คุณสามารถใช้Break On Mutateภายในแผง HTML (ด้วยสิ่งนี้คุณจะสามารถค้นหาองค์ประกอบที่เป็น)
2. คุณสามารถคลิกขวาที่องค์ประกอบและเลือกตรวจสอบองค์ประกอบด้วย Firebug

นอกจากนี้คุณอาจต้องการติดตามปัญหา 551ซึ่งขอวิธีในการบล็อกเหตุการณ์เฉพาะชั่วคราว

แก้ไข:

เพื่อหาที่องค์ประกอบที่เป็นคุณยังสามารถเปิดใช้งานตัวเลือกแผง HTML เน้นการเปลี่ยนแปลง , ขยายการเปลี่ยนแปลงและเลื่อนการเปลี่ยนแปลงในมุมมองที่จะทำให้องค์ประกอบที่มองเห็นภายในแผงของ HTML

เซบาสเตียน

ในกรณีของฉันฉันใช้ตัวเลือกขยายซ้ำบน Google chrome:

ขั้นตอนคือ:

1. ตรวจสอบฟิลด์แบบเลื่อนลง
2. ค้นหา DOM แบบไดนามิก (ไฮไลต์สีม่วง)
3. คลิกเมาส์ขวาบน DOM ไดนามิกนั้น
4. เลือกขยายแบบเรียกซ้ำ :
5. เราสามารถเห็นองค์ประกอบทั้งหมดอยู่ที่นั่น

นี่คือตัวอย่าง:

วางเมาส์เหนือองค์ประกอบด้วยเมาส์แล้วกด F8 (สิ่งนี้ใน Chrome) เพื่อหยุดการทำงานของสคริปต์ชั่วคราว สถานะโฮเวอร์จะยังปรากฏให้คุณเห็น

มันจะพาคุณไปยังแท็บแหล่งข้อมูล กลับไปที่แท็บองค์ประกอบ รหัสเวลานี้จะไม่หายไป

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

สิ่งนี้เป็นไปได้ด้วย firebug ใน firefox หรือตัวตรวจสอบที่สร้างขึ้นในโครเมี่ยม

ฉันมีปัญหาเดียวกัน แต่ฉันใช้ Firefox มันหายไปทันทีที่ฉันเปิดองค์ประกอบตรวจสอบพบวิธีแก้ไข: เปิด 4 ขีดกลาง (การตั้งค่า) ไปที่นักพัฒนาเว็บ> ดีบักเกอร์และกด F8 ทันทีซึ่งเป็นทางลัดสำหรับหยุดสคริปต์ ก่อนที่มันจะเตะและตรวจพบว่าคุณเปิดเครื่องมือสำหรับนักพัฒนา