CRX id
begcddgpiamjkanbgdcihlbfdmogcloo
begcddgpiamjkanbgdcihlbfdmogcloo
Description from extension meta
בדיקת רגרסיה חזותית מקומית עבור אתרים - השוו שינויי UI חזותית וגלו הבדלי DOM/CSS ללא ענן
Image from store
Description from store
દરેક કોડ બદલાયા પછી વિઝ્યુઅલ બગ્સ માટે મેન્યુઅલી ચેક કરીને કંટાળી ગયા છો? UI ટેસ્ટિંગ ઇન્સ્પેક્ટર એ DOM વિશ્લેષણ સાથેનો તમારો ગો-ટુ ઓનલાઈન વિઝ્યુઅલ ડિફ ચેકર છે.
તેનો ઉપયોગ શા માટે કરવો?
⚡ ૧૦૦% સ્થાનિક અને ખાનગી: બધા સ્ક્રીનશૉટ્સ અને સરખામણી ડેટા તમારા કમ્પ્યુટર પર જ રહે છે. કોઈ ક્લાઉડ સેવાઓ નહીં, કોઈ ડેટા શેરિંગ નહીં
⚡ ઇન્સ્ટન્ટ ફીડબેક લૂપ: એક્સટેન્શન ઇન્સ્ટોલ કરો, બેઝલાઇન લો, તમારા કોડમાં ફેરફાર કરો અને તરત જ તફાવતો જુઓ. ઝડપી રીગ્રેશન પરીક્ષણો માટે પરફેક્ટ
⚡ પિક્સેલ-પરફેક્ટ ડિટેક્શન: માનવ આંખો ચૂકી શકે તેવા નાનામાં નાના દ્રશ્ય ફેરફારોને પણ પકડી શકો છો
મુખ્ય વિશેષતાઓ:
🔸 એક-ક્લિક બેઝલાઇન: એક જ ક્લિકથી કોઈપણ વેબપેજની "પહેલાં" સ્થિતિ કેપ્ચર કરો
🔸 પિક્સેલ-પરફેક્ટ વિઝ્યુઅલ ડિફરન્સ: બેઝલાઇન, વર્તમાન સ્થિતિ અને ચોક્કસ તફાવતોને પ્રકાશિત કરતી છબી દર્શાવતો સ્પષ્ટ રિપોર્ટ મેળવો
🔸 તત્વનું નિરીક્ષણ કરો: મૂળભૂત નિરીક્ષકથી આગળ વધો. ફક્ત કોડ જ નહીં, પણ DOM અને CSS માં શું બદલાયું છે તે પણ જુઓ
🔸 પૂર્ણ પૃષ્ઠ અને વ્યૂપોર્ટ કેપ્ચર: દૃશ્યમાન વિસ્તાર કે સમગ્ર સ્ક્રોલ કરી શકાય તેવા પૃષ્ઠને કેપ્ચર કરવા વચ્ચે પસંદગી કરો
🔸 રિપોર્ટ ઇતિહાસ: 15 અગાઉના સરખામણી અહેવાલો સાચવો અને સમીક્ષા કરો
🔸 પ્રકાશ અને શ્યામ થીમ્સ: દિવસ હોય કે રાત, આરામદાયક જોવા માટે
અંદરનો વિગતવાર અહેવાલ
🔍 દરેક સરખામણી પછી, તમને એક વ્યાપક અહેવાલ મળે છે જે તમને સંપૂર્ણ ચિત્ર આપે છે:
✔️ સારાંશ: દ્રશ્ય તફાવતની ટકાવારી અને ઉમેરાયેલા, દૂર કરેલા અને સુધારેલા તત્વોની ગણતરી
✔️ સાઇડ-બાય-સાઇડ વ્યૂ: હાઇલાઇટ કરેલ "તફાવત" છબીની બાજુમાં "પહેલા" અને "પછી" સ્ક્રીનશોટની તુલના કરો
✔️ DOM અને CSS ફેરફાર યાદી: કયા ઘટકો બદલાયા છે તે ચોક્કસ રીતે નક્કી કરો. હવે પિક્સેલ કેમ ખસેડ્યું તેનું અનુમાન કરવાની જરૂર નથી - રંગ, ફોન્ટ-કદ અથવા માર્જિન જેવા કોડ-સ્તરના ફેરફારો જુઓ
✔️ HTML વેલિડેટર: પાર્સિંગ ભૂલો માટે તમારા બેઝલાઇન અને વર્તમાન પૃષ્ઠો તપાસો
તમે શું પકડશો:
➤ લેઆઉટ શિફ્ટ અને ખોટી ગોઠવણી
➤ રંગ અને શૈલીમાં ફેરફાર
➤ ખૂટતા અથવા ખસેડાયેલા તત્વો
➤ ફોન્ટ અને ટેક્સ્ટ ફેરફારો
➤ છબી તફાવતો
તે કેવી રીતે કામ કરે છે:
1️⃣ વિઝ્યુઅલ બેઝલાઇન સેટ કરો: તમે જે પેજનું પરીક્ષણ કરવા માંગો છો તેના પર જાઓ અને એક્સટેન્શન પોપઅપમાં "સેટ બેઝલાઇન" પર ક્લિક કરો. આ તમારા સત્યનો સ્ત્રોત છે.
2️⃣ વિશ્વાસ સાથે કોડ: તમારા CSS માં ફેરફાર કરો, સામગ્રી અપડેટ કરો અથવા ઘટકોને રિફેક્ટર કરો.
3️⃣ ફેરફારો માટે તાત્કાલિક તપાસો: "બેઝલાઇન સાથે સરખામણી કરો" પર ક્લિક કરો. વિગતવાર વિઝ્યુઅલ રિપોર્ટ સાથે એક નવું ટેબ ખુલશે.
4️⃣ તફાવતોનું વિશ્લેષણ કરો: દરેક સમસ્યાને શોધવા માટે બાજુ-બાજુ દૃશ્ય અને શોધાયેલ ફેરફારોની સૂચિનો ઉપયોગ કરો.
5️⃣ બેઝલાઇન અપડેટ કરો: નવા સંસ્કરણથી ખુશ છો? નવા દેખાવને તમારા સંદર્ભ તરીકે સાચવવા માટે ફક્ત "સેટ બેઝલાઇન" પર ફરીથી ક્લિક કરો.
વ્યાવસાયિક ટિપ્સ
✨ બેઝલાઇન કેપ્ચર કરતા પહેલા પેજ લોડિંગ પૂર્ણ થાય ત્યાં સુધી રાહ જુઓ
✨ વ્યાપક પરીક્ષણ માટે પૂર્ણ-પૃષ્ઠ કેપ્ચરનો ઉપયોગ કરો
✨ સચોટ સરખામણી માટે સમાન બ્રાઉઝર વિન્ડો કદમાં સ્ક્રીનશોટ લો
✨ જ્યારે સામગ્રી સ્થિર હોય ત્યારે બેઝલાઇન કેપ્ચર કરો
✨ સ્પષ્ટ તફાવત પરિણામો માટે એક સમયે એક ફેરફારનું પરીક્ષણ કરો
✨ મુખ્ય કોડ રિફેક્ટર પહેલાં મહત્વપૂર્ણ બેઝલાઇન સાચવો
✨ સમાન પેજ સ્ટેટ્સની સરખામણી કરો (સમાન યુઝર લોગિન સ્ટેટસ, ડેટા લોડ થયેલ)
ઉપયોગના કિસ્સાઓ
✅ વિઝ્યુઅલ રીગ્રેશન ટેસ્ટિંગ: મુખ્ય ઉપયોગનો કેસ. ફેરફારો કર્યા પછી, કોઈપણ અનિચ્છનીય દ્રશ્ય ભૂલોને પકડવા માટે સરખામણી ચલાવો.
✅ UI/ડિઝાઇન ચકાસણી: ડિઝાઇન મોકઅપ્સ સામે પિક્સેલ-પરફેક્ટ અમલીકરણ અને બ્રાન્ડ સુસંગતતાની ખાતરી કરો.
✅ CSS રિફેક્ટરિંગ: નિર્ભયતાથી લેગસી CSS રિફેક્ટર કરો. એક ઝડપી વિઝ્યુઅલ ડિફ ટેસ્ટ તમને તરત જ જણાવશે કે તમારા ફેરફારોની કોઈ અણધારી આડઅસર થઈ છે કે નહીં.
✅ ફ્રન્ટએન્ડ ટેસ્ટિંગ: કોઈપણ ફ્રન્ટએન્ડ ટેસ્ટિંગ વર્કફ્લો માટે એક આવશ્યક સાધન, જે તાત્કાલિક દ્રશ્ય પ્રતિસાદ પ્રદાન કરે છે.
તે કોના માટે બનાવવામાં આવ્યું છે?
➡️ ફ્રન્ટએન્ડ ડેવલપર્સ: તમારો કોડ કમિટ કરતા પહેલા લેઆઉટ સમસ્યાઓનો સામનો કરો
➡️ QA એન્જિનિયર્સ: વિશ્વસનીય વિઝ્યુઅલ વેરિફિકેશન સ્ટેપ વડે તમારા મેન્યુઅલ UI ટેસ્ટને બહેતર બનાવો
➡️ UI/UX ડિઝાઇનર્સ: ઝડપથી ખાતરી કરો કે લાઇવ અમલીકરણ તમારી ડિઝાઇન સાથે મેળ ખાય છે
➡️ ફ્રીલાન્સર્સ અને નાની ટીમો: એન્ટરપ્રાઇઝ પ્રાઇસ ટેગ વિના એક દ્રશ્ય પરીક્ષણ સાધન
તે શા માટે અલગ દેખાય છે
🖼️ મેન્યુઅલ સ્ક્રીનશોટ કરતાં વધુ સારું: તમારા ડેસ્કટોપ ફોલ્ડર્સમાં પહેલા અને પછીની છબીઓને જગલિંગ કરવાનું બંધ કરો
📝 શૂન્ય લર્નિંગ કર્વ: જો તમે બ્રાઉઝ કરી શકો છો, તો તમે આ ટૂલનો ઉપયોગ કરી શકો છો
વારંવાર પૂછાતા પ્રશ્નો
❓તે ફેરફારો કેવી રીતે શોધે છે?
💬 તે દ્વિ-પદ્ધતિ અભિગમનો ઉપયોગ કરે છે: દ્રશ્ય તફાવત માટે પિક્સેલ-બાય-પિક્સેલ સરખામણી અને DOM/CSS ફેરફાર સૂચિ માટે માળખાકીય સ્કેન.
❓શું મારો ડેટા સુરક્ષિત છે?
💬હા. તમારા બ્રાઉઝરમાં બધું જ ૧૦૦% સ્થાનિક રીતે પ્રોસેસ અને સ્ટોર કરવામાં આવે છે.
❓ શું હું તેનો ઉપયોગ લોકલહોસ્ટ પર કરી શકું?
💬 બિલકુલ! સ્થાનિક વિકાસ દરમિયાન તે સંપૂર્ણ રીતે કામ કરે છે.
❓ ગતિશીલ સામગ્રી વિશે શું?
💬 આ ટૂલ સ્ટેટિક સ્ટેટ્સની સરખામણી કરવા માટે રચાયેલ છે. શ્રેષ્ઠ પરિણામો માટે, જ્યારે એનિમેશન પૂર્ણ થાય અને જાહેરાતો સ્થિર હોય ત્યારે તમારા સ્ક્રીનશૉટ્સ કેપ્ચર કરો.
iw
🇮🇱 עברית (Hebrew - iw)
בדיקה חזותית - UI Testing Inspector
בדיקת רגרסיה חזותית מקומית עבור אתרים - השוו שינויי UI חזותית וגלו הבדלי DOM/CSS ללא ענן
נמאס לכם לבדוק ידנית באגים ויזואליים אחרי כל שינוי קוד? UI Testing Inspector הוא בודק ההבדלים החזותי המקוון שלכם עם ניתוח DOM.
למה להשתמש בזה?
⚡ 100% מקומי ופרטי: כל צילומי המסך ונתוני ההשוואה נשארים במחשב שלך. ללא שירותי ענן, ללא שיתוף נתונים
⚡ לולאת משוב מיידית: התקינו את ההרחבה, צרו קו בסיס, בצעו את שינויי הקוד שלכם וראו את ההבדלים באופן מיידי. מושלם לבדיקות רגרסיה מהירות
⚡ זיהוי מושלם לפיקסלים: תפוס אפילו את השינויים הוויזואליים הקטנים ביותר שעיניים אנושיות עלולות לפספס
תכונות עיקריות:
🔸 קו בסיס בלחיצה אחת: לכידת מצב "לפני" של כל דף אינטרנט בלחיצה אחת
🔸 הבדל ויזואלי מושלם לפיקסלים: קבל דוח ברור המציג את קו הבסיס, את המצב הנוכחי ותמונה המדגישה את ההבדלים המדויקים
🔸 בדיקת אלמנט: מעבר לבדיקה הבסיסית. ראה לא רק את הקוד, אלא גם מה השתנה ב-DOM וב-CSS
🔸 לכידת דף מלא ותצוגה: בחרו בין לכידת האזור הנראה לעין או לכידת כל הדף הניתן לגלילה
🔸 היסטוריית דוחות: שמור ובדוק עד 15 דוחות השוואה קודמים
🔸 ערכות נושא בהירות וכהות: לצפייה נוחה, ביום או בלילה
דוח מפורט בתוך
🔍 לאחר כל השוואה, תקבלו דוח מקיף שנותן לכם את התמונה המלאה:
✔️ סיכום: אחוז ההבדל החזותי וספירה של אלמנטים שנוספו, הוסרו ושונו
✔️ תצוגה צד לצד: השווה צילומי מסך של "לפני" ו"אחרי" ממש ליד תמונת ה"הבדלים" המודגשת
✔️ רשימת שינויים ב-DOM ו-CSS: ציינו במדויק את האלמנטים שהשתנו. אין עוד צורך לנחש מדוע פיקסל זז - ראו את השינויים ברמת הקוד כמו צבע, גודל גופן או שוליים
✔️ מאמת HTML: בדוק את הדפים הבסיסיים והנוכחיים שלך לאיתור שגיאות ניתוח
מה תתפסו:
➤ שינויי פריסה וחוסר יישור
➤ שינויי צבע ועיצוב
➤ אלמנטים חסרים או הוזזו
➤ שינויי גופן וטקסט
➤ הבדלי תמונה
איך זה עובד:
1️⃣ הגדרת בסיס חזותי: נווטו לדף שברצונכם לבדוק ולחצו על "הגדרת בסיס" בחלון הקופץ של התוסף. זהו מקור האמת שלכם.
2️⃣ כתבו קוד בביטחון: בצעו שינויים ב-CSS שלכם, עדכנו תוכן או ערכו מחדש רכיבים.
3️⃣ בדיקה מיידית של שינויים: לחצו על "השווה לנתוני בסיס". תיפתח כרטיסייה חדשה עם דוח חזותי מפורט.
4️⃣ ניתוח ההבדלים: השתמש בתצוגה זה לצד זה וברשימת השינויים שזוהו כדי לאתר כל בעיה.
5️⃣ עדכון הבסיס: מרוצים מהגרסה החדשה? פשוט לחצו שוב על "הגדר בסיס" כדי לשמור את המראה החדש כנקודת ייחוס.
טיפים מקצועיים
✨ המתן עד לסיום טעינת הדף לפני לכידת קווי בסיס
✨ השתמש בלכידת עמוד מלא לבדיקות מקיפות
✨ צלם צילומי מסך באותו גודל חלון דפדפן להשוואות מדויקות
✨ לכידת קווי בסיס כאשר התוכן יציב
✨ בדקו שינוי אחד בכל פעם לקבלת תוצאות ברורות יותר
✨ שמור קווי בסיס חשובים לפני שינויי קוד משמעותיים
✨ השווה מצבי דף דומים (אותו סטטוס כניסה של משתמש, נתונים שנטענו)
מקרי שימוש
✅ בדיקת רגרסיה חזותית: מקרה השימוש המרכזי. לאחר ביצוע שינויים, יש להריץ השוואה כדי לזהות באגים חזותיים לא מכוונים.
✅ אימות ממשק משתמש/עיצוב: הבטחת הטמעה מושלמת לפיקסלים ועקביות מותג מול מודלים של עיצוב.
✅ עיבוד מחדש של CSS: עיבוד מחדש של CSS מדור קודם ללא חשש. בדיקת הבדלים חזותית מהירה תגלה לכם מיד אם לשינויים שלכם היו תופעות לוואי בלתי צפויות.
✅ בדיקות Frontend: כלי חיוני לכל תהליך עבודה של בדיקות Frontend, המספק משוב חזותי מיידי.
למי זה בנוי?
➡️ מפתחי Frontend: זיהוי בעיות פריסה לפני ביצוע הקוד
➡️ מהנדסי QA: שפרו את בדיקות ממשק המשתמש הידניות שלכם עם שלב אימות חזותי אמין
➡️ מעצבי UI/UX: ודאו במהירות שההטמעה החיה תואמת את העיצובים שלכם
➡️ פרילנסרים וצוותים קטנים: כלי בדיקה ויזואלי ללא תג המחיר הארגוני
למה זה בולט
🖼️ עדיף על צילומי מסך ידניים: תפסיקו להתעסק עם תמונות של "לפני ואחרי" בתיקיות שולחן העבודה שלכם
📝 עקומת למידה אפסית: אם אתם יכולים לגלוש, תוכלו להשתמש בכלי הזה
שאלות נפוצות
❓כיצד הוא מזהה שינויים?
💬 הוא משתמש בגישה דו-שיטתית: השוואה פיקסל אחר פיקסל עבור ההבדל החזותי וסריקה מבנית עבור רשימת השינויים ב-DOM/CSS.
❓האם הנתונים שלי מאובטחים?
💬כן. הכל מעובד ומאוחסן באופן מקומי לחלוטין בדפדפן שלך.
❓ האם אני יכול להשתמש בו על 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.