تصحيح أخطاء JavaScript

Kayce Basques

Sofia Emelianova

يشرح لك هذا البرنامج التعليمي سير العمل الأساسي لتصحيح أي مشكلة في JavaScript في DevTools. يمكنك قراءة الخطوات التالية أو مشاهدة الفيديو التعليمي.

إعادة إنتاج الخطأ

إنّ العثور على سلسلة من الإجراءات التي تؤدي باستمرار إلى إعادة إنتاج خطأ هو الخطوة الأولى دائمًا في تصحيح الأخطاء.

1. افتح هذا العرض الترويجي في علامة تبويب جديدة.
2. أدخِل 5 في المربّع الرقم 1.
3. أدخِل 1 في المربّع الرقم 2.
4. انقر على إضافة الرقم 1 والرقم 2. يظهر الرمز 5 + 1 = 51 أسفل الزر. يجب أن تكون النتيجة 6. هذا هو الخلل الذي ستصلحه.

في هذا المثال، تكون نتيجة 5 + 1 هي 51. من المفترض أن يكون 6.

التعرّف على واجهة مستخدم لوحة "المصادر"

توفّر "أدوات مطوّري البرامج" الكثير من الأدوات المختلفة للمهام المختلفة، مثل تغيير CSS وإنشاء ملف شخصي لأداء loading الصفحة ومراقبة طلبات الشبكة. لوحة المصادر هي المكان الذي يمكنك فيه تصحيح أخطاء لغة JavaScript.

1. افتح "أدوات مطوّري البرامج" وانتقِل إلى لوحة المصادر.

   

تتضمّن لوحة المصادر ثلاثة أقسام:

1. علامة التبويب الصفحة التي تتضمّن شجرة الملفات يتم إدراج كل ملف تطلبه الصفحة هنا.
2. قسم أداة تعديل الرموز بعد اختيار ملف في علامة التبويب الصفحة، يتم عرض محتويات هذا الملف هنا.

3. قسم برنامج تصحيح الأخطاء أدوات متنوعة لفحص لغة JavaScript في الصفحة

   إذا كانت نافذة "أدوات المطوّرين" عريضة، يظهر أداة تصحيح الأخطاء تلقائيًا على يسار محرِّر الرموز البرمجية. في هذه الحالة، تلتحق علامتا التبويب النطاق والمشاهدة بعلامات التبويب نقاط التوقف وتسلسل استدعاء الدوال البرمجية وغيرها كأقسام قابلة للطي.

إيقاف الرمز مؤقتًا باستخدام نقطة توقف

من الطرق الشائعة لتصحيح أخطاء مشكلة مثل هذه هي إدراج الكثير من عبارات console.log() في الرمز البرمجي، وذلك لفحص القيم أثناء تنفيذ النص البرمجي. على سبيل المثال:

function updateLabel() {
  var addend1 = getNumber1();
  console.log('addend1:', addend1);
  var addend2 = getNumber2();
  console.log('addend2:', addend2);
  var sum = addend1 + addend2;
  console.log('sum:', sum);
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

قد تؤدي طريقة console.log() إلى إنجاز المهمة، ولكن يمكن أن تؤدي نقاط التوقف إلى إنجازها بشكل أسرع. تتيح لك نقطة التوقف إيقاف الرمز البرمجي مؤقتًا في منتصف تنفيذه، وفحص جميع القيم في تلك اللحظة الزمنية. تتمتع نقاط التوقف ببعض المزايا مقارنةً بطريقة console.log():

• باستخدام console.log()، عليك فتح رمز المصدر يدويًا والعثور على الرمز ذي الصلة وإدراج عبارات console.log()، ثم إعادة تحميل الصفحة للاطّلاع على الرسائل في وحدة التحكّم. باستخدام نقاط التوقف، يمكنك إيقاف الرمز البرمجي ذي الصلة مؤقتًا بدون معرفة كيفية تنظيمه.
• في عبارات console.log()، عليك تحديد كل قيمة تريد فحصها صراحةً. باستخدام نقاط التوقف، تعرِض لك أدوات المطوّر قيم جميع المتغيّرات في تلك اللحظة الزمنية. في بعض الأحيان، تكون هناك متغيّرات تؤثر في الرمز البرمجي بدون أن تكون على دراية بها.

باختصار، يمكن أن تساعدك نقاط التوقف في العثور على الأخطاء وإصلاحها بشكل أسرع من طريقة console.log().

إذا رجعت خطوة إلى الوراء وتفكرّت في طريقة عمل التطبيق، يمكنك إجراء تخمين مدروس بأنّه يتم احتساب مجموع القيمة الخاطئة (5 + 1 = 51) في مستمع أحداث click المرتبط بالزر إضافة الرقم 1 والرقم 2. لذلك، من المحتمل أن تريد إيقاف الرمز مؤقتًا في الوقت الذي يتم فيه تنفيذ مستمع click. تتيح لك النقاط الفاصلة لأداة معالجة الحدث إجراء ذلك بالضبط:

1. في قسم أداة تصحيح الأخطاء، انقر على نقاط التوقف لمُستمعي الأحداث لتوسيع القسم. تكشف أدوات المطوّرين عن قائمة بفئات الأحداث القابلة للتوسيع، مثل الصورة المتحركة والحافظة.
2. بجانب فئة الحدث الماوس، انقر على arrow_right توسيع. تكشف أدوات المطوّرين عن قائمة بأحداث الماوس، مثل click وmousedown. يتضمّن كلّ حدث مربّع اختيار بجانبه.

3. ضَع علامة في مربّع الاختيار النقر. تم إعداد "أدوات مطوّري البرامج" الآن للتوقف مؤقتًا تلقائيًا عند تنفيذ أي click أداة معالجة أحداث.

   

4. في العرض الترويجي، انقر على إضافة الرقم 1 والرقم 2 مرة أخرى. تُوقِف "أدوات مطوّري البرامج" العرض التجريبي مؤقتًا و تُبرز سطرًا من الرمز البرمجي في لوحة المصادر. يجب إيقاف أدوات المطوّرين مؤقتًا على سطر الرمز التالي:

   function onClick() {
   

   إذا تم إيقافك مؤقتًا على سطر رمز برمجي مختلف، اضغط على استئناف استئناف تنفيذ النص البرمجي إلى أن يتم إيقافك مؤقتًا على السطر الصحيح.

النقاط الفاصلة لأداة معالجة الحدث هي مجرد نوع واحد من الأنواع العديدة للنقاط الفاصلة المتاحة في DevTools. من المفيد استكشاف جميع الأنواع المختلفة، لأنّ كل نوع يساعدك في النهاية على تصحيح أخطاء مختلف السيناريوهات في أسرع وقت ممكن. اطّلِع على مقالة إيقاف الرمز البرمجي مؤقتًا باستخدام نقاط التوقف للتعرّف على حالات استخدام كل نوع وكيفية استخدامه.

مراجعة الرمز البرمجي

من الأسباب الشائعة للمشاكل هي تنفيذ نص برمجي بترتيب غير صحيح. تتيح لك ميزة التنقّل في التعليمات البرمجية الاطّلاع على تنفيذ التعليمات البرمجية سطرًا تلو الآخر وتحديد مكان تنفيذها بالضبط بترتيب مختلف عن المتوقع. جرِّب ذلك الآن:

1. في لوحة المصادر ضمن "أدوات مطوّري البرامج"، انقر على step_into الانتقال إلى استدعاء الدالة التالي للانتقال خلال تنفيذ الدالة onClick() سطرًا واحدًا في كل مرة. تُبرز "أدوات مطوّري البرامج" سطر التعليمة البرمجية التالي:

   if (inputsAreEmpty()) {
   

2. انقر على step_over تخطّي استدعاء الدالة التالي.

   تنفِّذ "أدوات مطوّري البرامج" inputsAreEmpty() بدون الانتقال إليها. لاحظ كيف تتخطّى "أدوات مطوّري البرامج" بضعة أسطر من الرمز البرمجي. ويعود السبب في ذلك إلى أنّه تم تقييم inputsAreEmpty() على أنّه خطأ، لذا لم يتم تنفيذ كتلة if من التعليمات البرمجية.

هذه هي الفكرة الأساسية للتنقّل في الرمز البرمجي. إذا اطّلعت على الرمز البرمجي في get-started.js، يمكنك التعرّف على أنّ الخطأ يقع على الأرجح في مكان ما في دالة updateLabel(). بدلاً من التنقّل في كل سطر من التعليمات البرمجية، يمكنك استخدام نوع آخر من نقاط التوقف لإيقاف الرمز مؤقتًا بالقرب من الموقع المحتمَل للخطأ.

ضبط نقطة إيقاف لخط رمز

نقاط التوقف في سطر الرمز البرمجي هي النوع الأكثر شيوعًا من نقاط التوقف. عندما يكون لديك سطر معيّن من الرمز تريد إيقافه مؤقتًا، استخدِم نقطة توقّف لسطر الرمز:

1. اطّلِع على سطر الرمز البرمجي الأخير في updateLabel():

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
   

2. على يمين الرمز، يمكنك الاطّلاع على رقم سطر الرمز البرمجي هذا، وهو 32. انقر على 32. تضع "أدوات مطوّري البرامج" رمزًا أزرق فوق 32. وهذا يعني أنّه تمّ وضع نقطة توقّف لسطر تعليمات برمجية في هذا السطر. تتوقّف أدوات المطوّرين الآن دائمًا قبل تنفيذ سطر التعليمات البرمجية هذا.

3. انقر على استئناف استئناف تنفيذ النص البرمجي. يستمر تنفيذ النص البرمجي إلى أن يصل إلى السطر 32. في السطور 29 و30 و31، تعرِض أدوات مطوّري البرامج قيم addend1 وaddend2 وsum بجانب تعريفاتها.

في هذا المثال، تتوقّف أدوات المطوّر مؤقتًا عند نقطة التوقف في سطر الرمز البرمجي في السطر 32.

التحقّق من قيم المتغيّرات

تبدو قيم addend1 وaddend2 وsum مريبة. وهي محاطة بعلامات اقتباس، ما يشير إلى أنّها سلاسل. هذه فرضية جيدة لشرح سبب الخطأ. الآن، حان وقت جمع المزيد من المعلومات. توفّر أدوات المطوّرين الكثير من الأدوات لفحص قيم المتغيّرات.

الطريقة 1: فحص النطاق

عند إيقاف تنفيذ سطر من التعليمات البرمجية مؤقتًا، تعرض لك علامة التبويب النطاق المتغيّرات المحلية والعامة التي تم تحديدها في هذه المرحلة من التنفيذ، بالإضافة إلى قيمة كل متغيّر. ويعرض أيضًا متغيّرات الإغلاق، عند الضرورة. عندما لا تكون متوقفًا مؤقتًا عند سطر من الرموز البرمجية، تكون علامة التبويب النطاق فارغة.

انقر مرّتين على قيمة متغيّر لتعديلها.

الطريقة 2: مشاهدة التعبيرات

تتيح لك علامة التبويب مراقبة مراقبة قيم المتغيّرات بمرور الوقت. لا تقتصر ميزة المشاهدة على المتغيّرات فقط. يمكنك تخزين أي تعبير JavaScript صالح في علامة التبويب مشاهدة.

جرِّب ذلك الآن:

1. انقر على علامة التبويب مشاهدة.
2. انقر على إضافة إضافة تعبير مشاهدة.
3. اكتب typeof sum.
4. اضغط على Enter. تعرِض "أدوات مطوّري البرامج" typeof sum: "string". القيمة على يسار النقطتَين هي نتيجة تعبيرك.

تعرض هذه اللقطة الشاشة علامة التبويب مشاهدة (في أسفل يسار الصفحة) بعد إنشاء تعبير typeof sum watch.

كما هو متوقّع، يتم تقييم sum كسلسلة، بينما يجب أن يكون رقمًا. لقد أكّدت الآن أنّ هذا هو سبب الخطأ.

الطريقة 3: وحدة التحكّم

بالإضافة إلى عرض رسائل console.log()، يمكنك أيضًا استخدام وحدة التحكّم لتقييم عبارات JavaScript عشوائية. في ما يتعلّق بتصحيح الأخطاء، يمكنك استخدام وحدة التحكّم لاختبار حلول محتملة للأخطاء. جرِّب ذلك الآن:

1. إذا لم يكن "درج وحدة التحكّم" مفتوحًا، اضغط على مفتاح الخروج (Escape) لفتحه. يتم فتحه في أسفل نافذة "أدوات المطوّرين".
2. في وحدة التحكّم، اكتب parseInt(addend1) + parseInt(addend2). تعمل هذه العبارة لأنّه يتم إيقافك مؤقتًا على سطر رمز حيث يكون addend1 وaddend2 في النطاق.
3. اضغط على Enter. تقيِّم أدوات المطوّرين العبارة وتطبع 6، وهي النتيجة التي تتوقّع أن يعرضها الإصدار التجريبي.

تعرض هذه اللقطة الشاشة درج وحدة التحكّم بعد تقييم parseInt(addend1) + parseInt(addend2).

تطبيق حلّ

إذا عثرت على حلّ للخطأ كل ما عليك فعله الآن هو تجربة الحلّ من خلال تعديل الرمز و إعادة تشغيل العرض الترويجي. لست بحاجة إلى مغادرة أدوات مطوّري البرامج لتطبيق الإصلاح. يمكنك تعديل رمز JavaScript مباشرةً ضمن واجهة مستخدم أدوات المطوّرين. جرِّب ذلك الآن:

1. انقر على استئناف استئناف تنفيذ النص البرمجي.
2. في محرِّر الرموز البرمجية، استبدِل السطر 31، var sum = addend1 + addend2، بعبارة var sum = parseInt(addend1) + parseInt(addend2).
3. اضغط على Command + S (نظام التشغيل Mac) أو Control + S (نظام التشغيل Windows أو Linux) لحفظ التغيير.
4. انقر على label_off إيقاف نقاط الإيقاف. ويتغيّر لونه إلى الأزرق للإشارة إلى أنّه نشط. أثناء ضبط هذا الخيار، تتجاهل "أدوات مطوّري البرامج" أي نقاط أثر حدّدتها.
5. جرِّب العرض الترويجي باستخدام قيم مختلفة. يتم الآن احتساب القيمة التجريبية بشكل صحيح.

الخطوات التالية

لم يعرض لك هذا الدليل سوى طريقتَين لضبط نقاط التوقف. توفّر أدوات المطوّرين العديد من الطرق الأخرى، بما في ذلك:

• نقاط الإيقاف المشروطة التي لا يتم تفعيلها إلا عندما يكون الشرط الذي تقدّمه صحيحًا
• نقاط التوقف عند الاستثناءات المرصودة أو غير المرصودة
• نقاط توقّف XHR التي يتم تفعيلها عندما يتطابق عنوان URL المطلوب مع سلسلة فرعية تقدّمها.

اطّلِع على إيقاف الرمز البرمجي مؤقتًا باستخدام نقاط التوقف لمعرفة حالات استخدام كل نوع وكيفية استخدامه.

هناك عنصران للتحكّم في خطوات تنفيذ الرمز البرمجي لم يتم شرحهما في هذا الدليل التعليمي. اطّلِع على التخطّي فوق سطر الرمز لمعرفة مزيد من المعلومات.