ตรึงหน้าจอในแผงควบคุม debugger ของ Chrome / DevTools สำหรับการตรวจสอบป๊อปโอเวอร์หรือไม่

394

ฉันใช้ตัวตรวจสอบโครมเพื่อลองและวิเคราะห์z-indexป๊อปอัพบูตแบบทวิตเตอร์และพบว่ามันน่าผิดหวังอย่างมาก ...

มีวิธีการตรึง popover (ในขณะที่แสดง) เพื่อให้ฉันสามารถประเมินและแก้ไข CSS ที่เกี่ยวข้องหรือไม่

การวาง 'โฮเวอร์' ที่คงที่ไว้บนลิงก์ที่เกี่ยวข้องไม่ทำให้ป๊อปโอเวอร์ปรากฏ

css  google-chrome  google-chrome-devtools 
— อับราม
แหล่งที่มา
7
ลองตั้งค่าเบรกพอยต์ใน JavaScript ของคุณทันทีหลังจากป๊อปอัพแสดงขึ้น ( debugger;)
— Hope4You
5
ฉันใช้window.setTimeoutเพื่อทริกเกอร์debuggerใน 5 วินาทีจากนั้นเลื่อนเมาส์ไปที่องค์ประกอบแล้วรอ
— grimmdude
สวัสดีนักเขียนด้านเทคนิค DevTools ที่นี่ คุณช่วยส่งMVCEให้ฉันดูปัญหาได้มั้ย ในฐานะของ 2019 เรามีเครื่องมือไม่กี่ที่ควรทำเคล็ดลับ ( จุดพักฟังเหตุการณ์ , สลับหลอกชั้น ) แต่ฉันไม่สามารถให้คำตอบที่รายละเอียดจนกว่าฉันจะสามารถทำซ้ำสถานการณ์ของคุณ
— Kayce Basques
— Muhammed AbdElFatah
@KayceBasques นี่คือตัวอย่าง: telerik.com/kendo-angular-ui/components/dropdowns/dropdownlistคลิกที่รายการดรอปดาวน์เพื่อเปิดจากนั้นลองตรวจสอบเนื้อหารายการที่ปรากฏในมุมมององค์ประกอบ
— RMorrisey

คำตอบ:

704

ทำให้มันทำงานได้ นี่คือขั้นตอนของฉัน:

  1. เรียกดูหน้าที่ต้องการ
  2. เปิดคอนโซล dev - F12บน Windows / Linux หรือoption+ ⌘+ Jบน macOS
  3. เลือก Sourcesแท็บในตัวตรวจสอบโครเมียม
  4. ในหน้าต่างเว็บเบราว์เซอร์วางเมาส์เหนือองค์ประกอบที่ต้องการเพื่อเริ่มต้นป๊อปโอเวอร์
  5. พบF8กับ Windows / Linux (หรือfn+ F8บน macOS) ขณะที่ popover แสดงขึ้น หากคุณคลิกที่ใดก็ได้ในหน้าจริงของ F8 จะไม่ทำอะไรเลย การคลิกครั้งสุดท้ายของคุณจะต้องอยู่ที่ไหนสักแห่งในตัวตรวจสอบเช่นแท็บแหล่งที่มา
  6. ไปที่Elementsแท็บในตัวตรวจสอบ
  7. ค้นหา popover ของคุณ (มันจะซ้อนใน HTML ขององค์ประกอบทริกเกอร์)
  8. ขอให้สนุกกับการปรับเปลี่ยน CSS
— อับราม
แหล่งที่มา
9
เวิร์กโฟลว์นี้ให้คำแนะนำสั้น ๆ ที่มีประโยชน์แก่ฉันในการดีบักเกอร์เบรกพอยต์และช่วยแยกเมนูที่ยากต่อการออกแบบเนื่องจากมันหายไปเมื่อคลิกบนคอนโซล
— Trevor Pierce
22
หากองค์ประกอบ DOM ใช้กิจกรรมการโฟกัสเพื่อซ่อนคุณจะไม่มีโอกาสได้กด F8!
— Marcel
2
@Dean เพื่อทริกเกอร์ F8 ที่คุณต้องใช้fn!
— mik01aj
10
สำหรับข้อมูลเพิ่มเติมF8ทางลัดใดที่ตัวดีบักหยุดทำงานชั่วคราว (การเรียกใช้สคริปต์) และctrl + \ ก็ยังใช้งานได้ ( cmd + \ ใน MacOS)
— LeOn - Han Li
1
หรือคุณสามารถกดF8สองครั้ง
— samdd
274

เพื่อให้สามารถตรวจสอบองค์ประกอบใด ๆ ให้ทำดังต่อไปนี้ สิ่งนี้ควรใช้งานได้แม้ว่าจะเป็นการยากที่จะทำซ้ำสถานะโฮเวอร์:

  • เรียกใช้จาวาสคริปต์ต่อไปนี้ในคอนโซล สิ่งนี้จะเจาะเข้าไปในตัวดีบักใน 5 วินาที

    setTimeout(function(){debugger;}, 5000)

  • ไปแสดงองค์ประกอบของคุณ (โดยการโฮเวอร์หรืออย่างไรก็ตาม) และรอจนกว่า Chrome จะเข้าสู่การดีบักเกอร์

  • ตอนนี้คลิกที่ Elementsแท็บในตัวตรวจสอบ Chrome และคุณสามารถมองหาองค์ประกอบของคุณที่นั่น
  • คุณยังสามารถคลิกที่ Find Elementไอคอน (ดูเหมือนแว่นขยาย) และ Chrome จะช่วยให้คุณไปตรวจสอบและค้นหาองค์ประกอบของคุณบนหน้าเว็บโดยคลิกขวาที่มันจากนั้นเลือกInspect Element

โปรดทราบว่าวิธีการนี้เป็นรูปแบบที่แตกต่างเล็กน้อยสำหรับคำตอบที่ยอดเยี่ยมอื่น ๆในหน้านี้

— Brad Parks
แหล่งที่มา
7
ฉันเคารพที่คุณให้ความเคารพอย่างเหมาะสมกับคำตอบของ frzsombor ดี
— Jeremy Moritz
4
นี่คือสิ่งที่ฉันต้องการเนื่องจากฟังก์ชั่นนั้นเกิดจากการเพิ่มองค์ประกอบ DOM ใน js Focus และลบออกจากความพร่ามัวซึ่งมักจะเกิดขึ้นเมื่อคุณเปลี่ยนไปใช้เครื่องมือ dev
— trudesign
6
วิธีแก้ปัญหา F8 ของ Abram ไม่ได้ผลสำหรับฉัน สิ่งนี้ทำ ขอบคุณ!
— Ralf
3
ขอบคุณ. ฉันทำบุ๊กที่มีชื่อเรื่อง : ❚❚, ที่อยู่javascript:debugger; : F8ใช้งานได้ แต่สำหรับผู้ที่ต้องการใช้เมาส์สิ่งนี้อาจสะดวกกว่า
— Tymek
1
อย่างที่คนอื่น ๆ เห็นว่าคำตอบของ F8 นั้นไม่ได้ผลสำหรับฉันและทำให้ฉันรู้สึกแย่มาก! งานนี้มีเสน่ห์เหมือนกัน ขอบคุณ!
— DoYouEvenCodeBro
70

UPDATE: ตามที่ Brad Parks เขียนไว้ในความคิดเห็นของเขามีวิธีแก้ปัญหาที่ดีกว่าและง่ายกว่ามากด้วยรหัส JS เพียงบรรทัดเดียว:

เรียกใช้setTimeout(function(){debugger;},5000);จากนั้นไปแสดงองค์ประกอบของคุณและรอจนกว่าจะเข้าสู่การดีบักเกอร์

คำตอบเดิม:

ฉันเพิ่งมีปัญหาเดียวกันและฉันคิดว่าฉันพบทางออก "สากล" (สมมติว่าไซต์ใช้ jQuery)
หวังว่าจะช่วยให้ใครบางคน!

  1. ไปที่แท็บองค์ประกอบในตัวตรวจสอบ
  2. คลิกขวา<body>แล้วคลิก " แก้ไขเป็น HTML "
  3. เพิ่มองค์ประกอบต่อไปนี้หลังจาก<body>นั้นกด Ctrl + Enter:
    <div id="debugFreeze" data-rand="0"></div>
  4. คลิกขวาที่องค์ประกอบใหม่นี้แล้วเลือก "หยุดพัก ... " -> "การแก้ไขแอตทริบิวต์"
  5. ตอนนี้ไปที่มุมมองคอนโซลและเรียกใช้คำสั่งต่อไปนี้:
    setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
  6. ตอนนี้กลับไปที่หน้าต่างเบราว์เซอร์และคุณมีเวลา 5 วินาทีในการค้นหาองค์ประกอบของคุณแล้วคลิก / hover / focus / ฯลฯ ก่อนที่จะถึงจุดพักและเบราว์เซอร์จะ "หยุด"
  7. ตอนนี้คุณสามารถตรวจสอบองค์ประกอบที่คลิก / โฮเวอร์ / โฟกัส / ฯลฯ ของคุณอย่างสงบ

แน่นอนคุณสามารถแก้ไขจาวาสคริปต์และเวลาถ้าคุณได้รับความคิด

— frzsombor
แหล่งที่มา
11
เฮ้! ความคิดที่ยอดเยี่ยม ... คุณไม่จำเป็นต้องเพิ่ม div พิเศษแม้ว่า ... เพียงแค่เรียกใช้ javascript นี้แทนsetTimeout(function(){debugger;}, 5000);จากนั้นไปแสดงองค์ประกอบของคุณและรอจนกว่ามันจะเข้าสู่การดีบักเกอร์ จากนั้นคลิกที่แท็บ "องค์ประกอบ" ในตัวตรวจสอบ Chrome และคุณสามารถมองหาองค์ประกอบของคุณได้ที่นั่น นอกจากนี้คุณยังสามารถคลิกที่ไอคอน "ค้นหาองค์ประกอบ" (ดูเหมือนแว่นขยาย) และ Chrome จะให้คุณไปตรวจสอบและค้นหาองค์ประกอบของคุณบนหน้าเว็บโดยคลิกขวาจากนั้นเลือก "ตรวจสอบองค์ประกอบ"
— Brad Parks
5
ฉันคิดว่าคุณควรเพิ่มคำตอบนี้เพราะโซลูชันนี้ไม่ได้ดีไปกว่าของฉัน แต่ดีกว่าของคนอื่นทั้งหมดที่นี่ ดีจริงๆ!
— frzsombor
38
  1. คลิกขวาที่ใดก็ได้ภายในแท็บองค์ประกอบ
  2. เลือก Breakon... > subtree modifications
  3. ทริกเกอร์ป๊อปอัพที่คุณต้องการดูและมันจะหยุดถ้ามันเห็นการเปลี่ยนแปลงใน DOM
  4. หากคุณยังไม่เห็นป๊อปอัปให้คลิกStep over the next function(F10)ปุ่มที่อยู่Resume(F8)ด้านบนตรงกลางบนสุดของโครเมี่ยมจนกว่าคุณจะตรึงป๊อปอัปที่คุณต้องการดู
— Adrian Enriquez
แหล่งที่มา
3
ขอบคุณ! ฉันไม่รู้จักอันนี้และช่วยฉันด้วย
— R Claven
14

ฉันพบว่ามันใช้งานได้ดีใน Chrome

คลิกขวาที่องค์ประกอบที่คุณต้องการตรวจสอบจากนั้นคลิกบังคับสถานะองค์ประกอบ> เลื่อน แนบภาพหน้าจอแล้ว

สถานะองค์ประกอบกำลัง

— Leah Huyghe
แหล่งที่มา
5
มันจะทำงานเฉพาะในกรณีที่ popover ถูกทริกเกอร์โดย css
— mik01aj
6

วางสิ่งนี้ในแท็บคอนโซล:

setTimeout(function(){debugger;}, 5000)

จากนั้นคลิกที่ตำแหน่งที่จะแสดงป๊อปอัพ 5 วินาทีต่อมา - หน้าจอจะถูกแช่แข็งและสนุกกับการปรับแต่ง CSS

— Parker Lucenzo
แหล่งที่มา
0

วิธีง่ายๆของฉัน:

setTimeout(function(){ debugger; }, 3000);
— นาดาฟบี
แหล่งที่มา
7
นี่เป็นวิธีเดียวกับโซลูชันของ Brad Parks ที่โพสต์เมื่อ 3 ปีที่แล้ว
— frzsombor
-2

ฉันลองใช้วิธีแก้ไขปัญหาอื่นที่นี่พวกเขาทำงาน แต่ฉันขี้เกียจนี่คือทางออกของฉัน

  1. วางเมาส์เหนือองค์ประกอบเพื่อกระตุ้นการขยายสถานะ
  2. ctrl+ shift+c
  3. วางเมาส์เหนือองค์ประกอบอีกครั้ง
  4. คลิกขวา
  5. นำทางไปยังดีบักเกอร์

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

— วินเซนต์ถัง
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.