تتيح "أدوات مطوّري البرامج في Chrome" للوكلاء التحقّق من التصاميم المتجاوبة واختبار واجهات برمجة التطبيقات التي تستخدم الموقع الجغرافي ومحاكاة سرعات مختلفة لوحدة المعالجة المركزية أو الشبكة. استخدِم هذه الأدوات لتحديد حالات الاستخدام الحدّية وأتمتة عمليات تدقيق الأداء بشكل أكثر فعالية.
تعمل ميزات المحاكاة هذه مع أدوات أخرى تتيح للوكيل التفاعل مع موقعك الإلكتروني، مثل النقر على العناصر وملء النماذج والتنقّل بين الصفحات.
تشمل العناصر التي يمكنك محاكاتها ما يلي:
- نافذة العرض ووكيل المستخدم: محاكاة أحجام شاشات ومعرّفات أجهزة معيّنة
- تحديد الموقع الجغرافي: يمكنك محاكاة إحداثيات الموقع الجغرافي لاختبار واجهات برمجة التطبيقات التي تستخدم الموقع الجغرافي.
- الشبكة ووحدة المعالجة المركزية: يمكنك الحدّ من سرعة الشبكة ووحدة المعالجة المركزية لمحاكاة القيود المفروضة على الأداء في العالم الحقيقي.
- نظام الألوان: يمكنك التبديل بين الوضعَين الفاتح والداكن.
عند استخدام المحاكاة، يجب مراعاة ما يلي:
- الأجهزة المتوافقة: يمكن للوكيل محاكاة أي جهاز في قائمة
KnownDevicesالخاصة بأداة Puppeteer. ويشمل ذلك محاكاة أحداث اللمس لمنافذ العرض على الأجهزة الجوّالة. - سلوك محرك المتصفّح: على الرغم من أنّ الأداة تحاكي خصائص الجهاز، إلا أنّها لا تحاكي محركات المتصفّحات غير المستندة إلى 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.
مثال على تنفيذ الوكيل: ينتقل الوكيل إلى الموقع الإلكتروني، ويبحث عن برلين، ثم يُدرج ديناميكيًا إحداثيات خطوط الطول والعرض المحدّدة لمحاكاة باريس، وذلك قبل التفاعل مع ميزة استخدام موقعي الجغرافي لضمان ظهور المتاجر الصحيحة.