اكتشِف سير العمل الجديد لتصحيح الأخطاء من خلال هذا المرجع الشامل لميزات تصحيح الأخطاء في "أدوات مطوّري البرامج في 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
. عند الضغط على Step out، تنفّذ أدوات مطوّري البرامج باقي الرمز في
getName()
، وهي قيمة B
فقط في هذا المثال، ثم تتوقف مؤقتًا عند C
.
تشغيل كل الرموز حتى سطر معين
عند تصحيح أخطاء دالة طويلة، قد يكون هناك الكثير من التعليمات البرمجية غير المرتبطة بالمشكلة التي تصححها.
يمكن أن تتجاوز كل الخطوط، ولكن هذا قد يكون مُملًا. يمكنك ضبط نقطة فاصلة لسطر الرمز على السطر المطلوب، ثم الضغط على استئناف تنفيذ النص البرمجي ، ولكن هناك طريقة أسرع.
انقر بزر الماوس الأيمن على سطر الرمز الذي يهمّك، ثمّ اختَر متابعة إلى هنا. تشغّل أدوات مطوّري البرامج كل الرموز البرمجية حتى هذه النقطة، ثم تتوقف مؤقتًا عند هذا السطر.
استئناف تنفيذ النص البرمجي
لمواصلة تنفيذ النص البرمجي بعد توقف مؤقت، انقر على استئناف تنفيذ النص البرمجي . ينفّذ DevTools البرنامج النصي حتى نقطة التوقف التالية، إن وجدت.
فرض تنفيذ النص البرمجي
لتجاهل جميع نقاط الإيقاف وفرض استئناف النص البرمجي، انقر مع الاستمرار على استئناف النص البرمجي التنفيذ ثم اختَر فرض تنفيذ النص البرمجي .
تغيير سياق سلسلة المحادثات
عند العمل مع مشغِّلي الويب أو عاملي الخدمات، انقر على سياق مُدرَج في جزء سلاسل المحادثات للتبديل إلى هذا السياق. يمثّل رمز السهم الأزرق السياق المحدَّد حاليًا.
جزء سلاسل المحادثات في لقطة الشاشة أعلاه مميَّز باللون الأزرق.
على سبيل المثال، لنفترض أنك توقّفت مؤقتًا عند نقطة إيقاف في النص البرمجي الرئيسي والنص البرمجي لمشغّل الخدمات. كنت تريد الاطّلاع على السمات المحلية والعامة لسياق مشغّل الخدمات، ولكن تعرض لوحة "المصادر" سياق النص البرمجي الرئيسي. وعند النقر على إدخال مشغّل الخدمات في جزء سلاسل المحادثات، ستتمكّن من التبديل إلى هذا السياق.
التنقّل بين التعبيرات المفصولة بفواصل
يتيح لك التنقّل بين التعبيرات المفصولة بفواصل تصحيح أخطاء الرمز المصغَّر. على سبيل المثال، ضع في الاعتبار التعليمة البرمجية التالية:
function foo() {}
function bar() {
foo();
foo();
return 42;
}
bar();
عند تصغير الحجم، يحتوي على تعبير foo(),foo(),42
مفصول بفواصل:
function foo(){}function bar(){return foo(),foo(),42}bar();
وينتقل برنامج تصحيح الأخطاء خلال هذه التعبيرات بنفس الطريقة.
وبالتالي، يكون سلوك التنقل متطابقًا:
- بين الرمز المصغَّر والرمز المؤلف.
- عند استخدام خرائط المصدر لتصحيح أخطاء الرمز المصغَّر في ما يتعلّق بالرمز الأصلي بعبارة أخرى، عندما ترى فواصل منقوطة، يمكنك دائمًا توقع التنقل بينها حتى إذا تم تصغير المصدر الفعلي الذي تصحح الأخطاء منه.
عرض وتعديل المواقع المحلية والمغلقة والعالمية
أثناء الإيقاف المؤقت في سطر من الرمز، استخدِم جزء النطاق لعرض وتعديل قيم الخصائص والمتغيرات في النطاقات المحلية والإغلاق والعامة.
- انقر مرّتين على قيمة خاصية لتغييرها.
- الخصائص التي لا يمكن تعدادها غير مفعّلة.
يتم تحديد جزء النطاق في لقطة الشاشة أعلاه باللون الأزرق.
عرض حزمة المكالمات الحالية
أثناء الإيقاف المؤقت على سطر من الرموز، استخدِم جزء Call Stack لعرض حزمة المكالمات التي وصلت إلى هذه النقطة.
انقر على أحد الإدخالات للانتقال إلى سطر الرمز حيث تم استدعاء هذه الدالة. يمثل رمز السهم الأزرق الدالة التي تميّزها DevTools حاليًا.
لوحة حزمة المكالمات في لقطة الشاشة أعلاه موضحة باللون الأزرق.
إعادة تشغيل دالة (إطار) في حزمة الاستدعاءات
لمراقبة سلوك الدالة وإعادة تشغيلها دون الحاجة إلى إعادة تشغيل مسار تصحيح الأخطاء بالكامل، يمكنك إعادة تشغيل تنفيذ دالة واحدة عند إيقاف هذه الدالة مؤقتًا. بمعنى آخر، يمكنك إعادة تشغيل إطار الدالة في مكدس الاستدعاءات.
لإعادة تشغيل إطار:
- إيقاف تنفيذ الدالة مؤقتًا عند نقطة إيقاف: يسجِّل جزء حزمة المكالمات ترتيب استدعاء الدوالّ.
في لوحة Call Stack (حزمة المكالمات)، انقر بزر الماوس الأيمن على دالة واختَر إعادة تشغيل الإطار من القائمة المنسدلة.
لفهم آلية عمل إعادة التشغيل، يمكنك استخدام الرمز التالي:
function foo(value) {
console.log(value);
bar(value);
}
function bar(value) {
value++;
console.log(value);
debugger;
}
foo(0);
تستخدم الدالة foo()
0
كوسيطة، وتسجّلها وتستدعي الدالة bar()
. وبدورها، تزيد الدالة bar()
من الوسيطة.
جرب إعادة تشغيل الإطارات لكلتا الدالتين بالطريقة التالية:
- انسخ الرمز أعلاه إلى مقتطف جديد وشغِّله. وتتوقف عملية التنفيذ عند نقطة الإيقاف المخصّصة لسطر الرمز
debugger
. - تجدر الإشارة إلى أنّ برنامج تصحيح الأخطاء يعرض القيمة الحالية بجانب بيان الدالة:
value = 1
. - أعِد تشغيل إطار
bar()
. - يمكنك التنقّل بين عبارة زيادة القيمة بالضغط على
F9
. يُرجى ملاحظة أنّ القيمة الحالية تزيد:value = 2
. - اختياريًا، في لوحة النطاق، انقر مرّتين على القيمة لتعديلها وضبط القيمة المطلوبة.
جرب إعادة تشغيل إطار
bar()
والتحرك خلال عبارة الزيادة عدة مرات. وتستمر القيمة في التزايد.
لا تؤدي إعادة تشغيل الإطار إلى إعادة ضبط الوسيطات. بمعنى آخر، لا تؤدي إعادة التشغيل إلى استعادة الحالة الأولية عند استدعاء الدالة. بدلاً من ذلك، فإنها تنقل مؤشر التنفيذ إلى بداية الدالة.
لذلك، تظل قيمة الوسيطة الحالية في الذاكرة خلال عمليات إعادة تشغيل الدالة نفسها.
- الآن، أعِد تشغيل إطار
foo()
في حزمة المكالمات. يُرجى العِلم أنّ القيمة هي0
مرة أخرى.
في JavaScript، لا تكون تغييرات الوسيطات مرئية (معكوسة) خارج الدالة. تتلقى الدوال المتداخلة القيم، وليس مواقعها في الذاكرة.
1- استئناف تنفيذ النص البرمجي (F8
) لإكمال هذا البرنامج التعليمي.
عرض الإطارات المدرَجة في قائمة التجاهل
لا تعرض لوحة حزمة المكالمات إلا الإطارات ذات الصلة بالرمز البرمجي وتحذف أي نصوص برمجية تمت إضافتها إلى الإعدادات > قائمة التجاهل.
لعرض حزمة المكالمات الكاملة، بما في ذلك إطارات الجهات الخارجية، فعّل عرض الإطارات المدرَجة في قائمة التجاهل ضمن القسم حزمة المكالمات.
يمكنك تجربته في صفحة العرض التوضيحي هذه:
- في لوحة المصادر، افتح ملف
src
>app
>app.component.ts
. - يمكنك ضبط نقطة إيقاف عند استخدام الدالة
increment()
. - في قسم حزمة المكالمات، يمكنك وضع علامة في مربّع الاختيار عرض الإطارات المدرَجة في قائمة التجاهل أو محوها ومراقبة القائمة ذات الصلة أو الكاملة للإطارات في حزمة المكالمات.
عرض الإطارات غير المتزامنة
بإمكان أدوات مطوّري البرامج تتبُّع العمليات غير المتزامنة، إذا كانت متاحة ضمن إطار العمل الذي تستخدمه، وذلك من خلال ربط كلا الجزأين من الرمز غير المتزامن معًا.
في هذه الحالة، يعرض حزمة المكالمات سجلّ المكالمات بالكامل، بما في ذلك إطارات الاستدعاءات غير المتزامنة.
نسخ تتبُّع تسلسل استدعاء الدوال البرمجية
انقر بزر الماوس الأيمن على أي مكان في لوحة حزمة المكالمات واختر نسخ تتبُّع تسلسل استدعاء الدوال البرمجية لنسخ حزمة المكالمات الحالية إلى الحافظة.
فيما يلي مثال على الناتج:
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
هي مكتبة تابعة لجهة خارجية تثق بها. إذا كنت واثقًا من أن المشكلة التي تحاول تصحيحها
لا تتعلق بمكتبة الجهة الخارجية، فمن المنطقي تجاهل النص البرمجي.
تجاهل نص برمجي أو دليل من شجرة الملفات
لتجاهل نص برمجي فردي أو دليل كامل:
- في المصادر > الصفحة، انقر بزر الماوس الأيمن على دليل أو ملف نص برمجي.
- اختَر إضافة دليل/نص برمجي إلى قائمة التجاهل.
في حال عدم إخفاء المصادر المدرَجة في قائمة التجاهل، يمكنك اختيار هذا المصدر في العرض التدرّجي للملفات، والنقر على إزالة من القائمة التي تم تجاهلها أو ضبط في بانر التحذير .
بخلاف ذلك، يمكنك إزالة الأدلة والنصوص البرمجية المخفية والمتجاهلة من القائمة في الإعدادات > قائمة التجاهل.
تجاهل نص برمجي من جزء "Editor" (المحرر)
لتجاهل نص برمجي من لوحة المحرِّر:
- افتح الملف.
- انقر بزر الماوس الأيمن في أي مكان.
- اختَر إضافة نص برمجي إلى قائمة التجاهل.
يمكنك إزالة نص برمجي من قائمة التجاهل من الإعدادات > قائمة التجاهل.
تجاهل نص برمجي من جزء "تكديس المكالمات"
لتجاهل نص برمجي من لوحة حزمة المكالمات:
- انقر بزر الماوس الأيمن على دالة من النص البرمجي.
- اختَر إضافة نص برمجي إلى قائمة التجاهل.
يمكنك إزالة نص برمجي من قائمة التجاهل من الإعدادات > قائمة التجاهل.
تجاهُل نص برمجي من "الإعدادات"
راجِع الإعدادات > قائمة التجاهل.
عرض مقتطفات رمز تصحيح الأخطاء من أي صفحة
إذا وجدت نفسك تستخدم رمز تصحيح الأخطاء نفسه في وحدة التحكم مرارًا وتكرارًا، فكّر في استخدام المقتطفات. المقتطفات هي نصوص برمجية قابلة للتنفيذ من خلال تأليفها وتخزينها وتشغيلها ضمن أدوات مطوري البرامج.
اطّلع على تشغيل مقتطفات الرمز من أي صفحة لمزيد من المعلومات.
مشاهدة قيم تعبيرات JavaScript المخصّصة
استخدم جزء المراقبة لمشاهدة قيم التعبيرات المخصصة. يمكنك مشاهدة أي تعبير JavaScript صالح.
- انقر على إضافة تعبير لإنشاء تعبير مشاهدة جديد.
- انقر على رمز إعادة التحميل لإعادة تحميل قيم جميع التعبيرات الحالية. تتم إعادة تحميل القيم تلقائيًا أثناء التنقّل في الرمز.
- مرِّر مؤشر الماوس فوق تعبير وانقر على حذف التعبير لحذفه.
فحص النصوص البرمجية وتعديلها
عند فتح نص برمجي في لوحة الصفحة، تعرض لك "أدوات مطوري البرامج" محتواه في لوحة أداة التعديل. في لوحة المحرِّر، يمكنك تصفّح الرمز وتعديله.
بالإضافة إلى ذلك، يمكنك تجاوز المحتوى على جهازك أو إنشاء مساحة عمل وحفظ التغييرات التي تجريها في "أدوات مطوري البرامج" مباشرةً في مصادرك المحلية.
جعل ملف مصغّر قابل للقراءة
تعرض لوحة المصادر تلقائيًا الملفات التي تم تصغيرها. عند صياغة المحرِّر بشكلٍ واضح، قد يعرض سطر رمز واحدًا طويلاً في عدّة أسطر، مع إضافة العلامة -
للإشارة إلى أنّ هذا السطر يمثّل تكملة السطر.
للاطّلاع على الملف المصغَّر عند تحميله، انقر على { }
في أسفل يمين أداة التعديل.
طي مجموعات الرموز
لطي مجموعة رموز، مرِّر مؤشر الماوس فوق رقم السطر في العمود الأيمن وانقر على تصغير.
لفتح مجموعة الرموز، انقر على الرمز {...}
بجانبها.
لضبط هذا السلوك، اطّلِع على الإعدادات > الإعدادات المفضّلة > المصادر.
تعديل نص برمجي
عند إصلاح خطأ، غالبًا ما تريد اختبار بعض التغييرات على رمز JavaScript. لا تحتاج إلى إجراء التغييرات في متصفح خارجي ثم إعادة تحميل الصفحة. يمكنك تعديل النص البرمجي في "أدوات مطوري البرامج"
لتعديل نص برمجي:
- افتح الملف في جزء المحرِّر من لوحة المصادر.
- أدخِل التغييرات في لوحة المحرِّر.
اضغط على Command+S (Mac) أو Ctrl+S (Windows وLinux) للحفظ. تعمل أدوات مطوّري البرامج على تصحيح ملف JavaScript بالكامل إلى محرك JavaScript في Chrome.
يتم تحديد جزء المحرِّر في لقطة الشاشة أعلاه باللون الأزرق.
تعديل دالة متوقفة مؤقتًا بشكل مباشر
أثناء إيقاف التنفيذ مؤقتًا، يمكنك تعديل الدالة الحالية وتطبيق التغييرات مباشرةً مع فرض القيود التالية:
- لا يمكنك تعديل سوى الوظيفة العليا في حزمة المكالمات.
- يجب ألا يكون هناك استدعاءات متكررة للدالة نفسها في أسفل الحزمة.
للتعديل المباشر لدالة:
- إيقاف التنفيذ مؤقتًا باستخدام نقطة إيقاف
- عدِّل الدالة المتوقفة مؤقتًا.
- اضغط على Command / Control + S لتطبيق التغييرات. يعمل برنامج تصحيح الأخطاء على إعادة تشغيل الدالة تلقائيًا.
- استمر في التنفيذ.
شاهد الفيديو أدناه لمعرفة سير العمل هذا.
في هذا المثال، متغيّرا addend1
وaddend2
لهما في البداية نوع string
غير صحيح. لذلك، بدلاً من إضافة الأرقام، تكون السلاسل على شكل تسلسل. لإصلاح هذه المشكلة، تتم إضافة الدوال parseInt()
أثناء التعديل المباشر.
البحث عن نص في نص برمجي واستبداله
للبحث عن نص في نص برمجي:
- افتح الملف في جزء المحرِّر من لوحة المصادر.
- لفتح شريط بحث مضمّن، اضغط على Command+F (نظام التشغيل Mac) أو Ctrl+F (نظام التشغيل Windows أو Linux).
- في الشريط، أدخِل طلب البحث.
يمكنك إجراء ما يلي إذا أردت:
- انقر على مطابقة حالة الأحرف لجعل طلب البحث حساسًا لحالة الأحرف.
- انقر على استخدام التعبير العادي للبحث باستخدام تعبير عادي.
- اضغط على Enter. للانتقال إلى نتيجة البحث السابقة أو التالية، اضغط على الزر للأعلى أو للأسفل.
لاستبدال النص الذي عثرت عليه:
- في شريط البحث، انقر على الزر استبدال.
- اكتب النص المطلوب استبداله، ثم انقر على استبدال أو استبدال الكل.
إيقاف JavaScript
راجِع القسم إيقاف JavaScript باستخدام "أدوات مطوري البرامج في Chrome".