مرجع تصحيح أخطاء JavaScript

Kayce Basques

Sofia Emelianova

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

اطّلع على بدء استخدام تصحيح أخطاء JavaScript في "أدوات مطوري البرامج في Chrome" للتعرُّف على أساسيات تصحيح الأخطاء.

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

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

التحقّق من القيم عند الإيقاف المؤقت

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

يمكنك استخدام وحدة التحكّم لطلب البحث عن المتغيّرات والثوابت والعناصر التي يتم تقييمها.

معاينة خصائص الفئة أو الدوال عند التمرير فوقها

أثناء إيقاف التنفيذ مؤقتًا، مرِّر مؤشر الماوس فوق اسم فئة أو دالة لمعاينة خصائصها.

رمز التنقُّل

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

تجاوز سطر التعليمة البرمجية

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

على سبيل المثال، لنفترض أنك تصحح الرمز التالي:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name); // D
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name; // C
}

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

الدخول إلى سطر التعليمة البرمجية

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

على سبيل المثال، لنفترض أنك تصحح الرمز التالي:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name);
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name;
}

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

تجاوز سطر الرمز البرمجي

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

على سبيل المثال، لنفترض أنك تصحح الرمز التالي:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName();
  updateName(name); // C
}
function getName() {
  var name = app.first + ' ' + app.last; // A
  return name; // B
}

تم إيقاف حسابك مؤقتًا في A. عند الضغط على خروج، تُنفذ "أدوات مطوري البرامج" باقي الرمز البرمجي في getName()، وهو B فقط في هذا المثال، ثم يتوقف مؤقتًا في C.

تشغيل كل التعليمات البرمجية حتى سطر معين

عند تصحيح أخطاء دالة طويلة، قد يكون هناك الكثير من التعليمات البرمجية غير المرتبطة بالمشكلة تصحيح الأخطاء.

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

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

استئناف تنفيذ النص البرمجي

لمواصلة تنفيذ النص البرمجي بعد الإيقاف المؤقت، انقر على استئناف تنفيذ النص البرمجي DevTools ينفذ النص البرمجي حتى نقطة الإيقاف التالية، إن وجدت.

فرض تنفيذ النص البرمجي

لتجاهل جميع نقاط التوقف وفرض استئناف النص البرمجي، انقر مع الاستمرار على استئناف النص البرمجي. التنفيذ ثم اختَر فرض تنفيذ النص البرمجي

تغيير سياق سلسلة المحادثات

عند العمل مع العاملين على الويب أو مشغِّلي الخدمات، انقر على أحد السياقات المدرَجة في لوحة سلاسل المحادثات من أجل التبديل إلى هذا السياق. يمثّل رمز السهم الأزرق السياق المحدَّد حاليًا.

إنّ لوحة سلاسل المحادثات في لقطة الشاشة أعلاه موضّحة باللون الأزرق.

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

التنقّل بين التعبيرات المفصولة بفواصل

يتيح لك التنقّل بين التعبيرات المفصولة بفواصل تصحيح أخطاء الرمز البرمجي المصغّر. على سبيل المثال، ضع في اعتبارك التعليمة البرمجية التالية:

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

bar();

عند تصغيرها، تحتوي على تعبير foo(),foo(),42 مفصول بفواصل:

function foo(){}function bar(){return foo(),foo(),42}bar();

يتنقل برنامج تصحيح الأخطاء بين هذه التعبيرات بالطريقة نفسها.

وبالتالي، فإن سلوك خطوة بخطوة هو نفسه:

• بين الرمز المصغَّر والمكتوب.
• عند استخدام خرائط المصدر لتصحيح أخطاء الرمز المصغّر من حيث الرمز الأصلي بمعنى آخر، عندما ترى الفواصل المنقوطة، يمكنك دائمًا توقُّع التنقّل بينها حتى إذا تم تصغير المصدر الفعلي الذي تصحح الأخطاء فيه.

عرض وتعديل المواقع المحلية والمغلقة والعالمية

أثناء الإيقاف المؤقت على سطر من الرمز، استخدِم لوحة النطاق لعرض قيم الخصائص وتعديلها المتغيرات في النطاقات المحلية والإغلاق والعالمية.

• انقر مرّتين على قيمة خاصية لتغييرها.
• تكون السمات غير القابلة للتعداد غير مفعَّلة.

إنّ جزء النطاق في لقطة الشاشة أعلاه موضّح باللون الأزرق.

عرض حزمة المكالمات الحالية

أثناء الإيقاف المؤقت على سطر من الرمز، يمكنك استخدام لوحة حزمة المكالمات لعرض حزمة المكالمات التي أوصلتك إلى هذا النص نقطة واحدة.

انقر على أحد الإدخالات للانتقال إلى سطر التعليمة البرمجية الذي تم استدعاء هذه الدالة فيه. رمز السهم الأزرق يمثل الدالة التي تُبرزها أدوات مطوّري البرامج حاليًا.

تم توضيح جزء حزمة المكالمات في لقطة الشاشة أعلاه باللون الأزرق.

إعادة تشغيل دالة (إطار) في حزمة استدعاءات

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

لإعادة تشغيل إطار:

1. الإيقاف المؤقت لتنفيذ الدالة عند نقطة توقف: يسجّل جزء حزمة المكالمات ترتيب استدعاء الدوال.

2. في لوحة حزمة المكالمات، انقر بزر الماوس الأيمن على إحدى الدوال واختَر إطار إعادة التشغيل من القائمة المنسدلة.

   

لفهم طريقة عمل إطار إعادة التشغيل، يجب مراعاة الرمز التالي:

function foo(value) {
    console.log(value);
    bar(value);
}

function bar(value) {
    value++;
    console.log(value);
    debugger;
}

foo(0);

تستخدم الدالة foo() 0 كوسيطة، وتسجّلها، وتستدعي الدالة bar(). وتعمل الدالة bar() بدورها على زيادة الوسيطة.

حاول إعادة تشغيل إطارات كلتا الدالتين بالطريقة التالية:

1. انسخ الرمز أعلاه إلى مقتطف جديد وشغِّله. يتوقف التنفيذ عند نقطة إيقاف سطر الرمز الخاص بـ debugger.
2. يُرجى ملاحظة أنّ برنامج تصحيح الأخطاء يعرض لك القيمة الحالية بجانب تعريف الدالة: value = 1.
3. أعِد تشغيل إطار bar().
4. يمكنك التنقل خلال عبارة زيادة القيمة بالضغط على F9. لاحظ أن القيمة الحالية تزيد: value = 2.
5. في جزء النطاق، انقر مرّتين على القيمة لتعديلها وضبط القيمة المطلوبة، إذا أردت ذلك.

6. جرِّب إعادة تشغيل إطار bar() وتخطّي عبارة الزيادة عدة مرات. تستمر القيمة في الزيادة.

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

وبالتالي، تظل قيمة الوسيطة الحالية متوفّرة في الذاكرة خلال عمليات إعادة تشغيل الدالة نفسها.

1. عليك الآن إعادة تشغيل إطار foo() في حزمة المكالمات. لاحظ أن القيمة هي 0 مرة أخرى.

في JavaScript، لا تكون التغييرات التي يتم إجراؤها على الوسيطات مرئية (منعكسة) خارج الدالة. تتلقّى الدوال المتداخلة القيم، وليس مواقعها في الذاكرة. 1. استأنِف تنفيذ النصّ البرمجي (F8) لإكمال هذا الدليل التوجيهي.

عرض الإطارات المدرَجة في قائمة التجاهل

يعرض جزء حزمة المكالمات تلقائيًا الإطارات ذات الصلة بالتعليمات البرمجية فقط ويحذف أي نصوص برمجية تمت إضافتها إلى الإعدادات > قائمة التجاهل.

لعرض حزمة الاستدعاءات بالكامل، بما في ذلك الإطارات التابعة لجهات خارجية، فعِّل عرض الإطارات المُدرَجة في قائمة التجاهل ضمن القسم حزمة المكالمات.

يمكنك تجربته في صفحة العرض التوضيحي هذه:

1. في لوحة المصادر، افتح src > app > ملف app.component.ts.
2. اضبط نقطة توقّف عند الدالة increment().
3. في قسم حزمة المكالمات، ضَع علامة في مربّع الاختيار عرض الإطارات المُدرَجة في قائمة التجاهل أو أزِلها وراجِع قائمة الإطارات ذات الصلة أو القائمة الكاملة في حزمة الاستدعاءات.

عرض الإطارات غير المتزامنة

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

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

نسخ تقرير تتبُّع تسلسل استدعاء الدوال البرمجية

انقر بزر الماوس الأيمن في أي مكان في لوحة حزمة الاتصال واختَر نسخ تتبُّع تسلسل استدعاء الدوال البرمجية لنسخ الاستدعاء الحالي. مكدس إلى الحافظة.

في ما يلي مثال على المخرجات:

getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)

التنقّل في شجرة الملفات

استخدِم لوحة الصفحة للتنقّل في شجرة الملفات.

مجموعة الملفات التي تم تأليفها ونشرها في شجرة الملفات

عند تطوير تطبيقات الويب باستخدام أطر العمل (مثل React أو Angular)، قد يكون من الصعب التنقّل بين المصادر بسبب تصغير الملفات التي تم إنشاؤها باستخدام أدوات التصميم (مثل webpack أو Vite).

ولمساعدتك في التنقل بين المصادر، يمكنك مراجعة المصادر > يمكن في لوحة الصفحة تجميع الملفات في فئتَين:

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

لتفعيل ميزة التجميع، يجب تفعيل >. الخيار تجميع الملفات حسب التأليف/المنشور ضمن قائمة الخيارات الإضافية في أعلى شجرة الملفات

إخفاء المصادر المدرَجة في قائمة التجاهل من شجرة الملفات

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

لإخفاء مثل هذه النصوص البرمجية تمامًا، اختَر المصادر >. الصفحة > إخفاء المصادر المدرَجة في قائمة التجاهل .

تجاهُل نص برمجي أو نمط من النصوص البرمجية

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

على سبيل المثال، لنفترض أنك تتنقل عبر هذه التعليمة البرمجية:

function animate() {
  prepare();
  lib.doFancyStuff(); // A
  render();
}

A هي مكتبة تابعة لجهة خارجية موثوقة. إذا كنت واثقًا من أن المشكلة التي تصححها لا تتعلق بمكتبة الجهة الخارجية، فمن المنطقي تجاهل النص البرمجي.

تجاهُل نص برمجي أو دليل من شجرة الملفات

لتجاهل نص برمجي فردي أو دليل كامل:

1. في المصادر > الصفحة، انقر بزر الماوس الأيمن على دليل أو ملف نص برمجي.
2. اختَر إضافة دليل/نص برمجي إلى قائمة التجاهل.

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

بخلاف ذلك، يمكنك إزالة الأدلة والنصوص البرمجية المخفية والمتجاهلة من القائمة في الإعدادات >. قائمة التجاهل:

تجاهل نص برمجي من جزء "المحرِّر"

لتجاهل نص برمجي من جزء المحرِّر:

1. افتح الملف.
2. انقر بزر الماوس الأيمن على أي مكان.
3. اختَر إضافة نص برمجي إلى قائمة التجاهل.

يمكنك إزالة نص برمجي من قائمة تم تجاهله من الإعدادات > قائمة التجاهل:

تجاهل نص برمجي من جزء "حزمة الاتصال"

لتجاهل نص برمجي من جزء حزمة الاتصال:

1. انقر بزر الماوس الأيمن فوق دالة من البرنامج النصي.
2. اختَر إضافة نص برمجي إلى قائمة التجاهل.

يمكنك إزالة نص برمجي من قائمة تم تجاهله من الإعدادات > قائمة التجاهل:

تجاهُل نص برمجي من "الإعدادات"

الاطّلاع على الإعدادات > قائمة التجاهل:

تشغيل مقتطفات من رمز تصحيح الأخطاء من أي صفحة

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

راجع تشغيل مقتطفات من الرمز من أي صفحة لمزيد من المعلومات.

مراقبة قيم تعبيرات JavaScript المخصّصة

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

• انقر على إضافة تعبير. لإنشاء تعبير مشاهدة جديد.
• انقر على إعادة تحميل لإعادة التحميل. قيم جميع التعبيرات الموجودة. تتم إعادة تحميل القيم تلقائيًا أثناء التنقّل بين الرموز.
• مرِّر مؤشر الماوس فوق تعبير وانقر على حذف التعبير. لحذفها.

فحص النصوص البرمجية وتعديلها

عند فتح نص برمجي في لوحة الصفحة، تعرض لك "أدوات مطوري البرامج" محتواه في لوحة المحرِّر. في لوحة المحرِّر، يمكنك تصفّح الرمز وتعديله.

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

جعل ملف صغير سهل القراءة

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

للاطّلاع على الملف المصغّر أثناء تحميله، انقر على { } في أسفل يمين المحرِّر.

طيّ مجموعات الرموز

لطي مجموعة رموز، مرِّر مؤشر الماوس فوق رقم السطر في العمود الأيمن، ثم انقر على تصغير.

لفتح مجموعة الرموز، انقر على {...} بجانبها.

لضبط هذا السلوك، راجِع الإعدادات >. الإعدادات المفضّلة > المصادر:

تعديل نص برمجي

عند إصلاح أحد الأخطاء، تحتاج غالبًا إلى اختبار بعض التغييرات على رمز JavaScript. لا تحتاج إلى لإجراء التغييرات في متصفح خارجي ثم إعادة تحميل الصفحة. يمكنك تعديل النص في أدوات مطوري البرامج:

لتعديل نص برمجي:

1. افتح الملف في لوحة المحرِّر في لوحة المصادر.
2. أدخِل التغييرات في لوحة المحرِّر.

3. اضغط على Command+S (نظام التشغيل Mac) أو Ctrl+S (نظام التشغيل Windows وLinux) حفظ. تعمل "أدوات مطوّري البرامج" على تصحيح ملف JavaScript بالكامل في محرّك JavaScript في Chrome.

   

   إنّ لوحة المحرِّر في لقطة الشاشة أعلاه موضّحة باللون الأزرق.

إجراء تعديل مباشر لدالة متوقفة مؤقتًا

أثناء إيقاف عملية التنفيذ مؤقتًا، يمكنك تعديل الدالة الحالية وتطبيق التغييرات مباشرةً مع تطبيق القيود التالية:

• يمكنك تعديل الوظيفة العلوية فقط في حزمة المكالمات.
• يجب ألا تكون هناك استدعاءات متكررة للدالة نفسها في أسفل الحزمة.

لتعديل دالة مباشرةً، اتّبِع الخطوات التالية:

1. إيقاف التنفيذ مؤقتًا باستخدام نقطة توقّف
2. عدِّل الدالة المتوقفة مؤقتًا.
3. اضغط على Command / Control + S لتطبيق التغييرات. يعمل برنامج تصحيح الأخطاء على إعادة تشغيل الدالة تلقائيًا.
4. مواصلة التنفيذ

شاهد الفيديو أدناه للتعرّف على سير العمل هذا.

في هذا المثال، تحتوي المتغيّرات addend1 وaddend2 على نوع string غير صحيح في البداية. لذلك، بدلاً من إضافة أرقام، يتم إنشاء تسلسل للسلاسل. لحلّ هذه المشكلة، تتم إضافة دوال parseInt() أثناء التعديل المباشر.

البحث عن نص واستبداله في نص برمجي

للبحث عن نص في نص برمجي:

1. افتح الملف في لوحة المحرِّر في لوحة المصادر.
2. لفتح شريط بحث مضمَّن، اضغط على Command+F (نظام التشغيل Mac) أو Ctrl+F (نظام التشغيل Windows وLinux).
3. في الشريط، أدخِل طلب البحث. يمكنك اختياريًا إجراء ما يلي:
   • انقر على مطابقة حالة الأحرف لجعل طلب البحث حساسًا لحالة الأحرف.
   • انقر على استخدام التعبير العادي للبحث باستخدام تعبير تعبير عادي.
4. اضغط على Enter. للانتقال إلى نتيجة البحث السابقة أو التالية، اضغط على زر الانتقال للأعلى أو للأسفل.

لاستبدال النص الذي عثرت عليه:

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

إيقاف JavaScript

يُرجى الاطّلاع على إيقاف JavaScript باستخدام "أدوات مطوري البرامج في Chrome".