Debug ปัญหา :hover, :active, :focus Pseudoclasses ใน CSS/JavaScript ได้ผ่าน DevTools
ขั้นตอน (Firefox DevTools - ตัวอย่างต้นฉบับ)
- กด F12 เปิด Inspector
- ใน DOM View คลิกขวาที่ Element ที่ต้องการ
- เลือก :hover, :active, หรือ :focus ที่ด้านล่าง Context Menu
Chrome DevTools (วิธีเดียวกัน)
- กด F12 → แท็บ Elements
- คลิกขวา Element → Force State → เลือก
:hover,:active,:focus,:focus-visible,:focus-within
ผลลัพธ์
- Element จะแสดงสถานะ Pseudoclass ที่บังคับ (Force)
- Styles Pane จะแสดง CSS Rules ที่ Match สำหรับ State นั้น
- Computed Styles แสดงค่าสุดท้ายหลัง Cascade
- สามารถแก้ไข CSS แบบ Live ได้ทันที
Debug JavaScript Hover Events
// Log เมื่อ Hover เข้า/ออก
element.addEventListener('mouseenter', e => console.log('enter', e.target));
element.addEventListener('mouseleave', e => console.log('leave', e.target));
// Breakpoint ใน Event Handler
// Sources Tab → Event Listener Breakpoints → Mouse → mouseenter/mouseleave
เครื่องมือช่วย
- React DevTools: Highlight Updates, Inspect Props/State
- Vue DevTools: Component Tree, Events, Timeline
- CSS Peeper / VisBug: Inspect Styles แบบ Visual
หมายเหตุ: รูปภาพในต้นฉบับแสดง Firefox DevTools Context Menu กับ Force State Options
