انتقل إلى محتوى الدرس

Inspecting Page Elements Live فحص عناصر الصفحة وتعديلها لحظياً

أتقن استخدام أدوات مطور المتصفح DevTools عملياً؛ من فحص وتعديل شجرة DOM ونموذج الصندوق في لوحة Elements، وتشخيص الأخطاء في Console، وتتبع طلبات الشبكة في Network، وتنقيح الكود في Sources.
3 صفوف تعليمية
تكنولوجيا الويب
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تؤدي لوحة الطرفية () وظيفتين أساسيتين لا غنى عنهما: الأولى هي عرض أخطاء التشغيل والتحذيرات مع رقم السطر البرمجي الذي سبب المشكلة، والثانية هي العمل كبيئة تنفيذ تفاعلية فورية () تكتب فيها أوامر لتجربتها مباشرة على الصفحة المفتوحة:

الصف 2 كود برمجي
JavaScript
// 1. Inspect the currently selected element in Elements panel ($0):
console.log("Selected Node:", $0);

// 2. Display structured arrays/objects as a sortable table:
console.table([
  { panel: "Elements", shortcut: "Ctrl+Shift+C" },
  { panel: "Console",  shortcut: "Ctrl+Shift+J" }
]);
الصف 3 ملاحظة هامة