يجب أن يكون تطوير الأجهزة المحمولة بالسهولة نفسها التي يتم تطويرها لسطح المكتب. لقد عملنا بجدّ في "أدوات مطوري البرامج في Chrome" لتسهيل الأمر عليك، وقد حان الوقت للكشف عن بعض الميزات الجديدة التي من شأنها أن تحسّن عملية تطوير الويب على الأجهزة الجوّالة بشكل كبير. أولاً، تصحيح الأخطاء عن بُعد وسنكشف بعد ذلك عن المحاكاة المناسبة للأجهزة الجوّالة.
تسجيل محتوى شاشة جهازك على سطح المكتب
حتى الآن، أثناء إجراء تصحيح الأخطاء عن بُعد، اضطررت إلى التبديل بين جهازك وأدوات مطوّري البرامج. يعرض تطبيق Screencast شاشة أجهزتك مباشرةً إلى جانب أدوات مطوّري البرامج. عندما نرى ذلك أمر جيد، لكن التفاعل معه يكون أفضل:
- تتم ترجمة النقرات على التسجيل الرقمي للشاشة إلى نقرات ويتم تنشيط أحداث اللمس المناسبة على الجهاز.
- فحص العنصر على جهازك باستخدام مؤشر سطح المكتب
- اكتب من لوحة مفاتيح سطح المكتب--يتم إرسال جميع ضغطات المفاتيح إلى الجهاز. موفر للوقت عند الكتابة بإبهامك.
- مرِّر الصفحة من خلال تمريرها بسرعة باستخدام المؤشر أو التمرير ببساطة على لوحة اللمس في الكمبيوتر المحمول.
تعرض المستندات الكاملة حول التسجيل الرقمي للشاشة كل هذا وأكثر، مثل إرسال إيماءة تكبير أو تصغير بإصبعَين. يجب توفُّر الإصدار التجريبي من Chrome على نظام التشغيل Android (m32).
تصحيح الأخطاء عن بُعد بسهولة
قبل 18 شهرًا، قدّم Chrome ميزة تصحيح الأخطاء عن بُعد المناسبة لمتصفحات WebKit، لكن إذا جربت هذه الميزة في ذلك الحين، كان عليك معالجة عملية تنزيل حزمة SDK لنظام التشغيل Android بحجم 400 ميغابايت، مع إضافة البرنامج الثنائي adb إلى $PATH وبعض تعويذات سطر الأوامر السحرية.
أمّا الآن، فيسرّنا الإعلان عن أنّه بإمكانك نسيان كل ذلك. يستطيع Chrome الآن اكتشاف أجهزة USB المتصلة والتحدّث إليها في الأصل. لقد تم تطبيق بروتوكول adb مباشرةً على USB في متصفِّح Chrome، حتى يمكنك الانتقال بسهولة إلى Menu > Tools > Inspect Devices وبدء جلسة تصحيح الأخطاء عن بُعد على الفور.
ويعمل ذلك بشكل رائع على جميع الأنظمة الأساسية، بما في ذلك نظام التشغيل Chrome، ولكن يُرجى ملاحظة أنّه على نظام التشغيل Windows، يجب أولاً تثبيت برامج تشغيل USB مناسبة للتحدّث إلى الجهاز. إذا لم تجرِّب ذلك من قبل، ستحتاج أيضًا إلى تفعيل تصحيح أخطاء USB على الجهاز وتأكيد استخدام الإصدار التجريبي من Chrome لنظام Android. الاطّلاع على المستندات الكاملة
نقل البيانات للمشاريع المحلية
يَتِمُّ الْآنْ تَفْعِيلْ جِهَازِ الْإِنْذَارْ عَلَى Localhost:8000، وَلَكِنْ يَبْدُو أَنَّهُ لَا يُمْكِنْ تَوْصِيلْ إِمْكَانِيَّةِ الْهَاتِفْ لِلْوُصُولْ إِلَى هَذَا الْإِجْرَاءْ. لذلك، أضفنا إعادة توجيه المنفذ مباشرةً إلى سير عمل تصحيح الأخطاء عن بُعد. أصبح من السهل الآن العمل على جميع مشاريعك بدون الحاجة إلى إجراء ذلك. في about:inspect، انقر على منفذ "إعادة توجيه المنفذ" لضبط المنافذ التي تريد توفيرها، وستظهر المنافذ باللون الأخضر إذا كانت جاهزة.
محاكاة الأجهزة الجوّالة
لا تتوفّر لديك دائمًا الأجهزة التي تحتاج إلى اختبار التوافق عليها، أليس كذلك؟ يمنحك تصحيح الأخطاء عن بُعد في الأجهزة الحقيقية تجربة أفضل عند تحسين الأداء واللمس، ولكن يمكنك الآن محاكاة العديد من خصائص الأجهزة على سطح المكتب بشكل واقعي، ما يوفّر عليك الوقت ويزيد من سرعة تكرار التكرار.
يمكنك محاكاة حجم الشاشة وجهاز PixelRatio و<meta viewport> من خلال محاكاة حدث اللمس الكامل.
إذا سبق لك الاطّلاع على ميزة "مقاييس الجهاز" السابقة، يعني هذا أنّها ترقية كبيرة. وقد بذل الفريق جهدًا كبيرًا لجعل محاكاة الأجهزة الجوّالة الجديدة تعرض ما ستراه على الأجهزة الحقيقية تقريبًا. على سبيل المثال، تحتفظ متصفحات WebKit بخوارزمية معقّدة لتغيير حجم النص تلقائيًا، وفي الحقيقة يحتوي كل جهاز على "عامل خطأ" محدد لتغيير حجم النص تلقائيًا للمساعدة في جعل النص مقروءًا. في وضع المحاكاة، يمكنك التأكّد من تطبيق هذا السلوك والاطّلاع على النتائج.
نسبة وحدات البكسل للجهاز
حتى الآن، كان من المستحيل تقريبًا رؤية ما يعرضه جهاز منخفض النقاط لكل بوصة على جهاز يتضمن عددًا منخفضًا من النقاط لكل بوصة. والآن، ستعدّل محاكاة DPR في "أدوات مطوّري البرامج" طريقة العرض لتتيح لك تكبير سيناريو DPI في طريقة العرض. بالإضافة إلى ذلك، يمكنك أن تتوقّع ظهور الإعداد window.devicePixelRatio و@media (-webkit-min-device-pixel-ratio: 2) وimage-set( url(pic2x.jpg) 2x, …) وما إلى ذلك، ما يتيح لك الاطّلاع على كيفية تكيُّف تطبيقك، بما في ذلك تحميل مواد عرض مختلفة خاصة بنقطة لكل بوصة.
لا تشمل محاكاة الجهاز كل ميزات المتصفّح أو الأخطاء. لذا، أثناء محاكاة نظام التشغيل iOS، سيستمر تشغيل WebGL ولن تواجه خطأ التكبير/التصغير باتجاه 5 iOS. وللتحقّق من التباين، يجب الانتقال إلى الجهاز.
المحاكاة الصحيحة لـ <meta viewport> (و@viewport)
كان اختبار سلوك الإجراءَين "width=device-width" و"minimum-scale:1.0" في السابق لعبة مخصّصة للأجهزة فقط. يمكنك الآن تجربة إطارات عرض مختلفة بسرعة وملاحظة طريقة عرضها.
محاكاة حدث اللمس
سيضمن إعداد محاكاة شاشة اللمس تفسير نقراتك على أنّها touchstart وهكذا. بالإضافة إلى ذلك، ستعمل الأحداث الاصطناعية، مثل التكبير/التصغير والتمرير والتحريك. للتكبير أو التصغير بإصبعَين، ما عليك سوى shift+سحب أو shift+التمرير لتكبير المحتوى. وستحصل على عرض رائع لمقياس المحتوى الذي يتجاوز إطار العرض.
وأخيرًا، وضع الاستعداد لانتحال هوية وكيل المستخدم (في كل من عنوان الطلب ومستوى window.navigator) ومحاكاة رصد الموقع الجغرافي والاتجاهات تتيح لك استكشاف وظائف جهازك بالكامل.
الإعدادات المسبقة للجهاز
تتيح لك الإعدادات المسبقة للمحاكاة اختيار هاتف أو جهاز لوحي والحصول على حجم الشاشة وdPR وUA الصحيح المطبَّق على هذا الجهاز، بالإضافة إلى أحداث اللمس الكاملة وإطار العرض الذي تتم محاكاته أيضًا. يمكنك تجربة إعدادات مسبقة معينة أو تعديل هذه الخصائص بسهولة واحدة تلو الأخرى.
انتقِل إلى devtools.chrome.com للاطّلاع على المستندات الكاملة حول ميزة "محاكاة الأجهزة الجوّالة" باستخدام "أدوات مطوّري البرامج"
عرض توضيحي
للحصول على العرض التوضيحي الكامل لجميع هذه الميزات بشكل عملي، اطّلع على محادثتي التي مدّتها 23 دقيقة من مؤتمر Chrome Dev Summit عن "أدوات مطوري البرامج" للأجهزة الجوّالة: