تصحيح أخطاء JavaScript

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

الخطوة 1: إعادة إنشاء الخطأ

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

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

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

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

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

1. افتح أدوات مطوّري البرامج بالضغط على Command+Option+J (في نظام التشغيل Mac) أو Control+Shift+J (في نظام التشغيل Windows وLinux). ويؤدي هذا الاختصار إلى فتح لوحة وحدة التحكم.

   

2. انقر على علامة التبويب المصادر.

   

تتألّف واجهة مستخدم لوحة المصادر من 3 أجزاء:

1. جزء File Navigator (أداة تصفح الملفات). يتم إدراج كل ملف تطلبه الصفحة هنا.
2. جزء Code Editor (محرِّر الرمز). بعد تحديد ملف في جزء File Navigator (أداة تصفح الملفات)، يتم عرض محتويات هذا الملف هنا.
3. جزء تصحيح أخطاء JavaScript. أدوات مختلفة لفحص 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. في لوحة تصحيح أخطاء JavaScript، انقر على نقاط توقف أداة معالجة الحدث لتوسيع القسم. تعرض "أدوات مطوري البرامج" قائمة بفئات الأحداث القابلة للتوسيع، مثل الرسوم المتحركة والحافظة.
2. بجانب فئة حدث الماوس، انقر على توسيع . تعرض "أدوات مطوري البرامج" قائمة بأحداث الماوس، مثل النقر والماوسدا. يتضمّن كلّ حدث مربّع اختيار بجانبه.

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

   

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

   function onClick() {
   

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

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

الخطوة 4: الاطّلاع على الرمز

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

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

   if (inputsAreEmpty()) {
   

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

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

الخطوة 5: ضبط نقطة إيقاف لسطر الرمز

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

1. انظر إلى آخر سطر من الرمز في updateLabel():

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

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

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

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

الخطوة 6: التحقّق من قيم المتغيّرات

تبدو قيم 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 لفتحه. تفتح في أسفل نافذة DevTools.
2. في وحدة التحكّم، اكتب parseInt(addend1) + parseInt(addend2). تعمل هذه العبارة لأنك تم إيقافك مؤقتًا على سطر من الرمز حيث يقع addend1 وaddend2 في النطاق.
3. اضغط على Enter‏. تقيّم أدوات مطوّري البرامج العبارة وتطبع 6، وهي النتيجة التي تتوقّع أن ينتجها العرض التوضيحي.

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

الخطوة 7: تطبيق الحلّ

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

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

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

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

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

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

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

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