كيفية فحص عنصر في متصفحات Chrome وFirefox وSafari وEdge

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

افحص عنصرًا في متصفح Chrome

1. افتح الصفحة في متصفح Chrome وحدد موقع النص أو الصورة أو الرابط أو عنصر التحكم الذي تريد فحصه.
2. انقر بزر الماوس الأيمن على هذا العنصر وحدد "فحص" .
3. في لوحة العناصر، ابحث عن الصف المحدد في شجرة DOM. تعرض لوحة الأنماط قواعد CSS التي تؤثر على تلك العقدة.

أو استخدم قائمة النقاط الثلاث في متصفح كروم: المزيد من الأدوات > أدوات المطوّرين . اختصارات لوحة المفاتيح: F12 أو Ctrl+Shift+I (ويندوز/لينكس)، و Command+Option+I (ماك). اضغط Ctrl+Shift+C أو Command+Shift+C لفتح Elements في وضع اختيار الصفحة.

افحص عنصرًا في متصفح مايكروسوفت إيدج

1. افتح الصفحة في متصفح إيدج وانقر بزر الماوس الأيمن على العنصر المحدد.
2. حدد "فحص" . سيفتح متصفح Edge أدوات المطورين مع تحديد العقدة المقابلة في العناصر.

أو حدد الإعدادات والمزيد (...) > المزيد من الأدوات > أدوات المطورين . اضغط F12 أو Ctrl+Shift+I (ويندوز/لينكس)، و Command+Option+I (ماك)، لإعادة فتح لوحة أدوات المطورين الأخيرة. قد تختلف الاختصارات المخصصة.

افحص عنصرًا في متصفح فايرفوكس

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

افتح أدوات المطورين باستخدام F12 أو Ctrl+Shift+I (ويندوز/لينكس)، أو Command+Option+I (ماك). يفتح Ctrl+Shift+C أو Command+Option+C نافذة الفحص. إذا استبدل موقع ويب قائمة النقر بزر الماوس الأيمن، فاستخدم اختصارًا أو قائمة فايرفوكس.

افحص عنصرًا في متصفح سفاري

1. في متصفح سفاري على نظام ماك، اختر سفاري > الإعدادات من شريط القوائم.
2. افتح الإعدادات المتقدمة وحدد خيار "إظهار الميزات لمطوري الويب ". في متصفح سفاري 16 والإصدارات الأقدم، يُسمى هذا الإعداد " إظهار قائمة التطوير في شريط القوائم" .
3. ارجع إلى الصفحة، ثم انقر بزر الماوس الأيمن أو انقر مع الضغط على مفتاح التحكم على العنصر وحدد " فحص العنصر" .

يُحدد مُفتش الويب العنصر الذي تم النقر عليه. يمكنك أيضًا اختيار "تطوير" > "إظهار مُفتش الويب" أو الضغط على Option+Command+I لفتحه للصفحة الحالية. تنطبق هذه الخطوات على متصفح Safari على نظام Mac.

ماذا تفعل بعد فتح اللوحة؟

ابحث عن عنصر HTML المطابق

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

مراجعة أو اختبار CSS

استخدم لوحة الأنماط (المسماة "القواعد" في فايرفوكس) لمعرفة تعريفات CSS المُطبقة ومصدرها. قم بإلغاء تحديد تعريف أو تعديل قيمة لمعاينة التغييرات في التخطيط أو اللون أو التباعد أو الطباعة. هذا لا يُعيد كتابة ملفات الموقع أو يُغير ما يراه الزوار الآخرون.

تحقق من تصميم متجاوب

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

اختصارات لوحة المفاتيح في لمحة

قد تختلف الاختصارات باختلاف نظام التشغيل أو إصدار المتصفح أو الإعدادات المخصصة. إذا لم يعمل أحدها، فاستخدم قائمة المتصفح أو أمر قائمة السياق.

هل يتم حفظ التغييرات في "فحص العنصر"؟

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

للحصول على التفاصيل الحالية، راجع دليل أدوات مطوري Chrome الرسمي ، واختصارات Firefox ، ودليل إعداد وفحص Safari من Apple ، ونظرة عامة على Microsoft Edge .