Opening DevTools and Shortcutsطرق فتح أدوات المطور واختصاراتها
أتقن استخدام أدوات مطور المتصفح DevTools عملياً؛ من فحص وتعديل شجرة DOM ونموذج الصندوق في لوحة Elements، وتشخيص الأخطاء في Console، وتتبع طلبات الشبكة في Network، وتنقيح الكود في Sources.
2 صفوف تعليمية
تكنولوجيا الويب
0 مشاهدة
شرح صفوف ومحتوى الفقرة
الصف 1
شرح توضيحي
تعرض لوحة العناصر ( وتُسمى في فايرفوكس) شجرة الحية الموجودة في ذاكرة المتصفح حالياً، وليس مجرد النص الخام القادم من الخادم. فإذا أضاف كود جافاسكريبت نافذة منبثقة أو غيّر نص زر، ستشاهد التغيير فوراً داخل هذه اللوحة.
التعديل اللحظي للعقد: يمكنك النقر المزدوج على أي نص أو سمة لتعديلها فوراً، أو سحب العناصر لإعادة ترتيبها، أو الضغط على حرف لإخفاء العنصر المحدد وإظهاره.
الفرق بين عرض المصدر وفحص العنصر: خيار عرض مصدر الصفحة () يعرض النص الأصلي الخام كما أرسله الخادم، بينما فحص العنصر () يعرض شجرة الحية بعد تنفيذ السكربتات.
