تصحيح أخطاء JavaScript

Kayce Basques

Sofia Emelianova

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

إعادة تنفيذ الخطأ

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

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

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

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

توفّر "أدوات مطوري البرامج" الكثير من الأدوات المختلفة للمهام المختلفة، مثل تغيير CSS وتحليل أداء تحميل الصفحات ومراقبة طلبات الشبكة. لوحة المصادر هي المكان الذي يتم فيه تصحيح أخطاء 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 توسيع. تعرض "أدوات مطوري البرامج" قائمة بأحداث الماوس، مثل النقر والماوس لأسفل. يظهر بجانب كل حدث مربّع اختيار بجانبه.

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

   

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

   function onClick() {
   

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

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

الاطّلاع على الرمز

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

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

   if (inputsAreEmpty()) {
   

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

   تنفِّذ "أدوات مطوري البرامج" inputsAreEmpty() بدون الخوض فيه. لاحظ كيف يتخطى DevTools بضعة أسطر من التعليمات البرمجية. ويرجع ذلك إلى أنّه تم تقييم inputsAreEmpty() على false، وبالتالي لم يتم تنفيذ مجموعة الرموز في عبارة 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.

كما يُشتبه، يتم تقييم 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 المطلوب مع سلسلة فرعية تقدّمها.

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

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