ดู: สถานะการโฮเวอร์ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome

ผมต้องการที่จะเห็น:hoverสไตล์สมอฉันโฉบในChrome ในFirebugมีสไตล์แบบเลื่อนลงที่อนุญาตให้ฉันเลือกสถานะที่แตกต่างสำหรับองค์ประกอบ

ฉันไม่พบสิ่งที่คล้ายกันใน Chrome ฉันพลาดอะไรไปรึเปล่า?

ตอนนี้คุณสามารถเห็นทั้งกฎหลอกระดับและบังคับพวกเขาในองค์ประกอบ

หากต้องการดูกฎเช่น:hoverในบานหน้าต่างสไตล์ให้คลิก:hovข้อความเล็ก ๆที่ด้านบนขวา

เพื่อบังคับให้เป็นองค์ประกอบของรัฐคลิกขวาและเลือก:hover:hover

เคล็ดลับเพิ่มเติมในแผงองค์ประกอบในChrome เครื่องมือสำหรับนักพัฒนาทางลัด

แก้ไข: คำตอบนี้เป็นก่อนการแก้ไขข้อบกพร่องดูคำตอบของ tnothcutt

• องค์ประกอบคลิกขวา แต่ไม่ย้ายตัวชี้เมาส์ของคุณออกจากองค์ประกอบให้อยู่ในสถานะโฮเวอร์
• เลือกตรวจสอบองค์ประกอบผ่านแป้นพิมพ์เช่นเดียวกับที่ลูกศรชี้ขึ้นแล้วกดปุ่ม Enter
• ดูในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ภายใต้กฎ CSS ที่ตรงกันคุณควรจะเห็น: โฮเวอร์

PS: ฉันลองนี่ในแท็กคำถามของคุณ

ฉันต้องการเห็นสถานะโฮเวอร์บนคำแนะนำเครื่องมือ Bootstrap ของฉัน การบังคับใช้สถานะ: hover ใน Chrome dev Tools ไม่ได้สร้างเอาต์พุตที่ต้องการ แต่การทริกเกอร์เหตุการณ์ของ mouseenter ผ่านทางคอนโซลก็เป็นกลอุบายใน Chrome หากมี jQuery อยู่บนหน้าคุณสามารถเรียกใช้:

$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');

มีหลายวิธีในการดูสไตล์HOVER STATEในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome

วิธีที่ 01

วิธีที่ 02

ด้วยค่าเริ่มต้นสำหรับนักพัฒนาซอฟต์แวร์ Firefox

ด้วย Firebug

ในกรณีที่ช่วยได้ดูเหมือนว่าจะง่ายกว่าใน Chrome รุ่นล่าสุด (47.0.2526.106):

ตรวจสอบองค์ประกอบแล้วคลิกที่จุดสีขาวสามจุดในร่องน้ำด้านซ้าย:

จากนั้นเลือกสถานะองค์ประกอบที่ต้องการจากดรอปดาวน์นี้:

ฉันไม่คิดว่าจะมีวิธีการทำเช่นนี้ ฉันส่งคำขอคุณสมบัติ หากมีวิธีนักพัฒนาซอฟต์แวร์ที่ Google จะชี้ชัดและฉันจะแก้ไขคำตอบของฉัน ถ้าไม่เราจะต้องรอดู (คุณสามารถติดดาวปัญหาในการลงคะแนนได้)

ความคิดเห็นที่ 1 โดยสมาชิกโครงการ Chrome : ใน 10.0.620.0 แผงสไตล์จะแสดง: ลักษณะโฮเวอร์สำหรับองค์ประกอบที่เลือก แต่ไม่ใช่: ใช้งานอยู่

(ณ จากโพสต์นี้) เวอร์ชันช่องเสถียรปัจจุบันคือ 8.0.552.224

คุณสามารถแทนที่การติดตั้งช่องเสถียรของ Google Chrome ด้วยช่องเบต้าหรือช่อง Dev (ดูที่ช่องเผยแพร่ก่อนเข้าถึง )

นอกจากนี้คุณยังสามารถติดตั้งการติดตั้ง Chrome ครั้งที่สองที่ทันสมัยกว่าช่อง Devได้

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

ฉันรู้ว่าสิ่งที่ฉันทำนั้นค่อนข้างจะเป็นการแก้ปัญหา แต่มันก็ทำงานได้อย่างสมบูรณ์แบบและนั่นก็เป็นวิธีที่ฉันทำทุกครั้ง

จากนั้นดำเนินการดังนี้:

• ก่อนอื่นตรวจสอบให้แน่ใจว่าเครื่องมือนักพัฒนาซอฟต์แวร์ Chrome ไม่ได้ถูกปลดออก
• จากนั้นย้ายส่วนใดก็ได้ของหน้าต่าง Dev Tools ไปที่กึ่งกลางขององค์ประกอบที่คุณต้องการตรวจสอบในขณะที่โฮเวอร์

• สุดท้ายเลื่อนเมาส์ไปที่องค์ประกอบคลิกขวาและตรวจสอบองค์ประกอบเลื่อนเมาส์ไปที่หน้าต่าง Dev Tools และคุณจะสามารถเล่นกับองค์ประกอบของคุณ: hover css

ไชโย!

ฉันแก้จุดบกพร่องเมนู hoverสถานะด้วย Chrome และทำสิ่งนี้เพื่อให้สามารถดูรหัสสถานะโฮเวอร์:

ในElementsแผงคลิกไปและเลือกToggle Element state:hover

ในScriptsแผงควบคุมให้ไปEvent Listeners Breakpointsที่ส่วนล่างขวาและเลือกMouse -> mouseupในส่วนด้านล่างขวาและเลือก

ตอนนี้ตรวจสอบเมนูและเลือกกล่องที่คุณต้องการ เมื่อคุณปล่อยปุ่มเมาส์มันควรจะหยุดและแสดงสถานะการเลื่อนเมาส์ขององค์ประกอบที่เลือกไว้ในElementsแผงควบคุม (ดูที่Stylesส่วน)

เปลี่ยนเป็นโฮเวอร์สถานะการใน Chrome เป็นเรื่องง่ายเพียงทำตามขั้นตอนด้านล่าง

1) คลิกขวาในหน้าของคุณและเลือกการตรวจสอบ

2) เลือกองค์ประกอบที่คุณต้องการตรวจสอบในDOM

3) เลือกไอคอนพิน (สลับสถานะองค์ประกอบ)

4) จากนั้นทำเครื่องหมายที่โฮเวอร์

ตอนนี้คุณสามารถเห็นสถานะโฮเวอร์ของDOM ที่เลือกในเบราว์เซอร์!

ฉันสามารถดูสไตล์ได้โดยทำตามขั้นตอนด้านล่างที่แนะนำโดย Babiker - "องค์ประกอบคลิกขวา แต่ไม่เลื่อนตัวชี้เมาส์ของคุณออกจากองค์ประกอบเก็บไว้ในสถานะโฉบเลือกองค์ประกอบตรวจสอบผ่านแป้นพิมพ์เช่นในลูกศรขึ้นและ จากนั้นกดปุ่ม Enter "

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

ในกรณีของฉันฉันต้องการทำสำเนา bootstrap tooltip แต่วิธีการข้างต้นไม่ได้ผลสำหรับฉัน ฉันเดาว่า bootstrap นำสิ่งนี้ไปใช้โดยอะไรเช่นเมาส์เข้า / ออก

อย่างไรก็ตามเมื่อฉันวางปุ่มบนปุ่มมันจะสร้างองค์ประกอบ html พี่ชายใต้ปุ่มดังนั้นฉันเลือกองค์ประกอบหลักของปุ่มในแท็บ "องค์ประกอบ" ของหน้าต่าง "เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์" วางเมาส์เหนือปุ่มและ "Ctrl + C" จากนั้นฉันสามารถวางซอร์สโค้ดซึ่งมีโค้ดที่สร้างขึ้น ค้นหารหัสที่สร้างล่าสุดและเพิ่มลงในรหัสต้นฉบับโดย "แก้ไขเป็น HTML" ในแท็บ "องค์ประกอบ"

หวังว่ามันจะช่วยใครซักคน

ฉันคิดว่านี่ไม่ใช่ปัญหาใน Chrome แต่ในกรณีนี้ ฉันเขียนสคริปต์ jQuery นี้เพื่อตรวจสอบ DOM เมื่อฉันเลื่อนไปรอบ ๆ ด้วยปุ่ม TAB

หากเปลี่ยนเป็นการใช้ 'mouseover' จะมีลักษณะดังนี้:

$("body *").on('mouseover', function(event) {       
    console.log(event.target);      
    inspect(event.target);
    event.stopPropagation();
});

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