تتيح أداة "أدوات مطوّري البرامج في Chrome" للوكلاء التحقّق من التنسيقات المتجاوبة مع مختلف الأجهزة واختبار واجهات برمجة التطبيقات التي تستند إلى التعرّف على الموقع الجغرافي ومحاكاة سرعات مختلفة لوحدة المعالجة المركزية (CPU) أو الشبكة. استخدِم هذه الأدوات لتحديد الحالات القصوى وأتمتة عمليات التدقيق على الأداء بشكل أكثر فعالية.
تعمل ميزات المحاكاة هذه مع الأدوات الأخرى التي تتيح للوكيل التفاعل مع موقعك الإلكتروني، مثل النقر على العناصر وملء النماذج والانتقال بين الصفحات.
تشمل العناصر التي يمكنك محاكاتها ما يلي:
- نافذة العرض وسلسلة وكيل المستخدم: يمكنك محاكاة أحجام شاشة محدّدة ومعرّفات أجهزة.
- الموقع الجغرافي: يمكنك تزييف إحداثيات الموقع الجغرافي لاختبار واجهات برمجة التطبيقات التي تستند إلى الموقع الجغرافي.
- الشبكة ووحدة المعالجة المركزية (CPU): يمكنك تقليل سرعة الشبكة ووحدة المعالجة المركزية (CPU) لمحاكاة قيود الأداء في العالم الحقيقي.
- نظام الألوان: يمكنك التبديل بين الوضعَين الفاتح والداكن.
عند استخدام المحاكاة، ضَع في اعتبارك ما يلي:
- الأجهزة المتوافقة: يمكن للوكيل محاكاة أي جهاز في قائمة Puppeteer's
KnownDevices. ويشمل ذلك محاكاة أحداث اللمس لنوافذ عرض الأجهزة الجوّالة. - سلوك محرّك المتصفّح: على الرغم من أنّ الأداة تحاكي خصائص الجهاز، فإنّها لا تحاكي محرّكات المتصفّحات غير المستندة إلى Chromium أو أنظمة التشغيل المختلفة. ينفّذ الوكيل دائمًا في Chrome على نظام التشغيل الحالي.
حالات استخدام محاكاة المستخدم
يمكنك توجيه الوكيل لمحاكاة البيئات والتحقّق من واجهة المستخدم بدلاً من تغيير حجم المتصفّحات يدويًا أو تزييف عناوين IP أو تقليل سرعة الشبكات بعد كل تغيير في الرمز.
يمكنك دمج المحاكاة في عملية التطوير باستخدام مهام سير العمل هذه.
تكرار التصميم سريع الاستجابة
غالبًا ما تتغيّر أنماط التنقّل بشكل كبير بين الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي. أثناء إنشاء تطبيقك، يمكنك توجيه الوكيل للتحقّق من أنّ المكوّنات التي كتبها للتو يتم عرضها بشكل صحيح وتقدّم المحتوى نفسه على جميع الأجهزة.
مثال على الطلب:
Go to developer.chrome.com. Click the burger menu on mobile, check the top level
items and ensure the same items are available for a desktop device.
مثال على تنفيذ الوكيل: يفتح الوكيل نافذة Chrome وينتقل إلى الصفحة ويبدأ المحاكاة ويقارن العناصر في كلتا نافذتَي العرض. ويؤكّد أنّ العرض المخصّص للجهاز الجوّال (قائمة البرغر) والعرض المخصّص للكمبيوتر المكتبي (الرأس) يحتويان على الروابط المتوقّعة.
التحقّق من التفاعلات بين نوافذ العرض
تتوقف التنسيقات عن العمل أثناء التفاعلات، وليس فقط في CSS. غالبًا ما تفوت اللقطات الثابتة للشاشة الأخطاء التي تحدث عندما يلمس المستخدمون واجهة المستخدم فعليًا. يمكنك تكليف الوكيل باختبار تدفقات تفاعل محدّدة على مستوى نوافذ عرض متعدّدة لرصد الأخطاء الوظيفية المخفية.
مثال على الطلب:
Go to https://developer.chrome.com/ on mobile, tablet and desktop device, type
in a search query but don't submit it and wait for the type-ahead suggestions.
Ensure the Sign in button is visible all the time. Let me know if that's not the
case.
مثال على تنفيذ الوكيل: يكتب الوكيل طلب بحث ويغيّر حجم الشاشة إلى كل من الأحجام الثلاثة. في هذا المثال، يرصد الوكيل أنّه على الأجهزة اللوحية والجوّالة، يتوسّع شريط البحث ليملأ العرض الكامل للرأس، ما يحجب الرابط تسجيل الدخول.
إنشاء نموذج أوّلي للميزات التي تستند إلى الموقع الجغرافي
يتطلّب اختبار واجهات برمجة التطبيقات التي تستند إلى الموقع الجغرافي للمستخدم (مثل عمليات البحث عن "الأماكن القريبة مني" أو محدّدات مواقع المتاجر) عادةً إلغاء أجهزة الاستشعار يدويًا. يمكنك الآن توجيه الوكيل لتزييف مواقع جغرافية محدّدة للتحقّق من منطق الواجهة الأمامية والخلفية بسلاسة.
مثال على الطلب:
Go to chrome.dev/devtools-store-locator. Search for Berlin, and confirm there's
a store showing. Confirm there's no store for Washington. Finally, simulate
Paris as location and verify there are stores listed.
مثال على تنفيذ الوكيل: ينتقل الوكيل إلى الموقع الإلكتروني ويبحث عن برلين، ثم يُدرِج ديناميكيًا إحداثيات خطوط الطول والعرض المحدّدة لمحاكاة باريس، قبل التفاعل مع ميزة استخدام موقعي الجغرافي لضمان ظهور المتاجر الصحيحة.