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

اكتشِف مهام سير عمل جديدة لتصحيح الأخطاء من خلال هذا المرجع الشامل لميزات تصحيح الأخطاء في "أدوات مطوري البرامج في 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 النص حتى نقطة الإيقاف التالية، إن وجدت.

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

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

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

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

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

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

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

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

function foo() {}

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

bar();

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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".