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