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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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. لا تحتاج إلى لإجراء التغييرات في متصفح خارجي ثم إعادة تحميل الصفحة. يمكنك تعديل النص البرمجي في DevTools.

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

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