CRX id
begcddgpiamjkanbgdcihlbfdmogcloo
begcddgpiamjkanbgdcihlbfdmogcloo
Description from extension meta
เปรียบเทียบการเปลี่ยนแปลงทางภาพก่อนและหลังการอัพเดทเว็บเพจด้วยรายงานละเอียดและการวิเคราะห์ DOM
Image from store
Description from store
เบื่อหรือยังกับการไล่ดูภาพ “ก่อน-หลัง” ทีละหน้าเพื่อหาบั๊กหน้าตา UI หลังแก้โค้ดทุกครั้ง?
UI Testing Inspector คือเครื่องมือ Visual-Diff 100 % โลคัลที่จับภาพ ออกรายงาน และวิเคราะห์ DOM/CSS ให้ครบจบในเบราว์เซอร์เดียว
ทำไมต้องใช้?
⚡ 100 % โลคัล & ส่วนตัว – สกรีนช็อตและข้อมูลเปรียบเทียบอยู่ในเครื่องคุณเท่านั้น ไม่มีคลาวด์ ไม่มีการแชร์ข้อมูล
⚡ วงรอบฟีดแบ็กทันใจ – ตั้งเบสไลน์-แก้โค้ด-กด Compare แล้วเห็นผลต่างได้ทันที เหมาะกับ regression test ที่ต้องเร็ว
⚡ ตรวจจับระดับพิกเซล – ความคลาดเคลื่อนยิบย่อยที่ตามนุษย์อาจมองไม่เห็นก็ไม่รอด
คุณสมบัติเด่น
🔸 One-Click Baseline – คลิกเดียวบันทึกสภาวะ “ก่อน” ของหน้าใดก็ได้
🔸 Pixel-Perfect Diff – รายงาน Before / After / Diff ชัดเจน
🔸 Inspect Element – ดูได้ทั้งภาพและว่า DOM/CSS ตัวใดเปลี่ยน
🔸 จับภาพ Viewport หรือ Full-page ตามต้องการ
🔸 เก็บประวัติรายงาน 14–15 รายการย้อนหลัง
🔸 ธีมสว่าง/มืด – เลือกดูสบายตาทั้งกลางวัน-กลางคืน
ภายในรายงานละเอียด
✔️ Summary – เปอร์เซ็นต์ความต่าง + จำนวน Add/Remove/Modify
✔️ Side-by-Side – เทียบภาพ Before, After, Diff เคียงข้างกัน
✔️ DOM & CSS Change List – ไฮไลต์สี ฟอนต์ มาร์จิ้น ฯลฯ ที่เปลี่ยน
สิ่งที่คุณจะตรวจพบ
➤ เลย์เอาต์เขยื้อน-จัดแนวผิด ➤ สีและสไตล์เปลี่ยน
➤ องค์ประกอบหาย/ย้าย ➤ ฟอนต์-ข้อความเปลี่ยน
➤ รูปภาพต่างกัน
วิธีการทำงาน
1️⃣ เปิดหน้าที่ต้องการ แล้วคลิก “Set Baseline”
2️⃣ ปรับโค้ด/คอนเทนต์/ CSS ได้เต็มที่
3️⃣ คลิก “Compare with Baseline” เพื่อสร้างรายงาน
4️⃣ ใช้ภาพเทียบ & Change List วิเคราะห์ปัญหา
5️⃣ พอใจกับ UI ใหม่? กด “Set Baseline” เพื่ออัปเดตอ้างอิง
เคล็ดลับมือโปร ✨
รอให้หน้าโหลดเสร็จก่อนจับเบสไลน์
ใช้ Full-page Capture เมื่อต้องทดสอบทั้งหน้า
ถ่ายภาพในขนาดหน้าต่างเดียวกันทุกครั้ง
เก็บเบสไลน์ตอนคอนเทนต์นิ่ง
ทดสอบทีละการเปลี่ยนเพื่อเห็น diff ชัดขึ้น
เซฟเบสไลน์สำคัญก่อนรีแฟกเตอร์ใหญ่
กรณีใช้งาน ✅
UI Regression Testing • ตรวจสอบความถูกต้องเทียบดีไซน์ • รีแฟกเตอร์ CSS อย่างมั่นใจ • เสริม workflow ทดสอบ frontend
สร้างมาเพื่อใคร ➡️ Dev Front-end, วิศวกร QA, นักออกแบบ UI/UX, ฟรีแลนซ์-ทีมเล็ก
เหตุผลที่โดดเด่น 🖼️ ไม่ต้องจัดการไฟล์ Before/After เอง 📝 ใช้ง่าย ไม่มี learning curve
FAQ
❓ ตรวจจับความต่างอย่างไร?
💬 ใช้วิธีคู่ – เปรียบเทียบภาพพิกเซล-ต่อ-พิกเซล + สแกนโครงสร้าง DOM/CSS
❓ ข้อมูลปลอดภัยไหม?
💬 ปลอดภัย 100 % – ประมวลผล-จัดเก็บภายในเบราว์เซอร์คุณเท่านั้น
❓ ใช้กับ localhost ได้หรือไม่?
💬 ได้เต็มที่ ใช้งานระหว่างพัฒนาโลคัลได้เลย
❓ คอนเทนต์แบบไดนามิกทำอย่างไร?
💬 แนะนำให้จับภาพเมื่อแอนิเมชันเสร็จและเนื้อหาคงที่ เพื่อผลลัพธ์แม่นยำ
Latest reviews
- (2025-07-09) Дарья Петрова: Creates a full and detailed report of differences between two versions of web pages. Waiting for Visual comparison of whole page, not just viewport visible parts.