اختبار متزامن للأجهزة الجوّالة على جميع الأجهزة

مقدمة

إذا كنت مطوّر برامج على الويب يستهدف الويب متعدد الأجهزة، من المحتمل أن تحتاج إلى اختبار مواقعك الإلكترونية وتطبيقاتك على الويب عبر عدد من الأجهزة وعمليات الضبط المختلفة. ويمكن أن يساعد الاختبار المتزامن في هذا الشأن، وهو طريقة فعّالة لإجراء التفاعل نفسه تلقائيًا عبر عدد من الأجهزة والمتصفّحات في الوقت نفسه.

يمكن أن يساعد الاختبار المتزامن في حل مشكلتين تستغرقان وقتًا طويلاً بشكل خاص:

• مزامنة جميع أجهزتك باستمرار مع عنوان URL الذي تريد اختباره: ويستغرق تحميلها يدويًا على كل جهاز وقتًا أطول ويسهل تفويت أي تراجعات.
• مزامنة التفاعلات: فإمكانية تحميل صفحة أمر مهم جدًا للاختبار المرئي، ولكن في ما يتعلق باختبار التفاعل، من المفترض أن ترغب أيضًا في أن تتمكن من مزامنة عمليات التمرير والنقرات والسلوكيات الأخرى.

لحسن الحظ إذا كانت لديك إمكانية الوصول إلى بعض أجهزتك المستهدفة، فهناك عدد من الأدوات التي تهدف إلى تحسين التدفق من سطح المكتب إلى أجهزتك المحمولة. في هذه المقالة، سنلقي نظرة على: Ghostlab ومعاينة عن بُعد وAdobe Edge Inspect وGrunt.

الأدوات

GhostLab (نظام التشغيل Mac)

Ghostlab هو تطبيق تجاري لنظام التشغيل Mac (بسعر 49 دولار أمريكي) تم تصميمه لمزامنة الاختبارات على المواقع الإلكترونية وتطبيقات الويب على أجهزة متعددة. باستخدام الحد الأدنى من الإعداد، تسمح لك بمزامنة:

• النقرات
• التنقّل
• مرات الانتقال
• إدخال النموذج (مثل نماذج تسجيل الدخول والاشتراك)

وهذا يجعل اختبار تجربة المستخدم الشاملة على أجهزة متعددة أمرًا سهلاً للغاية. بعد فتح صفحتك في متصفح على أجهزتك، تؤدي أي تغييرات في التنقل (بما في ذلك عمليات إعادة التحميل) إلى إعادة تحميل أي أجهزة أخرى متصلة على الفور. يدعم Ghostlab مشاهدة الأدلة المحلية، لذلك تتم عملية التحديث هذه أيضًا عند حفظ تعديلات على الملفات المحلية، مع الحفاظ على مزامنة كل شيء دائمًا.

لقد وجدتُ عملية إعداد Ghostlab بدون عناء. للبدء، يمكنك تنزيل الإصدار التجريبي (أو الإصدار الكامل) وتثبيته وتشغيله إذا كنت في حالة مزاجية للشراء). بعد ذلك، عليك توصيل جهاز Mac والأجهزة التي تريد اختبارها بشبكة Wi-Fi نفسها كي يمكن العثور عليها.

بعد تشغيل Ghostlab، يمكنك النقر على علامة "+" لإضافة عنوان URL للاختبار أو سحبه من شريط العناوين في المتصفح. وبدلاً من ذلك، اسحب المجلد المحلي الذي تريد اختباره إلى النافذة الرئيسية وسيتم إنشاء إدخال جديد للموقع. بالنسبة إلى هذه المقالة، أنا أختبر إصدارًا مباشرًا من http://html5rocks.com. هل هذا صحيح؟ ؛ )

يمكنك بعد ذلك بدء خادم Ghostlab جديد من خلال النقر على زر التشغيل ">" بجانب اسم موقعك الإلكتروني. يؤدّي ذلك إلى بدء خادم جديد، متوفّرًا على عنوان IP خاص بشبكتك (على سبيل المثال، http://192.168.21.43:8080).

.

هنا، ربطت جهاز Nexus 4 ووجهت Chrome لنظام Android إلى عنوان IP الذي قدمه لي Ghostlab. هذا كل ما عليّ فعله. لا يتطلب Ghostlab تثبيت برنامج مخصّص لكل جهاز مثل بعض الحلول الأخرى، ما يعني أنّه يمكنك بدء الاختبار بسرعة أكبر.

ستتم إضافة أي جهاز تتصل به بعنوان URL على Ghostlab إلى قائمة البرامج المتصلة في الشريط الجانبي على يسار نافذة Ghostlab الرئيسية. يؤدي النقر نقرًا مزدوجًا على اسم الجهاز إلى عرض تفاصيل إضافية مثل حجم الشاشة ونظام التشغيل وما إلى ذلك. من المفترض أن تتمكن الآن من اختبار التنقل ومزامنة النقرات! مرحى.

وبإمكان Ghostlab أيضًا عرض بعض الإحصاءات عن الأجهزة المتصلة، مثل سلسلة Universal Analytics وعرض إطار العرض وارتفاعه وكثافة وحدات البكسل على الجهاز ونسبة العرض إلى الارتفاع وغيرها. في أي وقت، يمكنك تغيير عنوان URL الأساسي الذي تقوم بفحصه يدويًا من خلال النقر على ترس الإعدادات بجانب الإدخال. سيؤدي ذلك إلى فتح نافذة تهيئة تبدو على النحو التالي:

يمكنني الآن اختيار أحد أجهزتي المتصلة الأخرى، والنقر على روابط مختلفة حول HTML5Rocks وتتم مزامنة التنقل على كلٍ من متصفِّح Chrome على جهاز سطح المكتب (حيث أدخلت عنوان URL نفسه على Ghostlab) وكذلك على جميع أجهزتي.

والأفضل من ذلك أن Ghostlab لديها خيار يسمح لك بإنشاء خادم وكيل لجميع الروابط التي تمر عبر الشبكة، بحيث بدلًا من النقر على http://192.168.21.43:8080/www.html5rocks.com الانتقال إلى www.html5rocks.com/en/performance (على سبيل المثال)، قد يقسم هذا الرابط ليجري تحديثًاhttp://192.168.21.43/www.htm5rocks.com/en/performance

لتفعيل الميزة، ضَع علامة في المربّع "تحميل كل المحتوى من خلال Ghostlab" ضمن علامة التبويب "تحميل المحتوى".

أمثلة واقعية:

يستطيع Ghostlab تحميل أي عدد من المواقع الإلكترونية أو النوافذ عبر أي متصفِّح متوافق. لا يتيح لك ذلك اختبار موقعك بدرجات دقة مختلفة فحسب، بل يتيح لك أيضًا اختبار طريقة عمل الرمز على المتصفحات والأنظمة الأساسية المختلفة. رائع!

يسمح لك Ghostlab بتهيئة الإعداد الخاص بمساحة عمل المشروع التي تعاينها، ويمكنك تحديد ما إذا كنت تريد مشاهدة التغييرات التي تم إجراؤها على الدليل وتحديثها عند اكتشافها. وهذا يعني أن التغييرات تؤدي إلى إعادة تحميل جميع البرامج المتصلة. ما مِن عمليات إعادة تحميل يدوية بعد الآن.

قد تتساءل عن الأشياء الأخرى التي يمكن أن يساعدك فيها Ghostlab. وعلى الرغم من أنه ليس سكّينًا من الجيش السويسري، إلا أنه يتيح أيضًا فحص الرموز عن بُعد على الأجهزة المتصلة. من خلال الواجهة الرئيسية، من المفترض أن يؤدي النقر مرّتين على أي اسم جهاز إلى إظهار خيار "تصحيح الأخطاء" الذي سيطلق إصدارًا من أدوات مطوري البرامج في Chrome يمكنك استخدامه.

يجعل Ghostlab هذا ممكنًا من خلال أداة فحص الويب البعيدة من Weinre، والتي تتيح لك تصحيح أخطاء النصوص البرمجية وتعديل الأنماط على الأجهزة المتصلة. مثلما الحال مع تجربة تصحيح الأخطاء عن بُعد المتاحة لمتصفِّح Chrome لنظام التشغيل Android، يمكنك اختيار العناصر وتشغيل بعض ملفات تحليل الأداء وتصحيح الأخطاء البرمجية.

بشكل عام، لقد أعجبت بمدى سرعتي في استخدام Ghostlab للاختبار اليومي عبر الأجهزة. إذا كنت موظفًا مستقلاً، فقد تجد تكلفة الترخيص التجاري مرتفعة قليلاً (انظر أدناه لمزيد من الخيارات). بالرغم من ذلك، يسعدني أن أوصي باستخدام Ghostlab

Adobe Edge Inspect CC (Mac وWindows)

.

أداة Adobe Edge Inspect هي جزء من حزمة اشتراك Adobe Creative Cloud، ولكنها تتوفّر أيضًا لفترة تجريبية مجانية. وهي تتيح لك قيادة العديد من أجهزة iOS وAndroid باستخدام Chrome (عبر إضافة Edge Inspector على Chrome)، وبالتالي إذا كنت تتصفّح لعنوان URL معيّنًا، تظل جميع أجهزتك المتصلة متزامنة.

للإعداد، عليك أولاً الاشتراك للحصول على حساب على Adobe Creative Cloud أو تسجيل الدخول إلى حساب حالي إذا كان لديك حساب حالي. بعد ذلك، عليك تنزيل وتثبيت Edge Inspect من Adobe.com (متاح لنظامي التشغيل Mac وWindows في الوقت الحالي، ولكن ليس لنظام Linux - عذرًا). تجدُر الإشارة إلى أنّ docs "فحص Edge" مفيدة في الاحتفاظ بها.

بعد تثبيت الإضافة، ستحتاج إلى الحصول على الإضافة فحص Edge لمتصفّح Chrome كي تتمكن من مزامنة التصفّح بين الأجهزة المتصلة.

ستحتاج أيضًا إلى تثبيت عميل Edge Inspect على كل جهاز تريد مزامنة الإجراءات معه. ولحسن الحظ، فإن العملاء متاحون لأجهزة iOS وAndroid وKindle.

بعد إجراء عملية التركيب، يمكننا الآن البدء في فحص صفحاتنا. ويجب التأكّد من أنّ جميع أجهزتك متصلة بالشبكة نفسها لكي تنجح هذه الطريقة.

شغِّل فحص Edge على سطح المكتب، وإضافة "فحص Edge" في Chrome ثم التطبيق على أجهزتك (انظر أدناه):

يمكننا الآن الانتقال إلى موقع مثل HTML5Rocks.com على سطح المكتب وسينتقل جهازنا الجوّال تلقائيًا إلى الصفحة نفسها.

في الإضافة، سترى الآن أيضًا جهازك مدرجًا مع رمز <> إلى جانبه كما في لقطة الشاشة أدناه. سيؤدي النقر فوق هذا إلى تشغيل مثيل من Weinre يسمح لك بفحص صفحتك وتصحيح الأخطاء فيها.

بجانبها، ويمكن استخدامها لتشغيل برنامج تصحيح الأخطاء في Weinre width="800" height="549">

Weinre هو عارض ووحدة تحكم DOM، ويفتقر إلى ميزات من "أدوات مطوري البرامج في Chrome" مثل "تصحيح أخطاء JavaScript" وإنشاء المواصفات وميزة العرض الإعلاني بدون انقطاع في الشبكة. وعلى الرغم من أنها الحد الأدنى من أدوات المطوّرين، فهي مفيدة لفحص حالة DOM وJavaScript بشكل سليم.

وتتيح إضافة Edge Inspect يقوم أيضًا بإنشاء لقطات شاشة من الأجهزة المتصلة بسهولة. وهذه الميزة مفيدة لاختبار التصميم أو مجرد الحصول على لقطات لصفحتك لمشاركتها مع الآخرين.

بالنسبة إلى المطوّرين الذين يدفعون رسومًا مقابل الترجمة والشرح، تُعدّ أداة Edge Inspect حلًا رائعًا. ومع ذلك، فإنّه يأتي مع بعض التنبيهات، مثل أنّ كل جهاز يتطلب تثبيت عميل مخصّص وإجراء إعداد إضافي صغير قد لا تعثر عليه مع بدائل مثل Ghostlab.

المعاينة عن بُعد (Mac وWindows وLinux)

المعاينة عن بُعد هي أداة مفتوحة المصدر تستضيف صفحات HTML والمحتوى الذي يمكنك عرضه على أجهزة متعددة.

تنفّذ المعاينة عن بُعد استدعاء XHR على فترة كل 1100 ملي ثانية للتحقّق مما إذا كان عنوان URL في ملف الإعداد قد تغير أم لا. وفي حال العثور على هذه الروابط، يحدّث النص البرمجي سمة src لإطار iframe الذي تم تحميله في الصفحة لكل جهاز، ما يؤدي إلى تحميل الصفحة إليه. إذا لم يتم اكتشاف أي تغييرات، فسيستمر النص البرمجي في الاستطلاع حتى يتم إجراء تغيير.

هذه الطريقة رائعة في ربط الأجهزة ببعضها وتغيير عنوان URL بسهولة على جميع الأجهزة. للبدء:

1. يمكنك تنزيل المعاينة عن بُعد ونقل جميع ملفاتها إلى خادم يمكن الوصول إليه محليًا. يمكن أن يكون Dropbox أو خادم تطوير أو أي شيء آخر.
2. حمِّل "index.html" من عملية التنزيل هذه على جميع الأجهزة المستهدفة. سيتم استخدام هذه الصفحة كبرنامج تشغيل وتحميل الصفحة التي تريد اختبارها باستخدام iframe.
3. عدِّل "url.txt" (مضمّنًا في التنزيل ويظهر الآن على الخادم) مع عنوان URL الذي تريد معاينته. احفظ هذا الملف.
4. ستلاحظ المعاينة عن بُعد أنّ ملف url.txt قد تغيّر، وستتم إعادة تحميل جميع الأجهزة المتصلة لتحميل عنوان URL.

وبالرغم من أن "المعاينة عن بُعد" مجانية وفعّالة، إلا أنَّها تعمل كحل منخفض الدقة.

Grunt + Live-Reload (لأجهزة Mac وWindows وLinux)

Grunt (وYeoman) هي أدوات سطر الأوامر تُستخدم لتنفيذ المشاريع وإنشاءها على الواجهة الأمامية. إذا كنت تستخدم هذه الأدوات بالفعل ولديك إعداد إعادة التحميل المباشر، فمن السهل تحديث سير العمل لتفعيل الاختبار على جميع الأجهزة حيث يؤدي كل تغيير تجريه في المحرر إلى إعادة التحميل في أي من الأجهزة التي فتحت تطبيقك المحلي عليها.

من المحتمل أنك اعتدت على استخدام grunt server. عند تشغيله من الدليل الجذري لمشروعك، يراقب أي تغييرات تطرأ على الملفات المصدر ويقوم بتحديث نافذة المتصفح تلقائيًا. وهذا بفضل مهمة مراقبة-المشتركة التي نقوم بتشغيلها كجزء من الخادم.

إذا كنت قد استخدمت يومان لتعزيز مشروعك، فهو قد أنشأ ملف Gruntfile يتضمّن كل ما تحتاجه للحصول على تحديث مباشر للعمل على جهاز سطح المكتب. ولتعمل على جميع الأجهزة، ما عليك سوى تغيير موقع واحد، وهو hostname (على جهاز الكمبيوتر المكتبي). من المفترض أن يكون الجدول مدرَجًا ضمن connect. إذا لاحظت أنّه تم ضبط hostname على localhost، ما عليك سوى تغييره إلى 0.0.0.0. شغِّل بعد ذلك grunt server، وكالعادة، ستظهر نافذة جديدة تعرض معاينة لصفحتك. من المحتمل أن يبدو عنوان URL على النحو التالي: http://localhost:9000 (المنفذ 9000).

شغِّل علامة تبويب أو وحدة طرفية جديدة واستخدِم ipconfig | grep inet لاكتشاف عنوان IP الداخلي للنظام. قد يبدو مثل 192.168.32.20. الخطوة الأخيرة هي فتح متصفح مثل Chrome على الجهاز الذي تريد مزامنة عمليات إعادة التحميل المباشرة معه، وكتابة عنوان IP هذا متبوعًا برقم المنفذ السابق، أي 192.169.32.20:9000.

أكملت هذه الخطوة. من المفترض أن تؤدي الآن أي تعديلات تُجريها على الملفات المصدر على الكمبيوتر المكتبي إلى إعادة تحميل الصفحة في كلّ من المتصفّح المتوافق مع أجهزة الكمبيوتر المكتبي والمتصفح على جهازك الجوّال. رائع!

يتوفر في يومان أيضًا منشئ محتوى للأجهزة الجوّالة يجعل إعداد سير العمل هذا أمرًا سهلاً.

إيميت لايف ستايل

Emmet LiveStyle هو مكوّن إضافي للمتصفّح والمحرر يتيح تعديل CSS المباشر لسير عمل التطوير. وهي متاحة حاليًا للمتصفحات Chrome وSafari وSublime Text، وتتيح التعديل ثنائي الاتجاه (محرر إلى المتصفح والعكس صحيح).

لا يفرض Emmet LiveStyle إعادة تحميل كاملة للمتصفّح عند إجراء التغييرات، ولكنه ينفّذ تعديلات CSS من خلال بروتوكول تصحيح الأخطاء عن بُعد في "أدوات مطوّري البرامج". ويعني ذلك أنّه يمكنك الاطّلاع على التغييرات التي تم إجراؤها في أداة تعديل أجهزة الكمبيوتر المكتبي في أي إصدار مرتبط من Chrome، سواء كان ذلك في متصفّح Chrome على الكمبيوتر المكتبي أو في Chrome لنظام Android.

يضم LiveStyle ما يسميه "وضع العرض المتعدد"، وهو مثالي لاختبار التصميمات سريعة الاستجابة وتغييرها عبر النوافذ والأجهزة. في وضع العرض المتعدّد، يتم تطبيق جميع تحديثات المحرّر على جميع النوافذ، تمامًا مثل تحديثات "أدوات مطوري البرامج" للصفحة نفسها.

بعد تثبيت حزمة LiveStyle، يمكنك بدء تعديل CSS المباشر باتّباع الخطوات التالية:

1. تشغيل Sublime Text وفتح ملف CSS في مشروع
2. شغِّل متصفِّح Chrome وانتقِل إلى الصفحة التي تتضمّن خدمة مقارنة الأسعار (CSS) التي تريد تعديلها.
3. افتح "أدوات مطوري البرامج" وانتقِل إلى لوحة LiveStyle. حدد الخيار "تفعيل LiveStyle". ملاحظة: يجب إبقاء أدوات مطوّري البرامج مفتوحة أثناء جلسة التعديل المباشر لكل نافذة حتى يتم تطبيق تعديلات النمط.
4. عند تمكين ذلك، ستُعرض قائمة بأوراق الأنماط على اليمين وقائمة بملفات المحرر على اليمين. حدد ملف المحرر المطلوب ربطه بالمتصفح. أكملت هذه الخطوة. ميكروفون كبير على حاملة

الآن سيتم تحديث قائمة ملفات المحرر تلقائيًا عند تعديل الملفات أو إنشائها أو فتحها أو إغلاقها.

الاستنتاجات

لا يزال الاختبار على جميع الأجهزة مجالاً جديدًا وسريع التغيُّر مع العديد من الأجهزة المنافسة الجديدة التي لا تزال قيد التطوير. لحسن الحظ هناك عدد من الأدوات المجانية والتجارية لضمان التوافق والاختبار عبر عدد كبير من مجموعات الأجهزة.

ومع ذلك، لا يزال هناك الكثير من إمكانات التحسين في هذا المجال وننصحك بالتفكير في كيفية تحسين أدوات الاختبار عبر الأجهزة بشكل أكبر. ويمكنك استخدام أي شيء يقلل من وقت الإعداد ويحسّن سير العمل عبر الأجهزة.

المشاكل

ربما كانت أكبر المشكلات التي واجهتها أثناء الاختبار باستخدام هذه الأدوات هي الأجهزة التي تنام بانتظام. هذا ليس صفقة رابحة، ولكنه يزعج بعد فترة. من الجيد أن تضبط أجهزتك على وضع عدم النوم كحل بديل قدر الإمكان، إلا أنّ هذا الأمر قد يستنزف شحن بطارية جهازك ما لم تكن متصلاً دائمًا بمصدر طاقة.

لم أواجه شخصيًا أي مشاكل كبيرة في GhostLab. عند بلوغ 49 دولارًا أمريكيًا، قد يجد البعض السعر مرتفعًا بعض الشيء؛ ومع ذلك، تذكّر ما إذا كنت تستخدمه بشكل منتظم سيدفع البعض مقابل ذلك بشكل أكبر أو أقل. من أجمل ما في الأمر أنه لم يكن هناك داعٍ للقلق بشأن تثبيت وإدارة عميل لكل جهاز مستهدف. كان عنوان URL نفسه يعمل في كل مكان.

باستخدام Adobe Edge Inspect، وجدت أن عليّ تثبيت برامج محددة واستخدامها على كل جهاز أمرًا مملاً بعض الشيء. وجدت أيضًا أنه لم يتم تحديث جميع العملاء المتصلين باستمرار، مما يعني أنه كان علي أن أفعل ذلك بنفسي من إضافة Chrome. تتطلّب هذه الطريقة أيضًا اشتراكًا في Creative Cloud، وتقتصر على تحميل المواقع الإلكترونية من البرنامج وليس في متصفّح محدّد على أجهزتك. وقد يحدّ ذلك من قدرتك على إجراء الاختبارات بدقة.

عملت ميزة "المعاينة عن بُعد" على النحو الموضّح في الإعلان، ولكنها خفيفة جدًا. وهذا يعني أنّك لست بحاجة إلى خيار أدوات أكثر تقدّمًا باستثناء تحديث موقعك الإلكتروني على جميع الأجهزة. على سبيل المثال، لن تقوم بمزامنة النقرات أو عمليات التمرير.

اقتراحات

إذا كنت تبحث عن حل مجاني من عدّة منصات للبدء، أنصحك باستخدام "المعاينة عن بُعد". بالنسبة إلى أولئك الذين يعملون في شركة يبحثون عن حل مدفوع الأجر، كان GhostLab ممتازًا باستمرار من حيث تجربتي ولكنه لا يتوفر إلا لنظام التشغيل Mac. بالنسبة إلى مستخدمي Windows، فإن Adobe Edge Inspect هو أفضل اتصال بالنسبة لك، ومع وجود بعض المراوغة، ينجز المهمة بشكل عام.

ويُعدّ Grunt وLiveStyle ممتازَين أيضًا لتعزيز أداء البث المباشر أثناء مرحلة التطوير.