مرجع تصحيح أخطاء 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

لتفعيل التجميع، فعِّل الخيار > تجميع الملفات حسب المؤلف/النشر ضمن قائمة النقاط الثلاث في أعلى شجرة الملفات.

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

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

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

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

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

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

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

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

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

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

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

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

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

تجاهُل نص برمجي من لوحة "المحرِّر"

لتجاهل نص برمجي من لوحة المحرِّر:

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

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

تجاهُل نص برمجي من لوحة "حزمة المكالمات"

لتجاهل نص برمجي من لوحة تسلسل المكالمات:

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

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

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

راجِع الإعدادات > قائمة التجاهل.

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

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

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

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

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

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

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

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

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

جعل ملف مصغّر قابلاً للقراءة

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

للاطّلاع على الملف المُصغّر كما تم تحميله، انقر على { } في أسفل يمين أداة التعديل.

تصغير مجموعات الرموز

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

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

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

تعديل نص

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

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

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

3. اضغط على Command+S (نظام التشغيل Mac) أو Ctrl+S (نظام التشغيل Windows وLinux) للحفظ. تُعدِّل "أدوات مطوّري البرامج" ملف JS بالكامل في محرّك 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".