تصحيح أخطاء JavaScript

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

إعادة إظهار الخطأ

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

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

نتيجة 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 مرة أخرى. توقف أدوات مطوري البرامج العرض التوضيحي مؤقتًا يتم تمييز سطر من الرمز البرمجي في لوحة Sources. يجب إيقاف أدوات مطوري البرامج مؤقتًا في هذا السطر من الرمز:

    function onClick() {

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

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

التنقل خلال التعليمات البرمجية

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

  1. في لوحة Sources ضِمن "أدوات مطوري البرامج"، انقر على step_into "Step to next function" (استدعاء الدالة التالي) للانتقال إلى عملية تنفيذ الدالة 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.

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

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

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

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

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

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

جزء النطاق.

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

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

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

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

جزء "تعبير المشاهدة"

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

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

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

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

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

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

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