منوعات تقنية

كيفية فحص العناصر في Safari و Chrome و Firefox على Mac


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

ما هي عناصر الفحص؟

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

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

نصيحة: هل تبحث عن التبديل من Chrome إلى Firefox كمتصفحك الافتراضي؟ نحن نقدم كل ما تحتاجه لضمان انتقال سلس.

كيفية فحص العناصر في Google Chrome على جهاز Mac

لنبدأ بكيفية فحص العناصر في Chrome ، لأنه المتصفح الأكثر شيوعًا. الخطوات بسيطة إلى حد ما ، مما يتيح لك البدء في أي وقت من الأوقات.

كيفية فتح لوحة التفتيش في جوجل كروم

  1. افتح متصفح Chrome ، وقم بزيارة أي موقع ويب ترغب في فحصه.
  1. انقر بزر الماوس الأيمن على أي مساحة فارغة وحدد “فحص”.
زر فحص مميز على Chrome
  1. سترى لوحة الفحص على شاشتك.
افحص لوحة العناصر الموجودة على Chrome في جهاز Mac

جيد ان تعلم: لا تستخدم Chrome لنظام التشغيل Mac؟ اكتشف كيفية استخدام أداة “فحص” في Google Chrome لتشخيصات مواقع الويب على جهاز كمبيوتر يعمل بنظام Windows.

كيفية فحص عنصر معين في صفحة ويب في Google Chrome

الآن بعد أن فتحت لوحة الفحص بنجاح ، دعنا نتعلم كيفية التفاعل مع أحد العناصر.

  1. من الزاوية اليسرى للوحة الفحص ، انقر فوق “تحديد عنصر لفحصه”.
حدد عنصرًا لفحصه الخيار على Chrome
  1. حدد أي عنصر. في هذا المثال ، نحن نفحص صورة على صفحة الويب. يمكنك القيام بذلك بأي عنصر تريده. سترى مربعًا أبيض به بعض المعلومات الأساسية ، مثل نوع العنصر واسم الملف وما إلى ذلك. على الجانب الأيمن ، سترى الرمز المرتبط بالعنصر المحدد.
فحص عنصر الصورة على الكروم

كيفية عرض إصدار الجوال لموقع ويب في Google Chrome

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

كيفية تغيير موقع لوحة الفحص في جوجل كروم

  1. انقر فوق علامة القطع العمودية ثلاثية النقاط من الزاوية اليمنى من لوحة الفحص.
تخصيص زر أدوات التطوير والتحكم فيه على Chrome في جهاز Mac
  1. حدد موقع رصيف الفحص: على اليسار أو أدناه أو في نافذة منبثقة.
تسليط الضوء على إعدادات Dock Side على Chrome

كيفية فحص العناصر في Safari على Mac

يتم إيقاف تشغيل ميزة فحص العناصر افتراضيًا في Safari ، حيث إنها جزء من خيار المطور. لذلك أولاً ، نحتاج إلى تمكين “قائمة التطوير”.

نصيحة: جعل التبديل من Chrome إلى Safari كمتصفحك الافتراضي على جهاز Mac الخاص بك؟ لدينا جميع الخطوات لمساعدتك على الانتقال دون فقدان الإشارات المرجعية والإضافات المفضلة لديك والمزيد.

كيفية فتح لوحة التفتيش في Safari

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

كيفية فحص عنصر معين لصفحة ويب في Safari

  1. انقر فوق رمز “فحص” الذي يشبه نقطة الهدف في الزاوية اليسرى من لوحة الفحص.
بدء تحديد العنصر على Safari في جهاز Mac
  1. استخدم المؤشر وحدد العنصر الذي ترغب في فحصه. نحن نفحص علامة العنوان لهذا المثال ، ولكن يمكنك فحص أي عنصر تريده.
فحص علامة العنوان على أداة فحص Safari

كيفية عرض نسخة الجوال من موقع ويب في Safari

  1. من شريط القائمة العلوي ، انقر فوق الخيار “تطوير” وحدد “الدخول إلى وضع التصميم المتجاوب”.
أدخل وضع الاستجابة في أداة التفتيش Safari
  1. حدد أي طراز جهاز تريد استخدامه لفحص صفحة الويب.
Iphone View On Safari أداة التفتيش

كيفية تغيير موقع لوحة التفتيش في Safari

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

تغيير موقع حوض التفتيش في Safari

كيفية فحص العناصر في Firefox على Mac

يعد Firefox خيارًا شائعًا بين المطورين والمصممين المخضرمين عند العمل في مشاريع الويب. دعونا نرى كيف يمكننا فحص العناصر في Firefox على Mac.

نصيحة: لا تستخدم Firefox على Mac؟ تعرف على كيفية استخدام أداة “فحص العنصر” في Firefox لفحص موقع ويب على جهاز كمبيوتر يعمل بنظام Windows.

كيفية فتح لوحة الفحص في Firefox

  1. بمجرد دخولك إلى صفحة الويب التي تريد فحصها في متصفح Firebox ، انقر بزر الماوس الأيمن وحدد “فحص”.
فحص الزر الموجود في Firefox في نظام التشغيل Mac
  1. سيؤدي هذا إلى فتح لوحة الفحص في متصفح Firefox.
لوحة التفتيش على Firefox في نظام التشغيل Mac

كيفية فحص عنصر معين لصفحة ويب في Firefox

  1. انقر فوق رمز “المؤشر” الذي تراه في الزاوية اليسرى من لوحة الفحص.
اختر عنصرًا من الصفحة على Firefox
  1. حرك المؤشر إلى العنصر الذي ترغب في فحصه. في هذا المثال ، نقوم بفحص علامة العنوان ، ولكن يمكنك القيام بذلك بأي عنصر تريده.
فحص علامة العنوان على أداة فحص Firefox

كيفية عرض إصدار الجوال لموقع ويب في Firefox

  1. من الزاوية اليمنى من لوحة الفحص ، انقر فوق رمز الهاتف الذكي.
وضع التصميم المتجاوب على Firefox في جهاز Mac
  1. سيؤدي هذا إلى تحويل موقع الويب وتحميله إلى عارض على شكل هاتف ذكي. يمكنك النقر فوق مفتاح التبديل “متجاوب” لتحديد جهاز محمول من اختيارك.
زر منسدل مؤقت على Firefox في جهاز Mac

كيفية تغيير موقع لوحة الفحص في Firefox

  1. انقر على علامة الحذف الأفقية ثلاثية النقاط في الزاوية اليمنى من رصيف الفحص.
إعدادات قاعدة الفحص على Firefox في نظام Mac
  1. حدد الموقع الذي ترغب في تمكينه ، وسيتم نقل لوحة الفحص وفقًا لذلك.
موقع رصيف فحص مختلف على Firefox في جهاز Mac

أسئلة مكررة

كيف يختلف فحص العناصر عن عرض مصدر الصفحة؟

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

ما أنواع البيانات الأخرى التي يمكنني اكتشافها من خلال استخدام أداة عناصر الفحص؟

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

هل يمكن لمالكي مواقع الويب مشاهدة نشاط العنصر على مواقع الويب الخاصة بهم؟

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

رصيد الصورة: Unsplash. جميع لقطات الشاشة من قبل أباز الدين.

أباز الدين

أباز هو كاتب محترف خبير في مجال التكنولوجيا. لديه شغف قوي لجعل التكنولوجيا في متناول الأفراد غير التقنيين من خلال إنشاء محتوى سهل الفهم يساعدهم في تلبية احتياجاتهم التكنولوجية.

اشترك في نشرتنا الإخبارية!

تم تسليم أحدث دروسنا مباشرة إلى صندوق الوارد الخاص بك

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى