Description from extension meta
வலைத்தளங்களுக்கான உள்ளூர் காட்சித் திரும்பல் சோதனை - கிளாட் இல்லாமல் UI மாற்றங்களை காட்சியாக ஒப்பிட்டு DOM/CSS வேறுபாடுகளைக்…
Image from store
Description from store
ஒவ்வொரு குறியீடு மாற்றத்திற்குப் பிறகும் காட்சிப் பிழைகளை கைமுறையாக சரிபார்க்க வேண்டுமென்று சோர்வாக உள்ளதா? UI Testing Inspector என்பது DOM பகுப்பாய்வுடன் கூடிய உங்கள் நம்பகமான காட்சி வேறுபாடு சரிபார்ப்பாகும்.
ஏன் இதைப் பயன்படுத்த வேண்டும்?
⚡ 100 % உள்ளூர் & தனிப்பட்டது: அனைத்து ஸ்கிரீன்ஷாட்களும் ஒப்பீட்டுத் தரவுகளும் உங்கள் கணினியிலேயே — கிளவுட் சேவைகள் இல்லை, தரவு பகிர்வு இல்லை
⚡ உடனடி பின்னூட்ட சுழற்சி: நீட்டிப்பை நிறுவி, பேஸ்லைன் எடுத்து, குறியீட்டை மாற்றி, வேறுபாடுகளை உடனடியாக பார்வையிடுங்கள் — விரைவான ரிக்ரஷன் சோதனைகளுக்காக
⚡ பிக்சல்-சரியான கண்டறிதல்: மிகச் சிறிய காட்சி மாற்றங்களையும் பிடிக்கவும்
முக்கிய அம்சங்கள்
🔸 ஒரு கிளிக் பேஸ்லைன் – “முன்” நிலையை ஒரே கிளிக்கில் பதிவு
🔸 பிக்சல்-சரியான காட்சி வேறுபாடு – தெளிவான அறிக்கை, வேறுபாடுகள் ஹைலைட்
🔸 Inspect Element – DOM/CSS மாற்றங்களையும் காட்டும்
🔸 முழுப் பக்கம் / viewport படம்பிடிப்பு
🔸 அறிக்கை வரலாறு – 15 வரை பழைய அறிக்கைகள் சேமிப்பு
🔸 ஒளி & இருண்ட தீம் – பகலும் இரவும் வசதியாக
விரிவான அறிக்கையில்
🔍 ஒவ்வொரு ஒப்பீட்டிற்கும் பிறகு:
✔️ சுருக்கம் – % வேறுபாடு & மாற்றிய கூறுகள் எண்ணிக்கை
✔️ பக்கம்-பக்கம் பார்வை – “முன் / பின்” + “வேறுபாடு” படம்
✔️ DOM & CSS மாற்ற பட்டியல் – நிறம், எழுத்துரு, விளிம்பு போன்றவை
எதை பிடிப்பீர்கள்
➤ லேஅவுட் மாற்றங்கள், சீரமைப்பு பிழைகள்
➤ நிறம்/ஸ்டைல் மாற்றங்கள்
➤ காணாமல் போன/நகர்த்தப்பட்ட கூறுகள்
➤ எழுத்துரு/உரை மாற்றங்கள்
➤ பட வேறுபாடுகள்
இது எப்படி செயல்படுகிறது
1️⃣ Visual பேஸ்லைன் அமைப்பது
2️⃣ குறியீட்டு மாற்றம் தைரியமாக
3️⃣ “பேஸ்லைனுடன் ஒப்பிடு” – புதிய தாவலில் அறிக்கை
4️⃣ வேறுபாடுகளை பகுப்பாய்வு செய்து சரிசெய்தல்
5️⃣ புதிய வடிவம் சரி என்றால் பேஸ்லைன் புதுப்பிக்கவும்
தொழில்முறை குறிப்புகள்
✨ பக்கம் முழுதும்โหลด ஆன பிறகு பேஸ்லைன் எடுக்கவும்
✨ முழுப் பக்கம் படம்பிடி — முழுமையான சோதனை
✨ ஒரே உலாவி வடிவத்தில் ஸ்கிரீன்ஷாட்கள் எடுக்கவும்
✨ உள்ளடக்கம் நிலையானபோது கேப்சர் செய்யவும்
✨ ஒரு மாற்றம் வீதம் சோதித்து தெளிவு பெறவும்
✨ பெரிய refactor முன் முக்கிய பேஸ்லைன் சேமிக்கவும்
பயன்பாட்டு வழக்குகள்
✅ Visual regression test
✅ UI/Design சரிபார்ப்பு
✅ CSS refactor தைரியமாக
✅ Frontend workflow உடனடி visual feedback
யார் பயன்படுத்தலாம்?
➡️ Front-end developers • QA engineers • UI/UX designers • Freelancers & சிறிய குழுக்கள்
ஏன் தனித்துவம்?
🖼️ கைமுறை screenshot களை விட சிறப்பு
📝 கற்றல் வளைவு இல்லை — பயன்படுத்த எளிது
FAQ
❓ மாற்றங்கள் எவ்வாறு கண்டறிகிறது?
💬 Pixel-by-pixel ஒப்பீடு + DOM/CSS structural scan.
❓ தரவு பாதுகாப்பா?
💬 100 % உள்ளூர் செயலாக்கம், உலாவியில் சேமிப்பு.
❓ localhost-ல் வேலை செய்யுமா?
💬 நிச்சயமாக — உள்ளூர் டெவலப்மெண்ட் சூழல் ஜோடியாக.
❓ டைனமிக் உள்ளடக்கம்?
💬 நிலைமைத் தபால்களை ஒப்பிட்; அனிமேஷன் முடிந்து ads நிலைபேறாகும்போது screenshot எடுக்கவும்.
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.