قبل كتابة تعليمات برمجية أكثر تعقيدًا، دعونا نتحدث عن تصحيح الأخطاء.
تصحيح الأخطاء هو عملية البحث عن الأخطاء وإصلاحها داخل البرنامج النصي. تدعم جميع المتصفحات الحديثة ومعظم البيئات الأخرى أدوات تصحيح الأخطاء - وهي واجهة مستخدم خاصة في أدوات المطورين تجعل تصحيح الأخطاء أسهل بكثير. كما يسمح أيضًا بتتبع الكود خطوة بخطوة لمعرفة ما يحدث بالضبط.
سنستخدم Chrome هنا، لأنه يحتوي على ميزات كافية، ومعظم المتصفحات الأخرى لديها عملية مماثلة.
قد يبدو إصدار Chrome الخاص بك مختلفًا بعض الشيء، ولكن يجب أن يكون واضحًا ما هو موجود هناك.
افتح صفحة المثال في Chrome.
قم بتشغيل أدوات المطورين باستخدام F12 (Mac: Cmd + Opt + I ).
حدد لوحة Sources .
إليك ما يجب عليك رؤيته إذا كنت تفعل ذلك للمرة الأولى:
زر التبديل يفتح علامة التبويب مع الملفات.
دعنا ننقر عليه ونحدد hello.js في العرض الشجري. إليك ما يجب أن يظهر:
تتكون لوحة المصادر من 3 أجزاء:
يسرد جزء File Navigator ملفات HTML وJavaScript وCSS والملفات الأخرى، بما في ذلك الصور المرفقة بالصفحة. قد تظهر ملحقات Chrome هنا أيضًا.
يعرض جزء محرر التعليمات البرمجية التعليمات البرمجية المصدر.
جزء تصحيح أخطاء JavaScript مخصص لتصحيح الأخطاء، وسنستكشفه قريبًا.
الآن يمكنك النقر فوق نفس أداة التبديل مرة أخرى لإخفاء قائمة الموارد وإعطاء الكود بعض المساحة.
إذا ضغطنا على Esc ، فسيتم فتح وحدة التحكم بالأسفل. يمكننا كتابة الأوامر هناك والضغط على Enter للتنفيذ.
بعد تنفيذ البيان، تظهر نتائجه أدناه.
على سبيل المثال، هنا 1+2 ينتج عنه 3 ، بينما استدعاء الدالة hello("debugger") لا يُرجع شيئًا، وبالتالي فإن النتيجة undefined :
دعونا نتفحص ما يحدث داخل كود صفحة المثال. في hello.js ، انقر فوق السطر رقم 4 . نعم، مباشرة على الرقم 4 ، وليس على الرمز.
تهانينا! لقد قمت بتعيين نقطة توقف. الرجاء أيضًا النقر على رقم السطر 8 .
ينبغي أن يبدو هكذا (اللون الأزرق هو المكان الذي يجب النقر فوقه):
نقطة التوقف هي نقطة من التعليمات البرمجية حيث يقوم مصحح الأخطاء بإيقاف تنفيذ JavaScript تلقائيًا.
أثناء إيقاف الكود مؤقتًا، يمكننا فحص المتغيرات الحالية وتنفيذ الأوامر في وحدة التحكم وما إلى ذلك. وبعبارة أخرى، يمكننا تصحيح الأخطاء.
يمكننا دائمًا العثور على قائمة بنقاط التوقف في اللوحة اليمنى. وهذا مفيد عندما يكون لدينا العديد من نقاط التوقف في ملفات مختلفة. يسمح لنا بما يلي:
انتقل بسرعة إلى نقطة التوقف في الكود (من خلال النقر عليها في اللوحة اليمنى).
قم بتعطيل نقطة التوقف مؤقتًا عن طريق إلغاء تحديدها.
قم بإزالة نقطة التوقف بالنقر بزر الماوس الأيمن وتحديد إزالة.
…وهلم جرا.
نقاط التوقف المشروطة
انقر بزر الماوس الأيمن على رقم السطر يسمح بإنشاء نقطة توقف مشروطة . يتم تشغيله فقط عندما يكون التعبير المحدد، الذي يجب عليك تقديمه عند إنشائه، صحيحًا.
يكون هذا مفيدًا عندما نحتاج إلى التوقف فقط عند قيمة متغيرة معينة أو معلمات دالة معينة.
يمكننا أيضًا إيقاف التعليمات البرمجية مؤقتًا باستخدام أمر debugger الموجود فيها، مثل هذا:
وظيفة مرحبا (الاسم) {
Let العبارة = `مرحبًا، ${name}!`;
مصحح الأخطاء؛ // <-- يتوقف مصحح الأخطاء هنا
قل(عبارة);
}يعمل هذا الأمر فقط عندما تكون أدوات التطوير مفتوحة، وإلا فسيتجاهله المتصفح.
في مثالنا، يتم استدعاء hello() أثناء تحميل الصفحة، وبالتالي فإن أسهل طريقة لتنشيط مصحح الأخطاء (بعد تعيين نقاط التوقف) هي إعادة تحميل الصفحة. لذلك دعونا نضغط على F5 (Windows وLinux) أو Cmd + R (Mac).
عند تعيين نقطة التوقف، يتوقف التنفيذ مؤقتًا عند السطر الرابع:
يرجى فتح القوائم المنسدلة المعلوماتية الموجودة على اليمين (المميزة بالأسهم). إنها تسمح لك بفحص حالة الكود الحالية:
Watch – يعرض القيم الحالية لأية تعبيرات.
يمكنك النقر فوق علامة الجمع + وإدخال تعبير. سيُظهر مصحح الأخطاء قيمته، ويعيد حسابها تلقائيًا أثناء عملية التنفيذ.
Call Stack - يعرض سلسلة المكالمات المتداخلة.
في الوقت الحالي، يوجد مصحح الأخطاء داخل استدعاء hello() ، الذي يتم استدعاؤه بواسطة برنامج نصي في index.html (لا توجد وظيفة هناك، لذلك يطلق عليه "مجهول").
إذا قمت بالنقر فوق عنصر مكدس (على سبيل المثال، "مجهول")، ينتقل مصحح الأخطاء إلى الكود المقابل، ويمكن فحص جميع متغيراته أيضًا.
Scope – المتغيرات الحالية.
يعرض Local متغيرات الوظيفة المحلية. يمكنك أيضًا رؤية قيمها مظللة فوق المصدر مباشرة.
Global لديها متغيرات عالمية (من أي وظائف).
هناك أيضًا this الكلمة الأساسية التي لم ندرسها بعد، لكننا سنفعل ذلك قريبًا.
الآن حان الوقت لتتبع البرنامج النصي.
توجد أزرار لها في الجزء العلوي من اللوحة اليمنى. دعونا إشراكهم.
- "استئناف": متابعة التنفيذ، مفتاح التشغيل السريع F8 .
يستأنف التنفيذ. إذا لم تكن هناك نقاط توقف إضافية، فسيستمر التنفيذ ويفقد مصحح الأخطاء السيطرة.
وهذا ما يمكننا رؤيته بعد النقر عليه:
تم استئناف التنفيذ، ووصل إلى نقطة توقف أخرى داخل say() وتوقف مؤقتًا هناك. ألق نظرة على "Call Stack" على اليمين. لقد زادت بمكالمة أخرى. نحن في الداخل say() الآن.
- "الخطوة": قم بتشغيل الأمر التالي، مفتاح التشغيل السريع F9 .
تشغيل العبارة التالية. إذا نقرنا عليه الآن، سيظهر alert .
سيؤدي النقر فوق هذا مرارًا وتكرارًا إلى التنقل عبر كافة عبارات البرنامج النصي واحدًا تلو الآخر.
- ""التخطي": قم بتشغيل الأمر التالي، لكن لا تنتقل إلى وظيفة ، مفتاح التشغيل السريع F10 .
يشبه الأمر "Step" السابق، ولكنه يتصرف بشكل مختلف إذا كانت العبارة التالية عبارة عن استدعاء دالة (ليست مدمجة، مثل alert ، ولكنها دالة خاصة بنا).
إذا قمنا بمقارنتها، فإن الأمر "Step" ينتقل إلى استدعاء دالة متداخلة ويوقف التنفيذ مؤقتًا في السطر الأول، بينما ينفذ "Step over" استدعاء الوظيفة المتداخلة بشكل غير مرئي لنا، متخطيًا الوظائف الداخلية.
ثم يتم إيقاف التنفيذ مؤقتًا فورًا بعد استدعاء الوظيفة.
يعد هذا أمرًا جيدًا إذا لم نكن مهتمين برؤية ما يحدث داخل استدعاء الوظيفة.
- ""الدخول إلى"، مفتاح التشغيل السريع F11 .
وهذا يشبه "الخطوة"، ولكنه يتصرف بشكل مختلف في حالة استدعاءات الوظائف غير المتزامنة. إذا كنت قد بدأت للتو في تعلم JavaScript، فيمكنك تجاهل الفرق، حيث ليس لدينا مكالمات غير متزامنة حتى الآن.
بالنسبة للمستقبل، لاحظ فقط أن الأمر "Step" يتجاهل الإجراءات غير المتزامنة، مثل setTimeout (استدعاء دالة مجدولة)، والتي يتم تنفيذها لاحقًا. تدخل "الخطوة إلى" في الكود الخاص بهم، وتنتظرهم إذا لزم الأمر. راجع دليل DevTools لمزيد من التفاصيل.
- "الخروج": مواصلة التنفيذ حتى نهاية الوظيفة الحالية، مفتاح التشغيل السريع Shift + F11 .
استمر في التنفيذ وأوقفه عند السطر الأخير من الوظيفة الحالية. يكون هذا مفيدًا عندما نقوم بإدخال مكالمة متداخلة عن طريق الخطأ باستخدام لكنه لا يهمنا، ونريد أن نستمر حتى نهايته في أسرع وقت ممكن.
- تمكين/تعطيل كافة نقاط التوقف.
هذا الزر لا يحرك التنفيذ. مجرد كتلة تشغيل/إيقاف لنقاط التوقف.
– تمكين/تعطيل الإيقاف المؤقت التلقائي في حالة حدوث خطأ.
عند التمكين، إذا كانت أدوات المطور مفتوحة، فسيؤدي خطأ أثناء تنفيذ البرنامج النصي إلى إيقافها مؤقتًا تلقائيًا. ثم يمكننا تحليل المتغيرات في مصحح الأخطاء لمعرفة الخطأ الذي حدث. لذلك إذا مات البرنامج النصي الخاص بنا بسبب خطأ، فيمكننا فتح مصحح الأخطاء وتمكين هذا الخيار وإعادة تحميل الصفحة لمعرفة مكان توقفه وما هو السياق في تلك اللحظة.
استمر إلى هنا
يؤدي النقر بزر الماوس الأيمن على سطر من التعليمات البرمجية إلى فتح قائمة السياق مع خيار رائع يسمى "المتابعة إلى هنا".
يكون هذا مفيدًا عندما نريد التحرك عدة خطوات للأمام نحو الخط، ولكننا كسالى جدًا بحيث لا يمكننا تعيين نقطة توقف.
لإخراج شيء ما إلى وحدة التحكم من الكود الخاص بنا، هناك وظيفة console.log .
على سبيل المثال، يُخرج هذا القيم من 0 إلى 4 إلى وحدة التحكم:
// افتح وحدة التحكم للرؤية
لـ (دع i = 0; i < 5; i++) {
console.log("قيمة"،، أنا)؛
}لا يرى المستخدمون العاديون هذا الإخراج، فهو موجود في وحدة التحكم. لرؤيتها، افتح لوحة وحدة التحكم الخاصة بأدوات المطورين أو اضغط على Esc أثناء وجودك في لوحة أخرى: التي تفتح وحدة التحكم في الأسفل.
إذا كان لدينا ما يكفي من تسجيل الدخول إلى الكود الخاص بنا، فيمكننا رؤية ما يحدث من السجلات، بدون مصحح الأخطاء.
كما نرى، هناك ثلاث طرق رئيسية لإيقاف البرنامج النصي مؤقتًا:
نقطة توقف.
تصريحات debugger .
خطأ (إذا كانت أدوات التطوير مفتوحة وظهر الزر هو "على").
عند الإيقاف المؤقت، يمكننا تصحيح الأخطاء: فحص المتغيرات وتتبع التعليمات البرمجية لمعرفة أين يحدث الخطأ في التنفيذ.
هناك العديد من الخيارات في أدوات المطورين أكثر مما تم تناوله هنا. الدليل الكامل موجود على https://developers.google.com/web/tools/chrome-devtools.
المعلومات الواردة في هذا الفصل كافية لبدء تصحيح الأخطاء، ولكن لاحقًا، خاصة إذا كنت تقوم بالكثير من أشياء المتصفح، يرجى الانتقال إلى هناك والبحث في الإمكانات الأكثر تقدمًا لأدوات المطورين.
أوه، ويمكنك أيضًا النقر فوق أماكن مختلفة لأدوات التطوير ورؤية ما يظهر. ربما يكون هذا هو أسرع طريق لتعلم أدوات التطوير. لا تنس النقر بزر الماوس الأيمن وقوائم السياق!