CRX id
begcddgpiamjkanbgdcihlbfdmogcloo
begcddgpiamjkanbgdcihlbfdmogcloo
Description from extension meta
قارن التغييرات البصرية قبل وبعد تحديث صفحات الويب مع تقارير مفصلة وتحليل DOM.
Image from store
Description from store
متعب من الفحص اليدوي للأخطاء البصرية بعد كل تغيير في الكود؟ UI Testing Inspector هو أداتك الموثوقة لفحص الاختلافات البصرية مع تحليل DOM.
لماذا الاستخدام؟
⚡️ محلي وخاص 100%: جميع لقطات الشاشة وبيانات المقارنة تبقى على جهاز الكمبيوتر الخاص بك. لا خدمات سحابية، لا مشاركة للبيانات
⚡️ حلقة تغذية راجعة فورية: قم بتثبيت الامتداد، أنشئ خط الأساس، قم بتغييرات الكود وشاهد الاختلافات فوراً. مثالي لاختبارات الانحدار السريعة
⚡️ كشف مثالي على مستوى البكسل: اصطد حتى أصغر التغييرات البصرية التي قد تفوت العين البشرية
الميزات الرئيسية:
🔸 خط الأساس بنقرة واحدة: التقط حالة "قبل" لأي صفحة ويب بنقرة واحدة
🔸 اختلاف بصري مثالي على مستوى البكسل: احصل على تقرير واضح يظهر خط الأساس والحالة الحالية وصورة تبرز الاختلافات الدقيقة
🔸 فحص العناصر: تجاوز المفتش الأساسي. اطلع ليس فقط على الكود، ولكن أيضاً على ما تغير في DOM و CSS
🔸 التقاط الصفحة الكاملة ونافذة العرض: اختر بين التقاط المنطقة المرئية أو الصفحة القابلة للتمرير بالكامل
🔸 تاريخ التقارير: احفظ واستعرض حتى 15 تقرير مقارنة سابق
🔸 المظاهر الفاتحة والداكنة: للعرض المريح، نهاراً أو ليلاً
داخل التقرير المفصل
🔍 بعد كل مقارنة، تحصل على تقرير شامل يعطيك الصورة الكاملة:
✔️ الملخص: نسبة الاختلافات البصرية وعدد العناصر المضافة والمحذوفة والمعدلة
✔️ العرض جنباً إلى جنب: قارن لقطات شاشة "قبل" و"بعد" بجانب صورة "الاختلافات" المبرزة
✔️ قائمة تغييرات DOM و CSS: حدد بدقة أي العناصر تغيرت. لا مزيد من التخمين لماذا تحرك البكسل - اطلع على تغييرات مستوى الكود مثل اللون وحجم الخط أو الهامش
✔️ التفاصيل التقنية: تحليل شامل لتغييرات التخطيط وتعديلات المحتوى والتحديثات الهيكلية
ما ستلتقطه:
➤ انزياحات التخطيط وأخطاء المحاذاة
➤ تغييرات الألوان والأنماط
➤ العناصر المفقودة أو المنقولة
➤ تعديلات الخط والنص
➤ اختلافات الصور
كيف يعمل:
1️⃣ تعيين خط الأساس البصري: انتقل إلى الصفحة التي تريد اختبارها وانقر على "تعيين خط الأساس" في نافذة الامتداد المنبثقة. هذا هو مصدر حقيقتك.
2️⃣ البرمجة بثقة: قم بإجراء تغييرات على CSS الخاص بك، حدث المحتوى أو أعد هيكلة المكونات.
3️⃣ فحص التغييرات فوراً: انقر على "مقارنة مع خط الأساس". ستفتح علامة تبويب جديدة مع تقرير بصري مفصل.
4️⃣ تحليل الاختلافات: استخدم العرض جنباً إلى جنب وقائمة التغييرات المكتشفة لتحديد كل مشكلة.
5️⃣ تحديث خط الأساس: راضٍ عن النسخة الجديدة؟ ببساطة انقر على "تعيين خط الأساس" مرة أخرى لحفظ المظهر الجديد كمرجع لك.
نصائح مهنية
✨ انتظر حتى تكتمل تحميل الصفحات قبل التقاط خطوط الأساس
✨ استخدم التقاط الصفحة الكاملة للاختبار الشامل
✨ التقط لقطات الشاشة بنفس حجم نافذة المتصفح للمقارنات الدقيقة
✨ التقط خطوط الأساس عندما يكون المحتوى مستقراً
✨ اختبر تغييراً واحداً في كل مرة للحصول على نتائج اختلاف أوضح
✨ احفظ خطوط الأساس المهمة قبل إعادة هيكلة الكود الكبيرة
✨ قارن حالات الصفحة المتشابهة (نفس حالة تسجيل دخول المستخدم، البيانات المحملة)
حالات الاستخدام
✅ اختبار الانحدار البصري: حالة الاستخدام الرئيسية. بعد إجراء التغييرات، شغل مقارنة لالتقاط أي أخطاء بصرية غير مقصودة.
✅ التحقق من UI/التصميم: ضمان التطبيق المثالي على مستوى البكسل واتساق العلامة التجارية ضد نماذج التصميم.
✅ إعادة هيكلة CSS: أعد هيكلة CSS القديم بلا خوف. اختبار الاختلاف البصري السريع سيخبرك فوراً إذا كانت تغييراتك لها آثار جانبية غير متوقعة.
✅ اختبار الواجهة الأمامية: أداة أساسية لأي سير عمل اختبار الواجهة الأمامية، توفر تغذية راجعة بصرية فورية.
مصمم لمن؟
➡️ مطوري الواجهة الأمامية: اصطد مشاكل التخطيط قبل تأكيد كودك
➡️ مهندسي ضمان الجودة: حسن اختبارات UI اليدوية الخاصة بك بخطوة تحقق بصري موثوقة
➡️ مصممي UI/UX: تحقق بسرعة من أن التطبيق المباشر يطابق تصاميمك
➡️ المستقلون والفرق الصغيرة: أداة اختبار بصري بدون سعر المؤسسة
لماذا يبرز
🖼️ أفضل من لقطات الشاشة اليدوية: توقف عن التلاعب بصور قبل وبعد في مجلدات سطح المكتب
📝 منحنى تعلم صفر: إذا كنت تستطيع التصفح، يمكنك استخدام هذه الأداة
الأسئلة الشائعة
❓كيف يكتشف التغييرات؟
💬 يستخدم نهج منهجي مزدوج: مقارنة بكسل بالبكسل للاختلاف البصري والمسح الهيكلي لقائمة تغييرات 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.