افتح الأدوات المدمجة في متصفحك لفحص صفحة واختبارها وتشخيصها.
افتح هذا الدرس في Kodokonيخبّئ متصفحك ورشة كاملة، مثبّتة سلفًا، ومجانية، ولن يفتحها معظم الناس أبدًا. تُسمّى أدوات المطوّر، وتُختصر عادةً إلى devtools. ولفتحها، اضغط المفتاح F12، أو انقر بزر الفأرة الأيمن في أي مكان على الصفحة ثم اختر "فحص". وعلى Mac، الاختصار هو Cmd + Option + I. عندها تُفتح لوحة على جانب النافذة أو في أسفلها، وفيها عدة تبويبات.
التبويب الأول، المسمّى Elements أو Inspector بحسب متصفحك، يعرض شيفرة HTML للصفحة كما هي في هذه اللحظة في ذاكرة المتصفح. مرّر المؤشر فوق سطر: تُضيء المنطقة المقابلة في الصفحة. انقر نقرًا مزدوجًا على نصّ: يمكنك إعادة كتابته ورؤية التغيير فورًا. إنه أفضل وسيلة لفهم كيفية بناء صفحة، عبر تفكيك صفحات الآخرين.
التبويب Console هو الذي ستقضي فيه أطول وقت. فهو يعرض رسائل الخطأ بالأحمر عندما ينكسر شيء ما، ويقبل أيضًا تعليمات تكتبها مباشرة، تُنفَّذ في سياق الصفحة المفتوحة عندك. جرّبه على أي موقع: اكتب سطرًا، واضغط Enter، وراقب ما يحدث.
document.title
document.querySelectorAll("a").length
document.body.style.background = "gold"التبويب Network يجعل كل ما تعلّمته في الدروس السابقة مرئيًا. افتحه، ثم أعد تحميل الصفحة بالمفتاح F5: يظهر كل طلب في سطر خاص به، مع عنوانه وطريقته ورمز حالته وحجمه والوقت الذي استغرقه. والسطر الأحمر يشير إلى طلب فاشل. وهنا تكتشف، مثلًا، أن صورة لا تظهر لأنها تعيد الرمز 404.