وضع جهاز جديد لجيل يهتم بالأجهزة الجوّالة أولاً
لقد طرحنا ميزة "وضع الجهاز"، وهي طريقة لمحاكاة الأجهزة والعمل مع التصميمات السريعة الاستجابة، قبل أكثر من عام بقليل. وقد حان الآن وقت إجراء أول ترقية رئيسية له، بدءًا من Chrome 49. ما هي الميزات الجديدة؟
أصبحت الأجهزة الجوّالة نقطة البداية في "أدوات مطوّري البرامج في Chrome". في السابق، كان خيار التطوير التلقائي هو أجهزة الكمبيوتر المكتبي، ولكننا قدّمنا طُرقًا لمحاكاة الأجهزة الجوّالة. كان يجب دائمًا تفعيل ميزة emulatiomg للهواتف الجوّالة. الآن بعد أن تجاوز استهلاك المواقع الإلكترونية المتوافقة مع الأجهزة الجوّالة استهلاك المواقع الإلكترونية المتوافقة مع أجهزة الكمبيوتر المكتبي في العديد من الأماكن، سنغيّر موقعنا في "أدوات المطوّرين" أيضًا.
الميزات الجديدة
أولاً وقبل كل شيء، تم تبسيط واجهة المستخدم وأصبحت تستهلك مساحة أقل بكثير. نتوقع أن يصبح وضع "الجهاز" الجديد هو وضع التطوير الرئيسي لمعظم المستخدمين، لذا كان من الضروري أن يكون التصميم نظيفًا و بسيطًا ويمتد إلى شريط التنقّل الرئيسي في "أدوات المطوّر".
مسطرة الأجهزة الجديدة للانتقال السريع فوق طلبات البحث عن الوسائط
بالإضافة إلى ذلك، تم وضع مساحة العرض في المنتصف وإضافة مسطرة جديدة للانتقال السريع إلى الأجهزة في أعلى الصفحة، ما يشكّل مساعدة كبيرة عند التصميم بشكل متجاوب، ويمنحك فكرة عن أحجام الأجهزة الأكثر شيوعًا.
أخيرًا، تم تجميع الكثير من الخيارات أو إخفاؤها خلف زر تبديل كلما أمكن ذلك. تسهِّل هذه الخيارات المركبة الجديدة التبديل بين الأوضاع. لتفعيل عناصر تحكّم معيّنة أو تخصيص تجربة استخدام شريط الأدوات، انقر على رمز القائمة الصغيرة التي تتضمّن ثلاث نقاط.
متجاوبة تلقائيًا
يتم الآن توسيع شريط أدوات DevTools الرئيسي على الجانب الأيسر من نافذة المتصفّح، ويشمل أهم الأدوات لمحاكاة مجموعة متنوعة من الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي. يمكنك الاختيار بين وضعَي تطوير:
- متجاوب
- جهاز محدّد
في كلا الوضعَين، يظهر إطار العرض في نافذة يمكن تغيير حجمها ضمن Chrome. ينطوي هذا الإجراء على ميزة كبيرة، وهي أنّه يمكنك تكبير نافذة المتصفّح وأدوات developer tools بالطريقة التي تريدها وعدم قفزها عند اختبار أحجام متعددة لصفحتك والرجوع إليها.
التصميم المتجاوب هو الوضع الذي تريد استخدامه أثناء التنقّل النشط للتأكّد من أنّ موقعك الإلكتروني يعمل على جميع أنواع الأجهزة، وليس فقط على بعض الأجهزة المحدّدة. في هذا الوضع، يمكن تغيير حجم مقابض التحكم بجانب مساحة العرض بحرية.
يشير خيار جهاز محدّد إلى اختيار جهاز معيّن وقفل مساحة العرض على الشاشة على حجمه. يكون ذلك مفيدًا عندما تريد إجراء التعديلات النهائية واللمسات الأخيرة على بعض الأجهزة الشائعة قبل إطلاق التطبيق. لهذا السبب، لا نعرض فقط قائمة كبيرة بكل أنواع الأجهزة في القائمة المنسدلة، بل نعرض الأجهزة الأكثر رواجًا حاليًا. إذا اخترت أحد الأجهزة، سنبذل قصارى جهدنا لجعله يعمل بطريقة مشابهة للجهاز الحقيقي: يتم محاكاة أحداث اللمس ووكيل المستخدم ومساحة العرض وحدود شاشة الجهاز وواجهة المستخدم (إذا كانت متاحة).
ميزة "تصحيح الأخطاء عن بُعد" المدمجة
لا يمكن أن تؤدي المحاكاة، حتى أفضلها، إلى تحقيق نتائج جيدة. هناك أشياء لا يمكن للأجهزة المحاكية تنفيذها اليوم، مثل:
- تأكَّد من أنّ الزر كبير بما يكفي لكي يستقر عليه إصبعك.
- اختبِر أداء موقعك الإلكتروني على هاتف أبطأ.
- تصحيح الأخطاء العشوائية والقيود في بعض الأجهزة
لاختبار كل هذه السيناريوهات بشكل كافٍ، عليك اختبارها وحلّ المشاكل فيها باستخدام الأجهزة الفعلية.
منذ فترة، يمكنك الانتقال إلى chrome://inspect وربط جهازك عبر UME وفتح جلسة تصحيح أخطاء عن بُعد من خلال أدوات المطوّرين. لقد صعدنا الآن خطوة
أخرى وأعدنا تنظيم مظهر وسلوك تصحيح الأخطاء عن بُعد، وتم تضمينه
في جوهر "أدوات المطوّر". بدلاً من الانتقال إلى صفحة أخرى، يمكنك الآن
الوصول إلى فحص الأجهزة كمربّع حوار مباشرةً ضمن القائمة الرئيسية الجديدة.
يسهِّل ذلك تضمين عملية تصحيح الأخطاء المادية في سير عملك، ما عليك سوى
توصيل هاتفك، وليس عليك الخروج من DevTools.
أماكن جديدة لبقية عناصر التحكّم السابقة في المحاكاة
بما أنّ الأجهزة الجوّالة هي الإعداد التلقائي الآن في "أدوات المطوّر"، تم نقل ميزات مثل تقييد الشبكة إلى مكانها المناسب، وفي هذه الحالة "لوحة الشبكة".
تم نقل بعض الميزات، مثل محاكاة أجهزة الاستشعار أو إعدادات العرض، مثل محاكاة وسائط الطباعة، إلى مكان ثابت في "الدرج". يمكنك العثور على كل الإضافات في القائمة الرئيسية الجديدة ضمن "مزيد من الأدوات".
ندرك أنّ هذا التغيير مهمّ وعلينا جميعًا الاعتياد عليه. يمكنك الاطّلاع على تغطية كاملة حول كل ما يتضمنه هذا الوضع في مستندات "وضع الجهاز" التي تم تعديلها مؤخرًا. يسرّنا التواصل معك على Twitter، أو يمكنك استخدام أداة تتبُّع الأخطاء إذا كنت بحاجة إلى أكثر من 140 حرفًا (نعم، حتى لطلبات الميزات).