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

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

   

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

   function onClick() {
   

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

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

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

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

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

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

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