() translation by (you can also view the original English article)
بناء وتنقيح تطبيقات الويب ومواقع الويب للهواتف النقالة يمكن أن يكون متعبا. على سطح المكتب لدينا أدوات تنقيح قوية؛ ومعظم المتصفحات لديها مفتش ويب من نوع ما. ولكن ليس لدينا تلك الأدوات للأجهزة مثل iPhone وiPad...هكذا, حتى الآن!
مع الإطلاق مؤخرا ل Safari 6 و IOS 6، يمكنك الآن استخدام المفتش ويب لإنشاء تنقيح المواقع على سطح المكتب وفي Safari المحمول. أفضل للجميع؟ إنها عملية بسيطة للإعداد. اتبع هذا الشرح، وسيكون لديك بعض أدوات التنقيح القوية لأجهزة Apple المتنقلة في متناول يدك في أي وقت من الأوقات.
كانت لأدوات المطور في المتصفحات الحديثة مساعدة هائلة في بناء مواقع ويب وتطبيقات ويب. Chrome لديه أدوات المطور. Firefox؟ لديه Firebug. Safari؟ مفتش الويب. جميعا أدوات قوية في تطوير الويب.
وليكن ما يكون، حتى هذه النقطة تنقيح مواقع الويب وتطبيقات الويب على الأجهزة النقالة متعب. كما Safari وChrome على حد سواء يشتغلان على محرك webkit، هناك العديد من أوجه التشابه في الطريقة التي يقوم بها متصفح الجوال وسطح المكتب بتصيير تخطيط الويب. وهكذا، معظم المصممين/المطورين يقومون ببناء وتطويع مواقعهم الإلكترونية على سطح المكتب باستخدام أحد هذه المتصفحات، على افتراض التشابه الناتج عن محرك webkit ستصير الصفحة بشكل ينفس القدر على جهاز نقال.
ومع ذلك، منصتي سطح المكتب والهاتف المحمول مختلفة تماما. لديهم اختلاف في قدرات الذاكرة، إمكانات الأداء، أجهزة الإدخال، وشبكة الاتصال. ولذلك فقد أصبح من الضروري أن أدوات التنقيح الخاصة بالمصمم للأجهزة النقالة أن تصبح أكثر أداء وتطابق نظرائهم على سطح المكتب.
إصدارات البرامج الجديدة الخاصة ب Apple لل IOS 6 و 6 Safari جلبت العديد من ميزات أدوات التنقيح الخاصة بمتصفح سطح المكتب ونحن نعلم جميعا نحب الأجهزة النقالة. هذا الشرح سوف يري لك العملية البسيطة للحصول على الإعداد لتنقيح موقع الويب في الأجهزة النقالة باستخدام مفتش الويب الخاص ب Safari.
قبل أن نبدأ، ملاحظة بشأن التوافق: هناك قليل من الأخبار السيئة لأولئك الذين يستخدمون Windows. يمكنك فقط التنقيح باستخدام مفتش الويب البعيد على جهاز Mac. Safari 6 لنظام التشغيل windows غير متوفر. أيضا، 6 Safari فقط متوفرة لأجهزة Mac بإصدار نظام تشير OSX Lion أو أعلى.
طرق لاستخدام مفتش الويب
هناك طريقتان لاستخدام مفتش الويب في Safari المحمول:
- طريقة الجهاز الحقيقي: استخدام iDevice حقيقية (iPhone، iPad، إلخ) متصل بجهاز الكمبيوتر الخاص بك عن طريق USB
- طريقة الجهاز الوهمي: استخدام محاكي IOS، التي هي جزء من Xcode
سنقوم بتغطية كل من هذه الطرق ونتركك لاختيار الطريقة الأفضل التي تناسب حالتك.
الخطوة 1: التأكد من أنك محدث
لأن تنقيح الأجهزة النقالة بمفتش الويب ميزة جديدة، سيكون عليك التأكد من أن لديك أحدث البرامج.
طريقة الجهاز الحقيقي: لاستخدام مفتش الويب بالتزامن مع iDevice حقيقية، ستحتاج إلى ما يلي:
- IDevice (أي فون، أي باد، أي توتش) يعمل على IOS 6
- كابل USB
- Safari 6
- (Mac OSX Lion (10.7.4 أو أعلى
طريقة الجهاز الوهمي: لاستخدام مفتش الويب بالتزامن مع محاكي iOS، ستحتاج إلى ما يلي:
- Safari 6
- (Mac OSX Lion (10.7.4 أو أعلى
- 4.5 Xcode مع IOS 6 SDK (متوفر في المتجر)
التحقق من إصدارات البرامج: للتحقق إذا كنت تقوم بتشغيل IOS 6 على iDevice الخاص بك، انتقل إلى "Settings > General > About" على الجهاز الخاص بك.
للتأكد إذا كنت تعمل على Safari 6 اذهب إلى شريط القوائم في سفاري وانقر فوق "Safari > About Safari".
للتأكد أنك تعمل على Lion، انقر على شعار Apple في شريط القوائم واختر "About this Mac"
للتأكد من أنك تعمل على الإصدار الصحيح من Xcode، افتح Xcode واختر "Xcode > About Xcode"
الخطوة 2: تشغيل أدوات المطور
يجب عليك تمكين أدوات المطور ومفتش الويب في إصدارات سطح المكتب والجوال على سفاري.
طريقة الجهاز الحقيقي: إذا كنت تنوي استخدام جهاز حقيقي، قم بتوصيله إلى Mac الخاص بك عن طريق USB.
طريقة الجهاز الظاهري: إذا كنت تنوي استخدام محاكي iOS، افتح Xcode، ثم انقر بالزر الأيمن على أيقونته في الشريط السفلي واختر "Open Developer Tool > iOS Simulator".
Safari الجوال: على iDevice الخاص بك الحقيقي أو في محاكي iOS انتقل إلى "Settings > Safari > Advanced" وقم بتشغيل "Web Inspector".
Safari سطح المكتب: إذا لم تقم بالفعل، تأكد أن لديك أدوات المطور في Safari قيد التشغيل. سوف تعرف أنهم قيد التشغيل إذا كنت تستطيع رؤية "Develop" في شريط القائمة.
إذا كنت لا ترى "Develop" في شريط القائمة، انتقل إلى شريط القوائم وانقر فوق "Safari > Preferences > Advanced" وحدد خانة الاختيار "Show develop menu in menu bar".
الخطوة 3: فحص موقع الويب الخاص بك
الآن لديك إما محاكي IOS مفتوح أو iDevice الخاص بك متصل مع Mac الخاص بك عن طريق USB (أو كلاهما!)، أنت على استعداد للبدء في استخدام مفتش الويب على موقع الويب الخاص بك.
على Mac الخاص بك، افتح Safari واذهب إلى "Develop". يجب أن تشاهد الآن أي iDevices (افتراضية أو حقيقية) متصلة وتعمل مع Mac الخاص بك. في الصورة أدناه، سوف تشاهد لدى اثنين من الأجهزة في القائمة: الأول هو محاكي IOS، والآخر iPhone حقيقي متصل بجهاز Mac.
من أجل الشروع فعليا في فحص موقع على شبكة الإنترنت، يجب أن يكون لديك Safari للجوال مشغل على الجهاز وتكون إحدى علامات التبويب المفتوحة للموقع. إذا لم يكن لديك Safari للجوال مفتوح، سترى رسالة تفيد "No Inspectable Applications".
لبدء الفحص، ببساطة أدخل عنوان URL للصفحة التي تريد فحصها في Safari للجوال وثم اختر هذا الموقع من قائمة "Develop". يمكنك البدء بفحص المواقع على iDevice الخاص بك الحقيقي أو من محاكي IOS. عندما تقوم بتحديد الصفحة، سترى غشاء أزرق على الصفحة، يشير إلى أي واحدة التي قمت بتحديدها.
باختيار موقع، سوف يفتح مفتش الويب الخاص ب Safari ويسمح لك ببدء فحص موقع الويب الخاص بك. هذا هو!
خاتمة
الآن بعد أن لديك مفتش الويب الخاص ب Safari في متناول يدك، لديك تحكم أكبر بكثير في بناء وتنقيح تطبيقات الويب ومواقع الويب.
وإليك عينة من بعض الأشياء التي يمكنك القيام بها الآن عند تنقيح مواقع الهاتف:
- إجراء تغييرات مباشرة على HTML و CSS.
- انظر كيفية أداء تطبيقك/موقع الويب الخاص بك بما في ذلك رؤية التفاصيل لإحداث JavaScript وطلبات الشبكة.
- تنقيح JaveScript باستخدام نقاط التوقف وأدوات أخرى.
- عرض التحذيرات والأخطاء.
- الوصول إلى وحدة التحكم.
- البحث في DOM.
- الوصول وعرض تخزين موقع.
لديك الأدوات، اذهب إليها وابني!
