"Inspect Element" هي أداة مطور في متصفح Firefox يمكنك استخدامها لتتبع كود HTML على أي صفحة ويب. يمكن تحرير أوراق أنماط HTML و CSS لصفحة الويب باستخدام "Inspect Element". يمكنك محاولة تحرير صفحة كيفما تشاء واستعادتها إلى ما كانت عليه بمجرد إعادة تحميل صفحة الويب التي تم تحريرها.
خطوة
جزء 1 من 2: فحص العناصر
الخطوة 1. قم بتحديث Firefox (اختياري)
من المحتمل أنك لن تتمكن من الوصول إلى الميزات التي تمت مناقشتها في هذه المقالة إذا كنت تستخدم إصدارًا أقدم من Firefox. سيتم تثبيت التحديث تلقائيًا عندما تتحقق من إصدار Firefox الذي تستخدمه.
لا تحتوي Firefox 9 والإصدارات السابقة على أداة "فحص العنصر" على الإطلاق
الخطوة 2. انقر بزر الماوس الأيمن فوق أي عنصر صفحة ويب
يمكنك النقر بزر الماوس الأيمن فوق أي صورة أو نص أو خلفية أو عنصر. إذا كان الماوس الخاص بك يحتوي على زر واحد فقط ، فسيؤدي الجمع بين النقر بزر الماوس الأيسر ومفتاح التحكم إلى النقر بزر الماوس الأيمن.
الخطوة الثالثة. انقر على "فحص العنصر" من القائمة المنسدلة
سيظهر شريط أدوات أسفل النافذة. ستظهر أيضًا لوحة أسفل شريط الأدوات وتعرض رمز HTML على الصفحة النشطة.
الخطوة 4. تعرف على أشرطة الأدوات واللوحات الموجودة
عند استخدام "فحص العنصر" ، سيتم فتح العديد من اللوحات أسفل نافذة المتصفح. يصف ما يلي أسماء ووظائف أشرطة الأدوات واللوحات في "فحص العنصر":
- في الصف العلوي يوجد شريط أدوات مربع الأدوات. هناك العديد من الأدوات التي يمكن العثور عليها هنا ، لكننا سنركز على زر المفتش الموجود على اليسار. تأكد من أن هذا الزر نشط (يشار إليه بلون الزر الذي يتحول إلى اللون الأزرق عندما يكون نشطًا) خلال هذا الدليل.
- أسفل ذلك ، يوجد سطر من فتات تنقل عناصر HTML التي تشير إلى موقع العنصر المحدد حاليًا.
- يُظهر الجزء الموجود أسفل مطالبات التنقل شجرة HTML أو "طريقة عرض العلامات" لصفحة الويب. سيتم تمييز HTML للعنصر المحدد وتوسيطه في هذا الجزء.
- يعرض الجزء الأيمن ورقة أنماط CSS لصفحة الويب الحالية.
الخطوة 5. حدد عنصرًا آخر
عندما يكون شريط الأدوات مفتوحًا ، يمكنك بسهولة تحديد العناصر الأخرى. هناك ثلاث طرق للقيام بذلك:
- قم بالتمرير فوق سطر HTML لتحديد العنصر المحدد (تتطلب هذه الميزة Firefox 34+). انقر فوق HTML لتحديد هذا العنصر.
- انقر فوق أداة "Select Element" في الزاوية اليسرى من شريط الأدوات: فهي تحتوي على رمز على شكل مؤشر أعلى المربع. حرك المؤشر على صفحة الويب لتمييز عنصر وانقر لتحديده.
الخطوة 6. تتبع كود HTML
انقر في أي مكان في جزء HTML. استخدم مفتاحي الاتجاه الأيمن والأيسر على لوحة المفاتيح للانتقال من رمز إلى رمز (تتطلب هذه الميزة Firefox 39+). هذه الطريقة مفيدة لاختيار العناصر الصغيرة جدًا بحيث لا يمكن تحديدها بالمؤشر.
- يشير رمز HTML المظلل إلى العناصر التي لم يتم عرضها على الصفحة. العناصر المضمنة في هذا هي التعليقات ، مثل العقد ، والعناصر الأخرى المخفية بواسطة خاصية عرض CSS.
- انقر فوق السهم الموجود على يسار المربع لإظهار المحتوى أو إخفائه. لعرض المحتوى بالكامل ، اضغط باستمرار على alt="صورة" أو الخيار أثناء النقر فوق السهم.
الخطوة 7. حدد موقع العنصر
ابحث عن حقل البحث (رمز على شكل حلقة) في الزاوية اليمنى القصوى من صف فتات الخبز. انقر لتوسيع حقل البحث واكتب رمز HTML الذي تريد البحث عنه. أثناء الكتابة ، سيتم عرض نافذة منبثقة تعرض نتائج البحث المتطابقة. انقر فوق عنصر من نتائج البحث وقم بالتمرير في جزء HTML إلى الرمز الذي تبحث عنه.
جزء 2 من 2: تحرير HTML
الخطوة 1. أعد تحميل الصفحة للبدء من جديد
إذا كنت مستخدمًا جديدًا لأدوات تطوير مواقع الويب ، فاعلم أنك لا تقوم بإجراء تغييرات دائمة على الصفحات التي تقوم بتحريرها. تظهر تعديلاتك على شاشتك فقط حتى تعيد تحميل الصفحة أو تغلقها. لا تتردد في التجربة حتى لو كنت لا تعرف ما سيحدث.
الخطوة 2. انقر نقرًا مزدوجًا فوق HTML للتحرير
انقر نقرًا مزدوجًا فوق HTML مضمّن. اكتب النص الجديد واضغط على Enter لحفظ التغييرات.
الخطوة الثالثة. انقر مع الاستمرار فوق الأداة في مسار التنقل لإظهار المزيد من الخيارات
لاحظ أن شريط أدوات مسار التنقل يقع بين شجرة HTML وشريط الأدوات أعلاها. انقر مع الاستمرار فوق أداة في هذا الصف لفتح المزيد من القوائم. يوجد أدناه تلميح للخيارات المتاحة (غير شاملة):
- يسمح لك "التحرير بتنسيق HTML" بتحرير كل محتوى HTML من شجرة HTML مباشرةً بدلاً من تحرير كل سطر.
- ينسخ "نسخ HTML الداخلي" المحتوى بالكامل داخل العقدة ، بينما ينسخ "نسخ HTML الخارجي" المحتويات والعقد (مثل أو
- يعرض خيار "Paste →" عدة خيارات لمكان لصق النسخة ، مثل قبل العقدة أو بعد الطفل الأول للعقدة.
- : hover،: active، and: focus يغير مظهر العنصر عندما يتفاعل المستخدم. يتم تحديد التأثيرات المتغيرة من ورقة أنماط CSS (قابلة للتحرير من اللوحة الموجودة على اليمين).
الخطوة 4. السحب والإفلات
لإعادة ترتيب العناصر في التعليمات البرمجية ، انقر مع الاستمرار فوق HTML حتى يظهر خط منقط. حرك الخط لأعلى ولأسفل الشجرة وحرر زر الماوس عندما يكون الخط في المكان الذي تريده.
تتطلب هذه الميزة Firefox 39 والإصدارات الأحدث
الخطوة 5. أغلق شريط أدوات المطور
لإغلاق نافذة Inspect Element بالكامل ، انقر فوق الزر X في الزاوية اليمنى العليا من شريط الأدوات الموجود أعلى لوحة CSS.
نصائح
- يمكنك أيضًا فتح شريط الأدوات من خيارات القائمة أعلى النافذة:
- نظام التشغيل Windows: Firefox → Web Developer → Toggle Tools
- نظام التشغيل Mac أو Linux: الأدوات ← مطور الويب ← تبديل الأدوات
- يحتوي Firefox 40 على خيار إخفاء لوحة CSS بحيث يكون لديك مساحة أكبر لتحرير HTML. ابحث عن رمز السهم في الزاوية اليمنى القصوى من صف فتات الخبز وعلى يمين حقل البحث. انقر فوق هذا الرمز لإخفاء لوحة CSS وانقر مرة أخرى لإظهارها.
- يمكنك أيضًا تحرير لوحات CSS ، لكنها غير مدرجة في هذه المقالة. يمكنك العثور على تعليمات حول تحرير كود CSS على الإنترنت.
