Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Safari Web Inspector

نصيحة سريعة: استخدام مفتش الويب لتنقيح Safari المحمول

by
Read Time:5 minsLanguages:

Arabic (العربية/عربي) translation by Ayman Amar (you can also view the original English article)

بناء وتنقيح تطبيقات الويب ومواقع الويب للهواتف النقالة يمكن أن يكون متعبا. على سطح المكتب لدينا أدوات تنقيح قوية؛ ومعظم المتصفحات لديها مفتش ويب من نوع ما. ولكن ليس لدينا تلك الأدوات للأجهزة مثل iPhone وiPad...هكذا, حتى الآن!

مع الإطلاق مؤخرا ل Safari 6 و IOS 6، يمكنك الآن استخدام المفتش ويب لإنشاء تنقيح المواقع على سطح المكتب وفي Safari المحمول. أفضل للجميع؟ إنها عملية بسيطة للإعداد. اتبع هذا الشرح، وسيكون لديك بعض أدوات التنقيح القوية لأجهزة Apple المتنقلة في متناول يدك في أي وقت من الأوقات.

كانت لأدوات المطور في المتصفحات الحديثة مساعدة هائلة في بناء مواقع ويب وتطبيقات ويب. Chrome لديه أدوات المطور. Firefox؟ لديه Firebug. Safari؟ مفتش الويب. جميعا أدوات قوية في تطوير الويب.

Screenshot Safari web inspectorScreenshot Safari web inspectorScreenshot Safari web inspector

وليكن ما يكون، حتى هذه النقطة تنقيح مواقع الويب وتطبيقات الويب على الأجهزة النقالة متعب. كما Safari وChrome على حد سواء يشتغلان على محرك webkit، هناك العديد من أوجه التشابه في الطريقة التي يقوم بها متصفح الجوال وسطح المكتب بتصيير تخطيط الويب. وهكذا، معظم المصممين/المطورين يقومون ببناء وتطويع مواقعهم الإلكترونية على سطح المكتب باستخدام أحد هذه المتصفحات، على افتراض التشابه الناتج عن محرك webkit ستصير الصفحة بشكل ينفس القدر على جهاز نقال.

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

إصدارات البرامج الجديدة الخاصة ب Apple لل IOS 6 و 6 Safari جلبت العديد من ميزات أدوات التنقيح الخاصة بمتصفح سطح المكتب ونحن نعلم جميعا نحب الأجهزة النقالة. هذا الشرح سوف يري لك العملية البسيطة للحصول على الإعداد لتنقيح موقع الويب في الأجهزة النقالة باستخدام مفتش الويب الخاص ب Safari.

قبل أن نبدأ، ملاحظة بشأن التوافق: هناك قليل من الأخبار السيئة لأولئك الذين يستخدمون Windows. يمكنك فقط التنقيح باستخدام مفتش الويب البعيد على جهاز Mac. Safari 6 لنظام التشغيل windows غير متوفر. أيضا، 6 Safari فقط متوفرة لأجهزة Mac بإصدار نظام تشير OSX Lion أو أعلى.

طرق لاستخدام مفتش الويب

هناك طريقتان لاستخدام مفتش الويب في Safari المحمول:

  1. طريقة الجهاز الحقيقي: استخدام iDevice حقيقية (iPhone، iPad، إلخ) متصل بجهاز الكمبيوتر الخاص بك عن طريق USB
  2. طريقة الجهاز الوهمي: استخدام محاكي IOS، التي هي جزء من Xcode

سنقوم بتغطية كل من هذه الطرق ونتركك لاختيار الطريقة الأفضل التي تناسب حالتك.

الخطوة 1: التأكد من أنك محدث

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

طريقة الجهاز الحقيقي: لاستخدام مفتش الويب بالتزامن مع iDevice حقيقية، ستحتاج إلى ما يلي:

  • IDevice (أي فون، أي باد، أي توتش) يعمل على IOS 6
  • كابل USB
  • Safari 6
  • (Mac OSX Lion (10.7.4 أو أعلى

طريقة الجهاز الوهمي: لاستخدام مفتش الويب بالتزامن مع محاكي iOS، ستحتاج إلى ما يلي:

التحقق من إصدارات البرامج: للتحقق إذا كنت تقوم بتشغيل IOS 6 على iDevice الخاص بك، انتقل إلى "Settings > General > About" على الجهاز الخاص بك.

iOS Version Number ScreenshotiOS Version Number ScreenshotiOS Version Number Screenshot

للتأكد إذا كنت تعمل على Safari 6 اذهب إلى شريط القوائم في سفاري وانقر فوق "Safari > About Safari".

Safari Version Number Screenshot

للتأكد أنك تعمل على Lion، انقر على شعار Apple في شريط القوائم واختر "About this Mac"

OSX Version Number ScreenshotOSX Version Number ScreenshotOSX Version Number Screenshot

للتأكد من أنك تعمل على الإصدار الصحيح من Xcode، افتح Xcode واختر "Xcode > About Xcode"

Xcode Version Number ScreenshotXcode Version Number ScreenshotXcode Version Number Screenshot

الخطوة 2: تشغيل أدوات المطور

يجب عليك تمكين أدوات المطور ومفتش الويب في إصدارات سطح المكتب والجوال على سفاري.

طريقة الجهاز الحقيقي: إذا كنت تنوي استخدام جهاز حقيقي، قم بتوصيله إلى Mac الخاص بك عن طريق USB.

طريقة الجهاز الظاهري: إذا كنت تنوي استخدام محاكي iOS، افتح Xcode، ثم انقر بالزر الأيمن على أيقونته في الشريط السفلي واختر "Open Developer Tool > iOS Simulator".

Screenshot opening iOS SimulatorScreenshot opening iOS SimulatorScreenshot opening iOS Simulator

Safari الجوال: على iDevice الخاص بك الحقيقي أو في محاكي iOS انتقل إلى "Settings > Safari > Advanced" وقم بتشغيل "Web Inspector".

iOS Screenshot for turning on web inspectoriOS Screenshot for turning on web inspectoriOS Screenshot for turning on web inspector

Safari سطح المكتب: إذا لم تقم بالفعل، تأكد أن لديك أدوات المطور في Safari قيد التشغيل. سوف تعرف أنهم قيد التشغيل إذا كنت تستطيع رؤية "Develop" في شريط القائمة.

Safari 6 Developer MenuSafari 6 Developer MenuSafari 6 Developer Menu

إذا كنت لا ترى "Develop" في شريط القائمة، انتقل إلى شريط القوائم وانقر فوق "Safari > Preferences > Advanced" وحدد خانة الاختيار "Show develop menu in menu bar".

Safari 6 Advandced PreferencesSafari 6 Advandced PreferencesSafari 6 Advandced Preferences

الخطوة 3: فحص موقع الويب الخاص بك

الآن لديك إما محاكي IOS مفتوح أو iDevice الخاص بك متصل مع Mac الخاص بك عن طريق USB (أو كلاهما!)، أنت على استعداد للبدء في استخدام مفتش الويب على موقع الويب الخاص بك.

على Mac الخاص بك، افتح Safari واذهب إلى "Develop". يجب أن تشاهد الآن أي iDevices (افتراضية أو حقيقية) متصلة وتعمل مع Mac الخاص بك. في الصورة أدناه، سوف تشاهد لدى اثنين من الأجهزة في القائمة: الأول هو محاكي IOS، والآخر iPhone حقيقي متصل بجهاز Mac.

Screenshot developer menu devicesScreenshot developer menu devicesScreenshot developer menu devices

من أجل الشروع فعليا في فحص موقع على شبكة الإنترنت، يجب أن يكون لديك Safari للجوال مشغل على الجهاز وتكون إحدى علامات التبويب المفتوحة للموقع. إذا لم يكن لديك Safari للجوال مفتوح، سترى رسالة تفيد "No Inspectable Applications".

Screenshot developer menu no applicationsScreenshot developer menu no applicationsScreenshot developer menu no applications

لبدء الفحص، ببساطة أدخل عنوان URL للصفحة التي تريد فحصها في Safari للجوال وثم اختر هذا الموقع من قائمة "Develop". يمكنك البدء بفحص المواقع على iDevice الخاص بك الحقيقي أو من محاكي IOS. عندما تقوم بتحديد الصفحة، سترى غشاء أزرق على الصفحة، يشير إلى أي واحدة التي قمت بتحديدها.

Screenshot developer menu virtual deviceScreenshot developer menu virtual deviceScreenshot developer menu virtual device
Screenshot developer menu real deviceScreenshot developer menu real deviceScreenshot developer menu real device

باختيار موقع، سوف يفتح مفتش الويب الخاص ب Safari ويسمح لك ببدء فحص موقع الويب الخاص بك. هذا هو!

Screenshot iOS simulator and web inspectorScreenshot iOS simulator and web inspectorScreenshot iOS simulator and web inspector

خاتمة

الآن بعد أن لديك مفتش الويب الخاص ب Safari في متناول يدك، لديك تحكم أكبر بكثير في بناء وتنقيح تطبيقات الويب ومواقع الويب.

وإليك عينة من بعض الأشياء التي يمكنك القيام بها الآن عند تنقيح مواقع الهاتف:

  • إجراء تغييرات مباشرة على HTML و CSS.
  • انظر كيفية أداء تطبيقك/موقع الويب الخاص بك بما في ذلك رؤية التفاصيل لإحداث JavaScript وطلبات الشبكة.
  • تنقيح JaveScript باستخدام نقاط التوقف وأدوات أخرى.
  • عرض التحذيرات والأخطاء.
  • الوصول إلى وحدة التحكم.
  • البحث في DOM.
  • الوصول وعرض تخزين موقع.

لديك الأدوات، اذهب إليها وابني!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.