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