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

ฉันกำลังพยายามตรวจสอบคุณสมบัติ CSS จากอินพุตลงในเซลล์ตาราง ข้อมูลที่ป้อนจะปรากฏขึ้นเมื่อคลิกและหายไปเมื่อโฟกัสหายไปเหมือนตอนที่ฉันพยายามตรวจสอบ ฉันจะทำอย่างไรเพื่อไม่ให้โฟกัสหายไปในขณะที่ฉันย้ายไปที่หน้าต่างอื่น (ตัวตรวจสอบ)

ในเบราว์เซอร์ Chrome, เครื่องมือสำหรับนักพัฒนาที่เปิดกว้างและเลือกแท็บองค์ประกอบแล้วเปิดเมนูบริบทของโหนดแม่ขององค์ประกอบที่คุณต้องการที่จะตรวจสอบในเมนูบริบทคลิกที่หยุดบน > ทรีย่อยการปรับเปลี่ยน

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

คุณสามารถจับภาพองค์ประกอบที่หายไปได้หากคุณหยุดการเรียกใช้ JavaScript ชั่วคราวด้วยแป้นพิมพ์ลัดโดยไม่ต้องเลื่อนเมาส์ นี่คือวิธีที่คุณทำใน Chrome:

1. เปิดเครื่องมือสำหรับนักพัฒนาและไปที่แหล่งที่มา

2. สังเกตทางลัดเพื่อหยุดการเรียกใช้สคริปต์ชั่วคราวF8-

   

3. โต้ตอบกับ UI เพื่อให้องค์ประกอบปรากฏ

4. F8hit
5. คุณจะเลื่อนเมาส์ไปรอบ ๆ ตรวจสอบ DOM ได้อย่างไร องค์ประกอบจะอยู่ที่นั่น

เคล็ดลับนี้ใช้ได้ใน Firefox และเบราว์เซอร์สมัยใหม่อื่น ๆ เช่นกัน

หากทุกอย่างล้มเหลวให้พิมพ์สิ่งนี้ในคอนโซล:

setTimeout(() => { debugger; }, 5000)

จากนั้นคุณมีเวลา 5 วินาที (หรือเปลี่ยนค่าเป็นอย่างอื่น) เพื่อทำให้สิ่งที่คุณต้องการแก้ไขปรากฏขึ้น

ไม่มีคำตอบอื่น ๆ ทำงานให้ฉัน - ต้นไม้ DOM เก็บไว้ได้รับการแก้ไข (เช่นสิ่งที่ผมสนใจเกี่ยวกับการหายไป) ทางด้านขวาก่อนที่จะสคริปต์ที่หยุดชั่วคราว

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

โดยไปที่Elementsแท็บในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์และตรวจสอบว่าคุณอยู่ในStylesส่วนทางด้านขวา (ควรเป็นตำแหน่งเริ่มต้นเมื่อคุณเริ่มเครื่องมือสำหรับนักพัฒนา) ตอนนี้เพียงแค่ beneth Toggle Element Stateรูปแบบในมุมบนด้านขวาคุณมีไอคอน เมื่อคุณคลิกคุณสามารถจำลอง:active, :hover, :focusและ:visitedสำหรับองค์ประกอบที่คุณเลือกบนซ้ายในมุมมองรหัสของคุณ

ใน Chrome บนหน้าเครื่องมือสำหรับนักพัฒนาสำหรับหน้าภายใต้การทดสอบ ... คลิกเมนูตัวเลือกและเปิดการตั้งค่าสำหรับค่ากำหนด ... ภายใต้ DevTools เปิดใช้งาน 'เลียนแบบเพจที่เน้น'

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

ไม่ใช่วิธีแก้ปัญหาที่แท้จริง แต่มักใช้งานได้ (:

1. เน้นองค์ประกอบ
2. คลิกขวาสำหรับเมนูบริบท
3. เลื่อนลงไปที่เครื่องมือสำหรับนักพัฒนา

ฉันมีสถานการณ์ที่ยากลำบากมากและไม่มีคำตอบใด ๆ จากที่นี่ (ฉันไม่ได้ตรวจสอบคำตอบที่เปลี่ยนคอนเทนเนอร์ซึ่งเป็นเนื้อหาสำหรับฉันหรือเหตุการณ์ดั้งเดิมเพราะฉันไม่รู้) ในที่สุดฉันก็พบวิธีแก้ปัญหาโดยการทำลายผ่าน Control Event Listener Breakpoints ใน Chrome Inspector บางทีนั่นอาจเป็นวิธีการข้ามเบราว์เซอร์ในการทำลายสถานการณ์ที่ซับซ้อนซึ่งแม้แต่ F8 หรือคลิกเมาส์ขวาก็ยังซ่อนป๊อปอัปอีกครั้ง:

วาง Javascript ต่อไปนี้ในคอนโซลนักพัฒนาของเบราว์เซอร์:

// Delayed console log of parent element with disappearing child element(s)
// Once code is trigger, you have 3 seconds to trigger the hidden element before it snapshots.
// The hidden elements should appear in the console ready to inspect.

var timer = 3000; //time before snapshot
var parent_of_element_to_inspect = 'div.elementcontainer'; //container of element to snapshot
setTimeout(function(){
 console.log(document.querySelector(parent_of_element_to_inspect).cloneNode(true));
},timer);

ฉันแก้ไขได้เร็วขึ้นเนื่องจากฉันใช้เครื่องมือไม่เก่งนี่คือสิ่งที่ฉันทำ

event.originalEvent.preventDefault();
event.originalEvent.stopImmediatePropagation();
event.originalEvent.stopPropagation();

หากคุณเปิด Chrome DevTools แล้วทริกเกอร์ตัวตรวจสอบองค์ประกอบโดยใช้แป้นพิมพ์ลัดก็ควรแก้ปัญหาได้

Mac: Cmd+Opt+Jแล้วCmd+Opt+C

ของ windows: Ctrl+Shift+Jแล้วCtrl+Shift+C

[