Description from extension meta
വെബ്സൈറ്റുകൾക്കായുള്ള പ്രാദേശിക ദൃശ്യ റിഗ്രഷൻ പരിശോധന - ക്ലൗഡ് ഇല്ലാതെ UI മാറ്റങ്ങൾ ദൃശ്യമായി താരതമ്യം ചെയ്യുകയും DOM/CSS…
Image from store
Description from store
ഓരോ കോഡ് മാറ്റത്തോടെയും вручസ്വല ബഗുകൾ കൈകൊണ്ടു പരിശോധിക്കാനുള്ള ക്ഷീണം തോന്നുന്നുണ്ടോ? DOM വിശകലനത്തോടുകൂടിയ വിശ്വസനീയമായ പ്രാദേശിക വിഷ്വൽ ഡിഫ് ചെക്കറാണ് UI Testing Inspector.
എന്തിനൊക്കെയാണ് ഇത് ഉപയോഗിക്കേണ്ടത്?
⚡ 100 % ലോക്കൽ & സ്വകാര്യ: സ്ക്രീൻഷോട്ടുകളും താരതമ്യ ഡാറ്റയും നിങ്ങളുടെ കമ്പ്യൂട്ടറിലേയ്ക്ക് മാത്രം. ക്ലൗഡ് സേവനവും ഡാറ്റ ഷെയറിംഗുമില്ല
⚡ തൽക്ഷണ ഫീഡ്ബാക്ക്: എക്സ്റ്റെൻഷൻ ഇന്റോൾ ചെയ്ത് ബേസ്ലൈൻ എടുത്ത് കോഡ് മാറ്റങ്ങൾ വരുത്തുക; വ്യത്യാസങ്ങൾ ഉടൻ കാണാം
⚡ പിക്സൽ–പെർഫെക്റ്റ് ഡിറ്റക്ഷൻ: മനുഷ്യന്റെ കണ്ണ് ചുക്കുന്ന ചെറുതായിടത്തേയ്ക്കും ദൃശ്യ മാറ്റങ്ങൾ പിടികൂടൂ
പ്രധാന സവിശേഷതകൾ
🔸 ഒറ്റ ക്ലിക്ക് ബേസ്ലൈൻ – ഏതൊരു പേജിന്റെ “മുൻപ്” അവസ്ഥ ദൃശ്യമായി പകർത്തൂ
🔸 പിക്സൽ–പെർഫെക്റ്റ് ഡിഫ് റിപ്പോർട്ട് – ആധികാരിക തലപ്പം, നിലവിലെ അവസ്ഥ, ചുവപ്പിച്ച് കാട്ടിയ വ്യത്യാസ ചിത്രം
🔸 Element Inspect – DOM/CSS മാറ്റങ്ങൾക്കെയും പിടിച്ചു കാട്ടുന്നു
🔸 പൂർണ്ണ പേജ് / viewport capture തിരഞ്ഞെടുത്തു ഉപയോഗിക്കാം
🔸 റിപ്പോർട്ട് ചരിത്രം – 15 മുൻ താരതമ്യ റിപ്പോർട്ടുകൾ വരെ സൂക്ഷിക്കും
🔸 ലൈറ്റ് & ഡാർക്ക് തീം – പകലും രാത്രിയും സുഖകരം
വിശദമായ റിപ്പോർട്ടിൽ
🔍 ഓരോ താരതമ്യശേഷവും ലഭിക്കുക:
✔️ Summary – വ്യത്യാസ ശതമാനം, ചേർത്ത/നീക്കിയ/മാറ്റിയ എലമെന്റുകളുടെ എണ്ണം
✔️ Side-by-side – “Before / After” സ്ക്രീൻഷോട്ടുകളും “Difference” ചിത്രവും അയഞ്ഞതിൽ
✔️ DOM & CSS Change List – നിറം, ഫോണ്ട്, മാർജിൻ മുതലായ കോഡ്-ലവൽ മാറ്റങ്ങൾ സൂക്ഷ്മമായി
നിങ്ങൾ പിടികൂടുന്നത്
➤ ലേഔട്ട് ഷിഫ്റ്റുകൾ, അലിഗ്ന്മെന്റ് പ്രശ്നങ്ങൾ
➤ നിറ, സ്റ്റൈൽ മാറ്റങ്ങൾ
➤ കുറഞ്ഞതോ നീക്കിയതോ ആയ ელമെന്റുകൾ
➤ ഫോണ്ട്/ടെക്സ്റ്റ് പരിഷ്കാരങ്ങൾ
➤ ചിത്ര വ്യത്യാസങ്ങൾ
എങ്ങനെ പ്രവർത്തിക്കുന്നു
1️⃣ “Set Baseline” – പരീക്ഷിക്കേണ്ട പേജിൽ ക്ലിക്ക് ചെയ്യൂ
2️⃣ സ്വതന്ത്രമായി CSS/HTML മാറ്റങ്ങൾ വരുത്തൂ
3️⃣ “Compare with Baseline” – സമഗ്ര ദൃശ്യ റിപ്പോർട്ട് പുതിയ ടാബിൽ
4️⃣ വ്യത്യാസങ്ങൾ വിശകലനം ചെയ്ത് പ്രശ്നങ്ങൾ പരിഹരിക്കൂ
5️⃣ പുതുക്കിയ ലുക്കിൽ സന്തോഷമാകുമ്പോൾ “Set Baseline” വീണ്ടും, റഫറൻസ് അപ്ഡേറ്റ്
പ്രൊ-ടിപ്പുകൾ
✨ പേജ് ലോഡ് പൂർത്തിയാകുമ്പോഴാണ് ബേസ്ലൈൻ എടുക്കാൻ മികച്ചത്
✨ സമഗ്ര പരിശോധനയ്ക്കായി ഫുൾ-പേജ് capture ഉപയോഗിക്കൂ
✨ മേലെവഴി വിൻഡോ സൈസ് ഒതുക്കി, കഞ്സിസ്റ്റന്റ് സ്ക്രീൻഷോട്ടുകൾ
✨ ഉള്ളടക്കം സ്ഥിരമായശേഷം capture ചെയ്യുക
✨ ഒരു മാറ്റം വീതം പരീക്ഷിച്ച് വ്യക്തമായ ഫലങ്ങൾ
✨ വലിയ CSS റീഫാക്ടറിന് മുൻപ് പ്രധാന ബേസ്ലൈൻ സൂക്ഷിക്കുക
ഉപയോഗകേസുകൾ
✅ ദൃശ്യ റിഗ്രഷൻ ടെസ്റ്റിംഗ്
✅ UI/Design ഭിത്തികൾ പരിശോധിക്കൽ
✅ CSS റീഫാക്റ്ററിംഗ് സുരക്ഷിതമാക്കൽ
✅ Front-end workflows-ന് തൽക്ഷണ ദൃശ്യ ഫീഡ്ബാക്ക്
ആർക്കാണ്
➡️ Front-end ഡെവലപ്പർമാർ
➡️QA എഞ്ചിനീയർമാർ
➡️UI/UX ഡിസൈനർമാർ
➡️Freelance / ചെറിയ ടീമുകൾ
വിനിമയിക്കുന്ന പ്രത്യേകത
🖼️ manual screenshots-നെക്കാൾ മെച്ചം
📝 zero learning curve – anyone can use
FAQ
❓ മാറ്റങ്ങൾ എങ്ങനെ കണ്ടെത്തുന്നു?
💬 Pixel-by-pixel comparison + DOM/CSS structural scan.
❓ ഡാറ്റ സുരക്ഷിതമാണോ?
💬 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.