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

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

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

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

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

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

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

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

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

1. افتح متصفح Chrome ، وقم بزيارة أي موقع ويب ترغب في فحصه.

2. انقر بزر الماوس الأيمن على أي مساحة فارغة وحدد “فحص”.

3. سترى لوحة الفحص على شاشتك.

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

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

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

1. من الزاوية اليسرى للوحة الفحص ، انقر فوق “تحديد عنصر لفحصه”.

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

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

1. من الجانب الأيسر من لوحة الفحص ، انقر فوق الخيار “تبديل شريط أدوات الجهاز”.

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

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

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

1. انقر فوق علامة القطع العمودية ثلاثية النقاط من الزاوية اليمنى من لوحة الفحص.

2. حدد موقع رصيف الفحص: على اليسار أو أدناه أو في نافذة منبثقة.

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

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

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

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

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

2. سينقلك هذا إلى علامة التبويب “عام”. حدد علامة التبويب “خيارات متقدمة” في أقصى اليمين.

3. انقر فوق مربع الاختيار بجوار “إظهار قائمة التطوير في شريط القائمة” للوصول إلى جميع الميزات المتقدمة في Safari.

4. انقر بزر الماوس الأيمن في أي مكان على موقع الويب وحدد “فحص العنصر”. سيؤدي هذا إلى فتح لوحة عناصر الفحص في Safari.

5. لمزيد من الخيارات المتقدمة ، انقر فوق علامة التبويب “تطوير” في شريط القائمة.

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

1. انقر فوق رمز “فحص” الذي يشبه نقطة الهدف في الزاوية اليسرى من لوحة الفحص.

2. استخدم المؤشر وحدد العنصر الذي ترغب في فحصه. نحن نفحص علامة العنوان لهذا المثال ، ولكن يمكنك فحص أي عنصر تريده.

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

1. من شريط القائمة العلوي ، انقر فوق الخيار “تطوير” وحدد “الدخول إلى وضع التصميم المتجاوب”.

2. حدد أي طراز جهاز تريد استخدامه لفحص صفحة الويب.

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

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

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

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

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

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

1. بمجرد دخولك إلى صفحة الويب التي تريد فحصها في متصفح Firebox ، انقر بزر الماوس الأيمن وحدد “فحص”.

2. سيؤدي هذا إلى فتح لوحة الفحص في متصفح Firefox.

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

1. انقر فوق رمز “المؤشر” الذي تراه في الزاوية اليسرى من لوحة الفحص.

2. حرك المؤشر إلى العنصر الذي ترغب في فحصه. في هذا المثال ، نقوم بفحص علامة العنوان ، ولكن يمكنك القيام بذلك بأي عنصر تريده.

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

1. من الزاوية اليمنى من لوحة الفحص ، انقر فوق رمز الهاتف الذكي.

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

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

1. انقر على علامة الحذف الأفقية ثلاثية النقاط في الزاوية اليمنى من رصيف الفحص.

2. حدد الموقع الذي ترغب في تمكينه ، وسيتم نقل لوحة الفحص وفقًا لذلك.

أسئلة مكررة

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

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

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

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

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

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

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