เครื่องมือทดสอบ CSS Selector
ทดสอบ CSS selector กับ HTML ของคุณในเบราว์เซอร์ ดู element ที่ match แบบไฮไลต์ ตรวจ tag, id, class และ DOM path พร้อมตรวจจับ selector ที่ไม่ถูกต้องทันที
Loading tool...
เครื่องมือทดสอบ CSS Selector คืออะไร?
เครื่องมือทดสอบ CSS Selector เป็นเครื่องมือสำหรับ developer ที่ประเมิน CSS selector ใดก็ได้กับ HTML ที่คุณวางเข้ามา ภายในเบราว์เซอร์ทั้งหมด โดยจะแสดงรายการ element ที่ match พร้อม tag, id, class และ DOM path และเรนเดอร์พรีวิวแบบไฮไลต์ให้เห็นชัดว่า selector จับอะไรบ้าง
ประโยชน์หลัก
- ตรวจสอบ selector ทันทีก่อนส่ง styles หรือโค้ด querySelector ขึ้น production
- debug selector ที่ match เป็นศูนย์ด้วย feedback แบบ structured แทนการเดา
- HTML ขององค์กรเป็นความลับ เพราะไม่มีการอัปโหลดอะไรเลย
- เรียนรู้ syntax ของ selector ได้เร็วขึ้นด้วยตัวอย่างคัดสรรที่คลิกได้
กรณีการใช้งาน
- •debug selector ของ scraper หรือ test suite ที่เลิก match หลัง markup เปลี่ยน
- •ตรวจสอบ CSS rule กับ HTML ของ component จริงก่อน push styles
- •สอนหรือเรียน CSS specificity, combinator และ pseudo-class แบบ interactive
- •หา DOM path ของ element อย่างรวดเร็วเพื่อใช้ใน devtools หรือ automation
วิธีใช้เครื่องมือทดสอบ CSS Selector
- วาง HTML: คัดลอก HTML fragment จากโปรเจกต์ของคุณ หรือใช้เอกสารตัวอย่างที่มีให้ แล้ววางลงในช่อง HTML input
- พิมพ์ CSS selector: กรอก selector ที่ต้องการทดสอบ เช่น ul.nav-list > li a หรือคลิกตัวอย่างที่ให้มาเพื่อโหลด pattern ยอดนิยม
- รันการทดสอบ: กดปุ่มทดสอบ Selector element ที่ match จะแสดงเป็นผลลัพธ์แบบ structured พร้อมพรีวิวแบบ sandbox ที่ไฮไลต์ให้เห็นชัดเจน
- ตรวจสอบและคัดลอกผลลัพธ์: ดู tag, id, class และ DOM path ของแต่ละรายการ แล้วคัดลอก path ไปใช้ใน devtools หรือ automated test ได้ทันที
คุณสมบัติหลัก
- ทำงานบน querySelectorAll engine ของเบราว์เซอร์โดยตรง ผล match ตรงกับ production จริง
- พรีวิวแบบ sandbox พร้อมไฮไลต์ element ที่ selector จับได้อย่างชัดเจน
- รายละเอียด match แบบ structured: tag, id, class list, DOM path และ text snippet
- ข้อความ lint ที่เข้าใจง่ายสำหรับวงเล็บไม่สมดุลและ quote ที่ไม่ปิด ก่อนประเมินผล
- ตัวอย่าง selector คลิกเดียว ครอบคลุม combinator, attribute และ pseudo-class
- คัดลอก path ของรายการที่ match ไปยังคลิปบอร์ดเพื่อใช้ใน devtools หรือ test code
คำถามที่พบบ่อย
HTML ของผมถูกอัปโหลดไปที่เซิร์ฟเวอร์ไหม?
ไม่ เครื่องมือใช้ DOMParser และ querySelectorAll ของเบราว์เซอร์โดยตรง การ parse และจับคู่ทั้งหมดเกิดขึ้นในเครื่องของคุณเท่านั้น
รองรับ CSS selector ระดับใดบ้าง?
รองรับทุกอย่างที่เบราว์เซอร์ของคุณรองรับ เพราะการประเมินผลส่งต่อให้ native engine ทำ ทั้ง type, class, id selector, combinator, attribute selector และ pseudo-class รวมถึง nth-child
ทำไม selector ของผมถึง match เป็นศูนย์?
สาเหตุที่พบบ่อย เช่น พิมพ์ชื่อ class ผิด, combinator ไม่ตรงกับโครงสร้าง DOM จริง หรือมีช่องว่างเกินใน attribute selector ลองคลาย selector ทีละส่วนเพื่อหาจุดปัญหา
ทดสอบ pseudo-element อย่าง before และ after ได้ไหม?
pseudo-element ไม่สามารถถูกจับด้วย querySelectorAll เพราะไม่ใช่ DOM node จริง เครื่องมือจะรายงานว่าไม่รองรับ เช่นเดียวกับที่เบราว์เซอร์ทำใน JavaScript