ตรวจสอบองค์ประกอบที่ลอยอยู่ใน Chrome หรือไม่

107

ฉันพยายามดูผ่านเครื่องมือสำหรับนักพัฒนาของ Chrome ว่าคำแนะนำเครื่องมือมีโครงสร้างอย่างไรบนไซต์ อย่างไรก็ตามแม้ว่าฉันจะวางเมาส์เหนือรายการนั้น แต่เมื่อฉัน "ตรวจสอบองค์ประกอบ" ก็ไม่มีสิ่งใดแสดงสำหรับคำแนะนำเครื่องมือใน html ฉันรู้ว่าฉันสามารถตั้งค่ารูปแบบเป็น:hoverได้ แต่ฉันยังไม่เห็น html หรือ css ของคำแนะนำเครื่องมือ

ความคิดใด ๆ ?

— Skitterm
แหล่งที่มา

คุณสามารถพบโซลูชันอื่น ๆ ได้ที่นี่สำหรับ Chrome & Firefox

— Muhammed Abdelfattah

80

ฉันพบเคล็ดลับในการทำเช่นนั้นด้วยคำแนะนำเครื่องมือ Twitter Bootstrap หากคุณเปิดเครื่องมือ dev (F12) บนจอภาพอื่นจากนั้นวางเมาส์เหนือองค์ประกอบเพื่อเปิดคำแนะนำเครื่องมือคลิกขวาราวกับว่าคุณกำลังเลือก 'ตรวจสอบองค์ประกอบ' ปล่อยให้เมนูบริบทนั้นเปิดขึ้นแล้วย้ายโฟกัสไปที่เครื่องมือสำหรับนักพัฒนา html สำหรับคำแนะนำเครื่องมือควรปรากฏถัดจากองค์ประกอบที่เป็นคำแนะนำเครื่องมือสำหรับใน HTML จากนั้นคุณสามารถมองมันราวกับว่าเป็นองค์ประกอบอื่น หากคุณกลับไปที่ Chrome HTML จะหายไปดังนั้นสิ่งที่ต้องระวัง

เป็นวิธีที่แปลก แต่ได้ผลสำหรับฉันดังนั้นฉันจึงคิดว่าจะแบ่งปัน

— จัสติน Chmura
แหล่งที่มา

12

ใช่ แต่ไม่ใช่บน Mac

— actimel

2

- ขั้นตอนที่ 1: ตรวจสอบองค์ประกอบที่สร้างคำแนะนำเครื่องมือเพื่อเรียกใช้เครื่องมือ Chrome Dev - ขั้นตอนที่ 2: ขณะที่วางเมาส์เหนือองค์ประกอบคำแนะนำเครื่องมือของคุณจะปรากฏขึ้น โดยไม่ต้องออกจากองค์ประกอบให้เปิดหน้าต่างใหม่ (Command-N บน Mac, Ctrl-N ที่อื่น) - ขั้นตอนที่ 3: ลากหน้าต่างใหม่ด้านล่างหน้าต่างเก่าคุณจึงยังคงเห็นคำแนะนำเครื่องมือจากนั้นเลื่อนเคอร์เซอร์ไปที่ตัวตรวจสอบองค์ประกอบ . - ขั้นตอนที่ 4: เลื่อนลงไปด้านล่างสุดซึ่งคำแนะนำเครื่องมือของคุณจะต่อท้าย DOM คลิกองค์ประกอบเพื่อดูรูปแบบ

— pgblu

2

ป.ล. สิ่งนี้ใช้ไม่ได้กับคำแนะนำเครื่องมือที่สร้างผ่าน Javascript จากแอตทริบิวต์ title ขององค์ประกอบเช่นเกิดขึ้นใน SO คำแนะนำเครื่องมือเหล่านี้ใช้สไตล์เริ่มต้น

— pgblu

สิ่งนี้ช่วยฉันสำหรับคำแนะนำเครื่องมือใน Kendo

— k29

1

เคล็ดลับ: ก่อนอื่นไปที่แท็บแหล่งที่มา จากนั้นคุณสามารถหยุด Javascript ด้วยปุ่ม F8 ปุ่มหยุดชั่วคราวอยู่ที่นั่นพร้อมทางลัด F8 / Ctrl + \ (คำตอบจาก @Rajan ในหน้านี้)

— rostamiani

85

โซลูชันนี้ใช้งานได้โดยไม่มีรหัสเพิ่มเติมใด ๆ

กดcommand-option-jเพื่อเปิดคอนโซล คลิกปุ่มมองหน้าต่างที่มุมขวาบนของคอนโซลเพื่อเปิดคอนโซลในหน้าต่างอื่น

จากนั้นในหน้าต่าง Chrome เลื่อนเมาส์ไปที่องค์ประกอบที่ทริกเกอร์ popover ตีแต่หลายครั้งที่คุณจำเป็นต้องมุ่งเน้นไปที่คอนโซลแล้วพิมพ์command-` debuggerซึ่งจะหยุดหน้าจากนั้นคุณสามารถตรวจสอบองค์ประกอบในแท็บองค์ประกอบ

— joeyyang
แหล่งที่มา

6

คำตอบนี้ดีจริงๆ รหัสน้อยที่สุดไม่มีการตั้งค่า jQuery หรือจอภาพคู่

— uKolka

1

มันได้ผล! ในขั้นต้นเนื่องจากการกำหนดค่าผิดพลาดฉันเห็นคำแนะนำเครื่องมือ HTML เริ่มต้นไม่ใช่คำแนะนำเครื่องมือ Bootstrap หลังจากแก้ไขปัญหานั้นแล้วโซลูชันของคุณใช้งานได้ ขอบคุณ.

— DFB

2

นอกจากนี้หากคุณหลุดโฟกัสขณะเขียนdebuggerไปที่คอนโซลคุณสามารถกดalt+tabขณะวางเมาส์เหนือองค์ประกอบได้ ใช้งานได้กับแอป Chromium บน Windows

— Orcun

1

นี่ตอบโจทย์มาก!

— โนบิตะ

หน้าแป้นพิมพ์ลัดของ Chrome DevTools ระบุว่าเป็นการควบคุม + `แทนคำสั่ง +` เพื่อโฟกัสกลับไปที่คอนโซล บางทีมันอาจจะเปลี่ยนไป

— rinat.io

85

F8 จะหยุดการดีบักชั่วคราว

วางเมาส์เหนือคำแนะนำเครื่องมือแล้วกดF8ขณะที่แสดง

ตอนนี้คุณใช้ตัวตรวจสอบเพื่อดู CSS ได้แล้ว

— dwjohnston
แหล่งที่มา

4

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

— Alexander Dixon

2

F8 ไม่ได้ผลสำหรับฉันด้วยเหตุผลบางประการ แต่การหยุดชั่วคราวจะผูกไว้กับ ctrl- \

— Bryan Larsen

ทางออกที่ดีที่สุดที่นี่

— NiallMitch14

ทั้ง <kbd> F8 </kbd> หรือ <kbd> AltGr </kbd> - <kbd> RCtrl </kbd> - <kbd> ß </kbd> ในรูปแบบแป้นพิมพ์ภาษาเยอรมันของฉันจะหยุดการดีบักเกอร์ชั่วคราว

— ทดสอบ

63

คุณจะต้องบังคับให้คำแนะนำเครื่องมือแสดงเช่นนี้

$('.myelement').tooltip('open');

ตอนนี้คำแนะนำเครื่องมือจะแสดงโดยไม่คำนึงถึงสถานะการวางเมาส์

เลื่อนลงไปใกล้ด้านล่างของ DOM ซึ่งคุณจะเห็นมาร์กอัป

อัปเดตดูความคิดเห็นของ cneuro สำหรับ Bootstrap 3

$('.myelement').tooltip('show');

อัปเดตดูคำตอบของ Marko Grešakสำหรับ Chrome และเห็นได้ชัดว่า Safari เช่นกัน$0สามารถใช้เป็นทางลัดสำหรับองค์ประกอบที่เลือกในปัจจุบัน ดูเหมือนว่าจะใช้งานได้ใน Safari เช่นกัน

$($0).tooltip('show')

— อดัมแกรนท์
แหล่งที่มา

1

$ ('. myelement'). tooltip ('open') คือสิ่งที่ใช้ได้ผลสำหรับฉัน

— tekumara

6

ตั้งแต่ Bootstrap 3 ตอนนี้คือ.tooltip('show') getbootstrap.com/javascript/#tooltips-methods

— cneuro

2

ใน Chrome องค์ประกอบที่เลือกในปัจจุบันสามารถเข้าถึงได้$0ในคอนโซล $($0).tooltip('show')ดังนั้นคุณสามารถเลือกองค์ประกอบที่เรียกเคล็ดลับและเรียกใช้

— Marko Grešak

31

คลิกf12ไปที่แท็บคอนโซลและเพิ่มสิ่งต่อไปนี้:

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

ซึ่งจะทำให้คุณ 5 5 secondsวินาทีที่จะทำสิ่งที่คุณต้องการและมันจะทำลายที่ จากนั้นคุณสามารถตรวจสอบองค์ประกอบเป้าหมาย

(เช่นวางเมาส์เหนือองค์ประกอบและรอ 5 วินาทีจากนั้นตรวจสอบ .. )

— อาลีคลีท
แหล่งที่มา

ทำงานใน Electron ด้วย

— xmedeko

24

สำหรับฉันคำตอบที่ยอมรับใช้ไม่ได้: การคลิกใน DevTools เป็นการปิด ToolTip ทันที

อย่างไรก็ตามฉันพบ/superuser/249050/chrome-keyboard-shortcut-to-pause-script-executionซึ่งช่วยฉัน:

ในคอนโซล: รัน:

    const F12 = 123
    window.addEventListener('keydown', function(event) { 
      if (event.keyCode === F12 ) {
        debugger; 
      }
    });

เน้นองค์ประกอบด้วยตัวตรวจสอบ
กด F12

ตอนนี้คุณสามารถตรวจสอบองค์ประกอบได้โดยหยุด JavaScript ชั่วคราวดังนั้น DOM จะไม่เปลี่ยนแปลง

— mikemaccana
แหล่งที่มา

1

ฉลาด! สิ่งที่ฉันกำลังมองหา ขอบคุณ :) แม้ว่าจะไม่ทำงานกับ F12 กับการตั้งค่าของฉันด้วยเหตุผลบางประการดังนั้นฉันจึงใช้ keyCode == 13 และกด ENTER

— Jeremy F.

2

ทางออกที่ดี! ฉันขอแนะนำให้บันทึกข้อมูลโค้ดที่มีประโยชน์นี้ในพื้นที่ SOURCE -> SNIPPETS ของ chrome เพื่อให้คุณสามารถดำเนินการได้ด้วยการคลิกสองครั้ง;)

— Magico

1

โซลูชันนี้ดีกว่าวิธีที่ยอมรับ ฉันจะทำให้มันเป็น bookmarklet!

— Lulu

1

ทางออกที่ดี ฉลาดมาก.

— Charlie Dalsass

1

สมบูรณ์แบบ. ควรเป็นคำตอบที่ถูก / ยอมรับ!

— Brosig

10

คำตอบแบบหน้าต่างเดียวโดยไม่มีการเข้ารหัส

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

เปิด DevTools ของ Chrome โดยใช้ F12 / Ctrl + Shift + I (Windows / Linux) หรือ Command + Option + I (Mac)
เลือกแท็บSourcesในหน้าต่าง DevTools
ใช้เมาส์วางเมาส์เหนือองค์ประกอบที่คุณต้องการตรวจสอบเพื่อให้คำแนะนำเครื่องมือมองเห็นได้
กด F8 (Windows / Linux / Mac) เพื่อหยุดการเรียกใช้สคริปต์ชั่วคราว หน้าต่างหลักจะเป็นสีเทาและป๊อปอัป "Paused in debugger" จะปรากฏขึ้น
ในหน้าต่าง DevTools เลือกแท็บองค์ประกอบ
สำหรับคำแนะนำเครื่องมือ Bootstrap คำแนะนำเครื่องมือจะปรากฏเป็นคำสุดท้าย<div>ในไฟล์<body>

— TobyLL
แหล่งที่มา

5

ไม่มีโซลูชันโค้ดสำหรับคำแนะนำเครื่องมือที่เปิดใช้งาน JS:

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

— Clhenrick
แหล่งที่มา

4

ทำตามขั้นตอนต่อไปนี้

เปิดInspectหน้าต่างใน chrome
วางเมาส์ไว้เหนือคำแนะนำเครื่องมือ
กด F8

การดำเนินการ JS จะหยุดชั่วคราวจากนั้นคุณสามารถตรวจสอบคำแนะนำเครื่องมือได้
กดF8อีกครั้งเพื่อเริ่มการดำเนินการและF10เพื่อแก้ไขข้อบกพร่อง

— Parvez Ahmed
แหล่งที่มา

2

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

$('body').tooltip({
    selector: "[data-toggle='tooltip']",
    trigger: "click"
});

ด้วยวิธีนี้จะสามารถตรวจสอบได้อย่างง่ายดายด้วยเครื่องมือแก้ไขจุดบกพร่องของ FF หรือ Chrome

— lxg
แหล่งที่มา

2

1) เปิดหน้าต่างตรวจสอบโดยคลิก F12

2) ไปที่แท็บแหล่งที่มา (ถัดจากคอนโซล)

3) เลื่อนเมาส์ไปที่องค์ประกอบที่จะตรวจสอบและวางเมาส์ไว้ที่นั่น

4) การใช้แป้นพิมพ์ (Tab หรือ shift + tab) เพื่อย้ายตัวควบคุมไปที่ปุ่มหยุดชั่วคราวหรือ F8 ดูภาพ

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

— ราชันย์
แหล่งที่มา

1

มันง่ายมากที่จะแก้ไขคำแนะนำเครื่องมือเหล่านี้

ขั้นตอนที่ 1 : ตรวจสอบองค์ประกอบที่มีคำแนะนำเครื่องมือ ตรวจสอบให้แน่ใจว่าไฮไลต์ด้วยสีน้ำเงินใน devtools

ขั้นตอนที่ 2 : คลิกขวาที่องค์ประกอบ (ในส่วน devtools) และเลือก: การปรับเปลี่ยนแอตทริบิวต์ภายใต้ Break on

ขั้นตอนที่ 3 : วางเมาส์เหนือองค์ประกอบที่ตรวจสอบแล้วภาพซ้อนทับสีเทาจะปรากฏเหนือไซต์พร้อมข้อความขนาดเล็ก: หยุดชั่วคราวในดีบักเกอร์

ที่ด้านบนสุดของหน้าจอ

ขั้นตอนที่ 4 : คลิกที่ลูกศรสีน้ำเงินจนกระทั่งสถานะโฮเวอร์ถูกเลือก

ขั้นตอนที่ 5 : ตรวจสอบและแก้ไขคำแนะนำเครื่องมือ

— คาทาลิน
แหล่งที่มา

0

ฉันมีปัญหากับสิ่งนี้ดังนั้นฉันจึงไปที่เอกสารและตรวจสอบคำแนะนำเครื่องมือที่แสดงผลแล้วในหน้า นั่นช่วยให้ฉันเห็นโครงสร้าง dom ของคำแนะนำเครื่องมือและแก้ไขตามนั้น

— ฟิลิป
แหล่งที่มา

0

ใน Chome บน Linux สามารถทำได้สำหรับคำแนะนำเครื่องมือที่สร้างโดย JS เช่นสำหรับการอ้างอิงบน WikiPedia โดยทำดังต่อไปนี้:

ตามที่ระบุไว้ข้างต้นเปิดเครื่องมือ dev โดยใช้ F12 เปิดในหน้าต่างอื่น ไฮไลต์คำแนะนำเครื่องมือแล้วคลิก Ctrl-Shift-C (ตัวตรวจสอบ HTML) ในขณะที่คุณเลื่อนไปที่ส่วนปลายหน้าต่าง dev จะแสดงส่วนที่เหมาะสม

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

ในระดับหนึ่งยังใช้งานได้กับเคล็ดลับ bootstrap

— ผู้ใช้ 1806949
แหล่งที่มา

0

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

— โนแลนลินเดเก้
แหล่งที่มา

0

เครื่องมือ dev เป็นวิธีการตรวจสอบองค์ประกอบที่วางเมาส์เช่นคำแนะนำเครื่องมือ

1 - เปิดเครื่องมือ dev โดยใช้ F12

2 - เลือกแท็บ "องค์ประกอบ"

3 - เลือกองค์ประกอบหลักที่มีคำแนะนำเครื่องมือ

4 - คลิกที่ "... " (บนบรรทัดขององค์ประกอบหลัก) และหลังจากนั้นเลือก "Break on" / "subtree modifications" (ดูภาพด้านล่าง)

5 - สุดท้ายกลับไปที่แอปพลิเคชันและทำให้คำแนะนำเครื่องมือปรากฏขึ้น ควรบล็อกการดำเนินการหลังจากที่ Tooltip ปรากฏขึ้น

หวังว่าจะเป็นประโยชน์สำหรับใครบางคนนะ!

— Ricardo Magalhães
แหล่งที่มา

0

ทางออกอื่นที่ฉันพบสำหรับปัญหานี้ ผ่านมุมมองมือถือหรือแท็บเล็ตใน Chrome ให้กดCrt + Shift + Mในเครื่องมือ Chrome Dev สำหรับมุมมองมือถือใน Chrome คลิก (Tap) บน ToolTip div และคุณสามารถตรวจสอบได้ด้วยคลิกขวาที่คำแนะนำเครื่องมือ

— HERAwais
แหล่งที่มา

0

กดcommand-option-jเพื่อเปิดคอนโซล คลิกปุ่มมองหน้าต่างที่มุมขวาบนของคอนโซลเพื่อเปิดคอนโซลในหน้าต่างอื่น

จากนั้นในหน้าต่าง Chrome เลื่อนเมาส์ไปที่องค์ประกอบที่ทริกเกอร์ popover ตีแต่หลายครั้งที่คุณจำเป็นต้องมุ่งเน้นไปที่คอนโซลแล้วพิมพ์command- debuggerที่จะหยุดหน้า; จากนั้นคุณสามารถตรวจสอบองค์ประกอบในแท็บองค์ประกอบ

— Okau123
แหล่งที่มา

0

นี่คือวิธีที่ฉันทำบน Mac:

วางเมาส์เหนือองค์ประกอบที่มีคำแนะนำเครื่องมือที่เปิด Chrome devtools
รอให้คำแนะนำเครื่องมือปรากฏขึ้น
เปิดจานคำสั่ง devtools ด้วยแป้นพิมพ์ลัด Cmd+Shift+Pทำงานให้ฉัน
พิมพ์Disable JavaScriptและกดEnter

วิธีนี้จะป้องกันไม่ให้คำแนะนำเครื่องมือทั้งหมดที่ใช้ JavaScript เลือนหายไป

— Savchenkoto
แหล่งที่มา

-1

ที่น่าสังเกตว่าการสลับ: hover state จากภายในเครื่องมือ dev จะมีผลเฉพาะในกรณีที่เปิดใช้งานข้อความคำใบ้ผ่าน CSS: hover rules ตั้งแต่แรก การสลับจะใช้เฉพาะสถานะโฮเวอร์กับองค์ประกอบเพื่อวัตถุประสงค์ในการแสดงผล แต่ไม่ทริกเกอร์เหตุการณ์การวางเมาส์บน JavaScript ที่เกี่ยวข้อง

เฟรมเวิร์กจำนวนมากเช่น AngularJS แนบคำแนะนำเครื่องมือ HTML แบบไดนามิกที่ด้านล่างของเนื้อหาเอกสารผ่าน JavaScript เมื่อองค์ประกอบเป้าหมายถูกวางเมาส์ไว้ดังนั้นการวางเมาส์และการตรวจสอบองค์ประกอบเป้าหมายจะไม่ช่วยอะไร

คำตอบของ @ joeyyang ทำงานได้ดีสำหรับฉันในสถานการณ์นี้

— จอห์นริกซ์
แหล่งที่มา

-2

วิธีที่ง่ายที่สุดวิธีหนึ่งที่ฉันพบคือ:

เปิด Chrome dev tools ที่ด้านข้าง
วางเมาส์เหนือองค์ประกอบ
คลิกขวา
คลิกที่เครื่องมือ dev
ตอนนี้คุณสามารถตรวจสอบและเปลี่ยนรูปแบบได้

— คาสปาร์สสิริเชนโก
แหล่งที่มา

นี่มันไม่มีประโยชน์ @Kaspars

— Es Noguera

@EsNoguera อาจจะเจาะจงมากขึ้นว่าทำไม นี่คือวิธีที่ได้ผลสำหรับฉัน เนื่องจากฉันพบวิธีการที่ได้ผลทำไมจึงแนะนำไม่ดี?

— Kaspars Siricenko