راجع HTML و CSS لأي صفحة ويب
تم إنشاء موقع الويب باستخدام خطوط شفرة ، ولكن النتيجة هي صفحات محددة تحتوي على صور وفيديو وخطوط والمزيد. لتغيير أحد هذه العناصر أو معرفة ما تتكون منه ، يجب عليك العثور على سطر معين من التعليمات البرمجية التي تتحكم فيه. يمكنك القيام بذلك باستخدام أداة فحص العناصر.
لا تجعل معظم متصفحات الويب تقوم بتنزيل أداة فحص أو تثبيت وظيفة إضافية. بدلاً من ذلك ، فإنها تتيح لك النقر بزر الماوس الأيمن على عنصر الصفحة واختيار " فحص أو فحص العنصر" . ومع ذلك ، قد تكون العملية مختلفة قليلاً في متصفحك.
فحص العناصر في Chrome
تسمح لك أحدث إصدارات Google Chrome بفحص الصفحة بطرق قليلة ، وكلها تستخدم أدوات Chrome DevTools المدمجة:
- انقر بزر الماوس الأيمن على شيء ما على الصفحة (أو منطقة فارغة) واختر " فحص"
- أدخل اختصار لوحة المفاتيح Ctrl + Shift + I
- استخدم قائمة Chrome للوصول إلى الخيار أدوات> أدوات المطور
يتيح لك Chrome DevTools إجراء أشياء مثل نسخ أو تعديل خطوط HTML بسهولة أو إخفاء العناصر أو حذفها تمامًا (حتى يتم إعادة تحميل الصفحة).
بعد فتح DevTools على جانب الصفحة ، يمكنك تغيير مكانه ، وإخراجه من الصفحة ، والبحث عن جميع ملفات الصفحة ، وتحديد عناصر من الصفحة لفحص محدد ، ونسخ الملفات وعناوين URL ، وحتى تخصيص مجموعة من الإعدادات.
تفقد العناصر في فايرفوكس
مثل Chrome ، لدى Firefox عدة طرق مختلفة لفتح الأداة التي يطلق عليها المفتش:
- انقر بزر الماوس الأيمن فوق منطقة فارغة في الصفحة أو اختر عنصرًا ، ثم حدد Inspect Element
- أدخل Ctrl + Shift + T أو Ctrl + Shift + I بلوحة المفاتيح
- من قائمة Firefox ، انقر فوق مطور > مفتش
- من القائمة أدوات ، انقر فوق مطور ويب> المفتش
أثناء تحريك الماوس فوق العناصر المختلفة في Firefox ، تعثر أداة Inspector تلقائيًا على معلومات التعليمات البرمجية المصدر الخاصة بالعنصر. انقر فوق عنصر وسيتوقف "on-the-fly search" ويمكنك فحص العنصر من نافذة المفتش.
انقر بزر الماوس الأيمن فوق عنصر للعثور على كافة عناصر التحكم المعتمدة. يمكنك فعل أشياء مثل تحرير الصفحة بتنسيق HTML ، أو نسخ أو لصق شفرة HTML داخلية أو خارجية ، أو عرض خصائص DOM ، أو لقطة شاشة ، أو حذف العقدة ، أو تطبيق سمات جديدة بسهولة ، أو الاطلاع على CSS للصفحة ، وأكثر من ذلك.
تفقد العناصر في الأوبرا
يمكن لـ Opera فحص العناصر أيضًا ، باستخدام أداة DOM Inspector التي تتطابق مع Chrome. إليك كيفية الوصول إليه:
- استخدم اختصار لوحة المفاتيح Ctrl + Shift + I
- انتقل إلى القائمة> المزيد من الأدوات> إظهار قائمة مطوري البرامج ، ثم افتح القائمة من خلال القائمة> المطور> أدوات المطور
- من قائمة النقر بزر الماوس الأيمن على أي عنصر في الصفحة ، اختر فحص عنصر
فحص العناصر في Internet Explorer
توجد أداة عنصر فحص مشابهة ، تسمى أدوات المطور ، متوفرة في Internet Explorer:
- اضغط F12 على لوحة المفاتيح
- استخدم الخيار أدوات> قائمة F12 Developer (اضغط على Alt + X إذا لم تر قائمة الأدوات )
- انقر بزر الماوس الأيمن على الصفحة وانقر فوق Inspect Element
لدى IE أداة تحديد عنصر في هذه القائمة الجديدة التي تتيح لك النقر فوق أي عنصر صفحة للاطلاع على تفاصيل HTML و CSS. يمكنك أيضًا أيضًا تعطيل / تمكين تمييز العناصر بسهولة أثناء تصفح علامة التبويب مستكشف DOM .
مثل أدوات مفتشي العناصر الأخرى في المستعرضات أعلاه ، يتيح لك Internet Explorer قص العناصر ونسخها ولصقها بالإضافة إلى تحرير HTML وإضافة السمات ونسخ العناصر ذات الأنماط المرفقة والمزيد.