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