الكود عرضة للأخطاء. من المحتمل جدًا أن ترتكب أخطاء... أوه، ما الذي أتحدث عنه؟ من المؤكد أنك سترتكب أخطاء، على الأقل إذا كنت إنسانًا، وليس روبوتًا.
لكن في المتصفح، لا يرى المستخدمون الأخطاء بشكل افتراضي. لذلك، إذا حدث خطأ ما في البرنامج النصي، فلن نرى ما هو مكسور ولا يمكننا إصلاحه.
لرؤية الأخطاء والحصول على الكثير من المعلومات المفيدة الأخرى حول البرامج النصية، تم تضمين "أدوات المطور" في المتصفحات.
يميل معظم المطورين نحو Chrome أو Firefox للتطوير لأن هذه المتصفحات تحتوي على أفضل أدوات المطورين. توفر المتصفحات الأخرى أيضًا أدوات المطورين، مع ميزات خاصة في بعض الأحيان، ولكنها عادةً ما تعمل على "اللحاق" بمتصفح Chrome أو Firefox. لذا فإن معظم المطورين لديهم متصفح "مفضل" ويتحولون إلى متصفحات أخرى إذا كانت المشكلة خاصة بالمتصفح.
أدوات المطورين قوية؛ لديهم العديد من الميزات. للبدء، سنتعلم كيفية فتحها والنظر في الأخطاء وتشغيل أوامر JavaScript.
افتح صفحة bug.html.
يوجد خطأ في كود JavaScript عليه. إنه مخفي عن أعين الزائر العادي، لذلك دعونا نفتح أدوات المطورين لرؤيته.
اضغط على F12 أو اضغط على Cmd + Opt + J إذا كنت تستخدم نظام Mac.
سيتم فتح أدوات المطور في علامة التبويب وحدة التحكم بشكل افتراضي.
يبدو إلى حد ما مثل هذا:
يعتمد المظهر الدقيق لأدوات المطورين على إصدار Chrome لديك. يتغير من وقت لآخر ولكن يجب أن يكون مشابهًا.
هنا يمكننا أن نرى رسالة الخطأ ذات اللون الأحمر. في هذه الحالة، يحتوي البرنامج النصي على أمر "lalala" غير معروف.
على اليمين، يوجد رابط قابل للنقر عليه للمصدر bug.html:12 مع رقم السطر الذي حدث فيه الخطأ.
يوجد أسفل رسالة الخطأ رمز > أزرق. إنه يمثل "سطر الأوامر" حيث يمكننا كتابة أوامر JavaScript. اضغط على Enter لتشغيلها.
الآن يمكننا أن نرى الأخطاء، وهذا يكفي للبدء. سنعود إلى أدوات المطورين لاحقًا ونغطي تصحيح الأخطاء بشكل أكثر تفصيلاً في فصل تصحيح الأخطاء في المتصفح.
إدخال متعدد الخطوط
عادةً، عندما نضع سطرًا من التعليمات البرمجية في وحدة التحكم، ثم نضغط على Enter ، يتم تنفيذه.
لإدراج عدة أسطر، اضغط على Shift + Enter . بهذه الطريقة يمكن للمرء إدخال أجزاء طويلة من تعليمات JavaScript البرمجية.
تستخدم معظم المتصفحات الأخرى F12 لفتح أدوات المطورين.
شكلها ومظهرها متشابهان تمامًا. بمجرد أن تعرف كيفية استخدام إحدى هذه الأدوات (يمكنك البدء باستخدام Chrome)، يمكنك التبديل بسهولة إلى أداة أخرى.
يعد Safari (متصفح Mac، غير مدعوم من نظام التشغيل Windows/Linux) مميزًا بعض الشيء هنا. نحتاج إلى تمكين "قائمة التطوير" أولاً.
افتح التفضيلات وانتقل إلى الجزء "خيارات متقدمة". هناك مربع اختيار في الأسفل:
الآن يمكن لـ Cmd + Opt + C تبديل وحدة التحكم. لاحظ أيضًا ظهور عنصر القائمة العلوي الجديد المسمى "تطوير". لديها العديد من الأوامر والخيارات.
تسمح لنا أدوات المطورين برؤية الأخطاء وتشغيل الأوامر وفحص المتغيرات وغير ذلك الكثير.
يمكن فتحها باستخدام F12 لمعظم المتصفحات على نظام التشغيل Windows. يحتاج Chrome لنظام التشغيل Mac إلى Cmd + Opt + J ، وSafari: Cmd + Opt + C (يجب تمكينه أولاً).
الآن لدينا البيئة جاهزة. في القسم التالي، سننتقل إلى JavaScript.