يجب أن يكون تطوير التطبيقات المتوافقة مع الأجهزة الجوّالة سهلًا مثل تطوير التطبيقات المتوافقة مع أجهزة الكمبيوتر المكتبي. لقد عملنا جاهدين في "أدوات مطوّري البرامج" في 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، انقر على "إعادة توجيه المنفذ" لضبط المنافذ التي تريد إتاحتها، وستضيء باللون الأخضر إذا كانت جاهزة.
محاكاة الأجهزة الجوّالة
لا تتوفّر لديك دائمًا الأجهزة التي تحتاج إليها لاختبار التوافق، أليس كذلك؟ على الرغم من أنّ تصحيح الأخطاء عن بُعد على الأجهزة الفعلية سيمنحك أفضل شعور بالأداء واللمس، يمكنك الآن محاكاة العديد من خصائص الأجهزة بشكل واقعي على الكمبيوتر المكتبي، ما يوفر عليك الوقت ويجعل حلقة التكرار أسرع بكثير.
محاكاة حجم الشاشة وdevicePixelRatio و<meta viewport> من خلال محاكاة أحداث اللمس بالكامل
إذا سبق لك استخدام ميزة "مقاييس الجهاز" السابقة، ستلاحظ أنّ الميزة المتوفّرة الآن هي ترقية كبيرة. لقد عمل الفريق بجدّ لجعل محاكاة الأجهزة الجوّالة الجديدة توفّر تمثيلًا قريبًا من الواقع لما ستراه على الأجهزة الحقيقية. على سبيل المثال، تحافظ متصفّحات WebKit على خوارزمية معقدة لضبط حجم النص تلقائيًا، وفي الواقع، يحتوي كل جهاز على "عامل تقريب" محدّد لضبط حجم النص تلقائيًا والذي يتغيّر للمساعدة في الحفاظ على وضوح النص. في وضع المحاكاة، يمكنك التأكّد من تطبيق هذا السلوك والاطّلاع على النتائج.
نسبة وحدات البكسل على الجهاز
حتى الآن، كان من المستحيل تقريبًا رؤية ما يعرضه جهاز بدرجة كثافة عالية على جهاز بدرجة كثافة منخفضة. ستكيّف الآن محاكاة dPR في DevTools طريقة العرض للسماح لك بالتكبير إلى مستوى عالٍ من كثافة النقاط لكل بوصة. بالإضافة إلى ذلك، يمكنك توقّع أن تعكس window.devicePixelRatio و@media (-webkit-min-device-pixel-ratio: 2) وimage-set( url(pic2x.jpg) 2x, …) وما إلى ذلك إعداداتك، ما يتيح لك الاطّلاع على كيفية تكيّف تطبيقك، بما في ذلك تحميل مواد عرض مختلفة خاصة بكثافة البكسل.
لا تمتد محاكاة الجهاز إلى ميزات المتصفّح أو الأخطاء. وبالتالي، أثناء محاكاة نظام التشغيل iOS، سيظل WebGL يعمل ولن تواجه خطأ تكبير/تصغير الاتجاه في iOS 5. لتجربة هذا التباين، انتقِل إلى الجهاز.
محاكاة <meta viewport> (و@viewport) بشكلٍ سليم
كان اختبار سلوك width=device-width وminimum-scale:1.0 في السابق متاحًا على الأجهزة فقط. يمكنك الآن تجربة ملفات عرض مختلفة بسرعة وملاحظة كيفية عرضها.
محاكاة أحداث اللمس
سيضمن لك إعداد محاكاة شاشة اللمس تفسير نقراتك على أنّها touchstart وما إلى ذلك. بالإضافة إلى ذلك، ستتمكّن من استخدام الأحداث الاصطناعية، مثل التكبير والتصغير والتمرير والتنقّل. لاستخدام إصبعَين لتكبير المحتوى أو تصغيره، ما عليك سوى الضغط على shift مع السحب أو shift مع الانتقال للأعلى أو للأسفل. ستحصل على عرض رائع للمحتوى الذي يتم توسيعه خارج إطار العرض.
أخيرًا، تتيح لك ميزات الخداع الاحتيالي لمعرّف المستخدم (على مستوى عنوان الطلب وwindow.navigator) والموقع الجغرافي ومحاكاة الاتجاه استكشاف الوظائف الكاملة لجهازك.
الإعدادات المُعدّة مسبقًا للأجهزة
تتيح لك الإعدادات المُسبَقة للتشغيل المحاكي اختيار هاتف أو جهاز لوحي والحصول على حجم الشاشة الصحيح وdPR وUniversal Analytics المطبَّقة على هذا الجهاز، بالإضافة إلى أحداث اللمس الكاملة ومساحة العرض المحاكية أيضًا. يمكنك تجربة إعدادات مُسبَقة معيّنة أو تعديل هذه الخصائص بسهولة واحدة تلو الأخرى.
انتقِل إلى devtools.chrome.com للاطّلاع على المستندات الكاملة حول ميزة "محاكاة الأجهزة الجوّالة" باستخدام "أدوات مطوّري البرامج".
عرض توضيحي
للحصول على العرض التقديمي الكامل لجميع هذه الميزات، يمكنك الاطّلاع على محادثتي التي تبلغ مدتها 23 دقيقة من Chrome Dev Summit حول "أدوات مطوّري البرامج" للأجهزة الجوّالة: