extension ExtPose

בדיקה חזותית - UI Testing Inspector

CRX id

begcddgpiamjkanbgdcihlbfdmogcloo-

Description from extension meta

בדיקת רגרסיה חזותית מקומית עבור אתרים - השוו שינויי UI חזותית וגלו הבדלי DOM/CSS ללא ענן

Image from store בדיקה חזותית - UI Testing Inspector
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.

Statistics

Installs
25 history
Category
Rating
5.0 (1 votes)
Last update / version
2025-07-04 / 1.0.0
Listing languages

Links