إيقاف الرمز مؤقتًا باستخدام نقاط الإيقاف

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

نظرة عامة على حالات استخدام كل نوع من أنواع نقاط الإيقاف

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

نوع نقطة الإيقاف	استخدِم هذا الخيار عندما تريد ...
سطر الرمز	توقف مؤقتًا عند منطقة محددة من الرمز.
سطر الرمز المشروط	توقف مؤقتًا عند منطقة محددة من التعليمة البرمجية، ولكن فقط عندما يكون هناك شرط آخر true.
نقطة تسجيل	سجِّل رسالة في وحدة التحكم بدون إيقاف التنفيذ مؤقتًا.
نموذج كائن المستند (DOM)	توقف مؤقتًا عند الرمز الذي يغيّر أو يزيل عقدة DOM أو عناصرها الثانوية.
XHR	يمكنك الإيقاف مؤقتًا عندما يحتوي عنوان URL XHR على نمط سلسلة.
أداة معالجة الأحداث	تتوقف مؤقتًا عند الرمز الذي يعمل بعد تنشيط حدث، مثل click.
الاستثناء	توقّف مؤقتًا عند سطر الرمز البرمجي الذي يطرح استثناءً تم اكتشافه أو لم يتم رصده.
الوظيفة	الإيقاف المؤقت عند استدعاء دالة معينة.
النوع الموثوق به	توقف مؤقتًا عند انتهاكات النوع الموثوق به.

نقاط التوقف لسطر الرمز

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

لضبط نقطة إيقاف لسطر التعليمات البرمجية في "أدوات مطوّري البرامج"، اتّبِع الخطوات التالية:

1. انقر على علامة التبويب المصادر.
2. افتح الملف الذي يحتوي على سطر التعليمة البرمجية الذي تريد تقسيمه.
3. انتقل إلى سطر التعليمة البرمجية.
4. يوجد على يسار سطر التعليمة البرمجية عمود رقم السطر. انقر عليه. يظهر أيقونة زرقاء أعلى عمود رقم الخط.

يوضّح هذا المثال نقطة إيقاف لسطر الرموز تم ضبطها في السطر 29.

نقاط التوقف لسطر التعليمة البرمجية في التعليمة البرمجية

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

console.log('a');
console.log('b');
debugger;
console.log('c');

نقاط التوقف المشروطة لسطر الرمز

يمكنك استخدام نقطة توقف شرطية لسطر الرمز عندما تريد إيقاف التنفيذ ولكن فقط عندما يكون هناك شرط معيّن صحيح.

نقاط التوقف هذه مفيدة عندما تريد تخطي الفواصل التي لا صلة لها بحالتك، خاصةً في حلقة التكرار.

لضبط نقطة إيقاف مشروطة لسطر الرمز:

1. افتح علامة التبويب المصادر.
2. افتح الملف الذي يحتوي على سطر التعليمة البرمجية الذي تريد تقسيمه.
3. انتقل إلى سطر التعليمة البرمجية.
4. يوجد على يسار سطر التعليمة البرمجية عمود رقم السطر. انقر بزر الماوس الأيمن عليه.
5. اختَر إضافة نقطة إيقاف شرطية. يظهر مربع حوار أسفل سطر التعليمة البرمجية.
6. أدخِل الشرط في مربّع الحوار.
7. اضغط على Enter لتفعيل نقطة الإيقاف. يظهر رمز برتقالي عليه علامة استفهام أعلى عمود رقم السطر.

يعرض هذا المثال نقطة إيقاف مشروطة لسطر الرمز والتي تم تنشيطها فقط عندما تتجاوز قيمة x القيمة 10 في التكرار الحلقي i=6.

تسجيل نقاط التوقف لسطر الرمز

يمكنك استخدام نقاط الإيقاف (نقاط التسجيل) في السجلّ (لنقاط التسجيل) لتسجيل الرسائل في وحدة التحكم بدون إيقاف التنفيذ مؤقتًا وبدون تكديس الرمز باستدعاءات console.log().

لضبط نقطة تسجيل، اتّبِع الخطوات التالية:

1. افتح علامة التبويب المصادر.
2. افتح الملف الذي يحتوي على سطر التعليمة البرمجية الذي تريد تقسيمه.
3. انتقل إلى سطر التعليمة البرمجية.
4. يوجد على يسار سطر التعليمة البرمجية عمود رقم السطر. انقر بزر الماوس الأيمن عليه.
5. اختَر إضافة نقطة تسجيل. يظهر مربع حوار أسفل سطر التعليمة البرمجية.

6. أدخِل رسالة السجلّ في مربّع الحوار. يمكنك استخدام البنية نفسها التي تستخدمها مع طلب console.log(message).

   على سبيل المثال، يمكنك تسجيل:

   "A string " + num, str.length > 1, str.toUpperCase(), obj
   

   في هذه الحالة، تكون الرسالة التي يتم تسجيلها هي:

   // str = "test"
   // num = 3
   // obj = {attr: "x"}
   A string 42 true TEST {attr: 'x'}
   

7. اضغط على Enter لتفعيل نقطة الإيقاف. يظهر أيقونة وردية بنقطتين أعلى عمود رقم السطر.

يعرض هذا المثال نقطة تسجيل في السطر 30 تسجِّل سلسلة وقيمة متغيّر في وحدة التحكّم.

تعديل نقاط التوقف لسطر الرمز

استخدِم لوحة النقاط الفاصلة لإيقاف نقاط التوقف لسطور الرمز أو تعديلها أو إزالتها.

تعديل مجموعات نقاط الإيقاف

تعمل لوحة نقاط الإيقاف على تجميع نقاط التوقف حسب الملف وترتيبها حسب رقم الأسطر والأعمدة. يمكنك تنفيذ ما يلي باستخدام المجموعات:

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

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

تحتوي المجموعات على قوائم سياقات. في لوحة نقاط الإيقاف، انقر بزر الماوس الأيمن على مجموعة واختَر:

• يُرجى إزالة جميع نقاط الإيقاف في الملف (مجموعة).
• إيقاف جميع نقاط الإيقاف في الملف
• تفعيل جميع نقاط الإيقاف في الملف
• أزِل جميع نقاط الإيقاف (في جميع الملفات).
• أزِل نقاط الإيقاف الأخرى (في المجموعات الأخرى).

تعديل نقاط الإيقاف

لتعديل نقطة إيقاف:

• انقر على الرمز بجانب نقطة إيقاف لتفعيلها أو إيقافها. عند إيقاف نقطة إيقاف، تجعل لوحة المصادر العلامة الخاصة بها بجانب رقم السطر شفافة.
• مرِّر مؤشر الماوس فوق نقطة إيقاف، وانقر على لتعديلها، وعلى لإزالتها.

• عند تعديل نقطة إيقاف، يمكنك تغيير نوعها من القائمة المنسدلة في المحرر المضمّن.

  

• انقر بزر الماوس الأيمن على نقطة إيقاف للاطّلاع على قائمة السياقات الخاصة بها وحدِّد أحد الخيارات التالية:

  

  • إظهار الموقع الجغرافي:
  • تعديل الشرط أو نقطة التسجيل
  • تفعيل كل نقاط الإيقاف
  • إيقاف جميع نقاط الإيقاف
  • إزالة نقطة الإيقاف
  • أزِل نقاط الإيقاف الأخرى (في جميع الملفات).
  • أزِل جميع نقاط الإيقاف (في جميع الملفات).

شاهد الفيديو للاطلاع على تعديلات مختلفة لنقاط التوقف أثناء العمل: إيقاف، وإزالة، وتعديل الحالة، والكشف عن الموقع من القائمة، وتغيير النوع.

نقاط الإيقاف لتغيير نموذج العناصر في المستند (DOM)

استخدِم نقطة إيقاف لتغيير DOM عندما تريد الإيقاف المؤقت على الرمز الذي يغيّر عقدة DOM أو عناصرها الفرعية.

لضبط نقطة إيقاف لتغيير نموذج العناصر في المستند (DOM)، اتّبِع الخطوات التالية:

1. انقر على علامة التبويب العناصر.
2. انتقِل إلى العنصر الذي تريد ضبط نقطة الإيقاف عليه.
3. انقر بزر الماوس الأيمن على العنصر.
4. مرِّر مؤشر الماوس فوق إيقاف، ثم اختَر تعديلات الشجرة الفرعية أو تعديلات السمات أو إزالة العُقد.

يعرض هذا المثال قائمة السياقات لإنشاء نقطة إيقاف لتغيير DOM.

يمكنك العثور على قائمة بنقاط إيقاف تغيير DOM في:

• العناصر > لوحة النقاط الفاصلة لـ DoM.
• المصادر > اللوحة الجانبية نقاط توقف نموذج العناصر في المستند (DOM)

ويمكنك من خلالها إجراء ما يلي:

• يمكنك تفعيلها أو إيقافها باستخدام "".
• انقر بزر الماوس الأيمن > إزالة أو الكشف عنها في نموذج العناصر في المستند (DOM).

أنواع النقاط الفاصلة لتغيير نموذج العناصر في المستند (DOM)

• تعديلات الشجرة الفرعية: يتم تشغيله عند إزالة أو إضافة عنصر ثانوي للعقدة المحدّدة حاليًا، أو عند تغيير محتوى عنصر فرعي. لا يتم تشغيلها عند تغييرات سمات العقدة الثانوية أو عند أي تغييرات في العقدة المحدّدة حاليًا.
• تعديلات السمات: يتم تشغيلها عند إضافة سمة أو إزالتها في العقدة المحدّدة حاليًا، أو عند تغيُّر قيمة سمة.
• إزالة العُقد: يتم تشغيلها عند إزالة العقدة المحدّدة حاليًا.

نقاط إيقاف جلب/XHR

استخدِم نقطة إيقاف XHR/جلب عندما تريد الإنهاء عندما يحتوي عنوان URL لطلب XHR على سلسلة محدّدة. تتوقف أدوات مطوّري البرامج مؤقتًا عند سطر الرمز حيث يستدعي XHR send().

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

لضبط نقطة إيقاف XHR/الجلب:

1. انقر على علامة التبويب المصادر.
2. وسِّع لوحة نقاط إيقاف XHR.
3. انقر على إضافة نقطة إيقاف.
4. أدخِل السلسلة التي تريد التقسيم وفقًا لها. تتوقف أدوات مطوّري البرامج مؤقتًا عندما تكون هذه السلسلة موجودة في أي مكان في عنوان URL لطلب XHR.
5. اضغط على Enter للتأكيد.

يوضّح هذا المثال كيفية إنشاء نقطة إيقاف XHR/جلب في النقاط الفاصلة للجلب/XHR لأي طلب يحتوي على org في عنوان URL.

نقاط الإيقاف لأداة معالجة الحدث

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

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

يوضّح هذا المثال كيفية إنشاء نقطة إيقاف أداة معالجة الحدث في deviceorientation.

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

يعرض هذا المثال برنامج تصحيح الأخطاء المتوقّف مؤقتًا في حدث setTimer الذي وقع في مشغّل خدمات.

يمكنك أيضًا العثور على قائمة بأدوات معالجة الأحداث في العناصر > لوحة أدوات معالجة الأحداث.

نقاط الإيقاف المتعلقة بالاستثناء

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

في لوحة نقاط الإيقاف من علامة التبويب المصادر، فعِّل أحد الخيارات التالية أو كليهما، ثم نفِّذ الرمز:

• ضع علامة في المربّع إيقاف مؤقت عند مواجهة أي استثناءات غير مرصودة.

  

  في هذا المثال، تم إيقاف التنفيذ مؤقتًا في استثناء غير مرصود.

• ضع علامة في المربّع إيقاف مؤقت عند رصد الاستثناءات التي تم رصدها.

  

  في هذا المثال، يتم إيقاف التنفيذ مؤقتًا على استثناء تم رصده.

الاستثناءات في المكالمات غير المتزامنة

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

تم رصد الاستثناءات والرموز التي تم تجاهلها

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

يعرض المثال التالي برنامج تصحيح الأخطاء متوقفًا مؤقتًا عند استثناء تم رصده طرحه library.js الذي تم تجاهله والذي يمر من خلال mycode.js لم يتم تجاهله.

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

نقاط الإيقاف للدوال

يمكنك استدعاء debug(functionName)، حيث تمثّل functionName الدالة التي تريد تصحيح أخطائها، عندما تريد الإيقاف المؤقت كلما تم استدعاء دالة معيّنة. يمكنك إدراج debug() في الرمز الخاص بك (مثل عبارة console.log()) أو استدعائه من وحدة تحكّم أدوات مطوّري البرامج. تُعادل debug() ضبط نقطة إيقاف لسطر الرمز في السطر الأول من الدالة.

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.
sum();

التأكد من أن الدالة الهدف في النطاق

تعرض "أدوات مطوّري البرامج" الخطأ ReferenceError إذا لم تكن الدالة التي تريد تصحيح أخطائها تقع ضمن النطاق.

(function () {
  function hey() {
    console.log('hey');
  }
  function yo() {
    console.log('yo');
  }
  debug(yo); // This works.
  yo();
})();
debug(hey); // This doesn't work. hey() is out of scope.

قد يكون من الصعب التأكّد من أنّ الوظيفة المستهدفة في نطاق السياسة إذا كنت تستدعي debug() من "وحدة تحكّم أدوات مطوّري البرامج". في ما يلي استراتيجية واحدة:

1. اضبط نقطة توقف لسطر الرمز في مكان توجد فيه الدالة.
2. شغِّل نقطة الإيقاف.
3. اطلب الرمز debug() في وحدة تحكّم أدوات مطوّري البرامج عندما لا يزال الرمز متوقفًا مؤقتًا في نقطة الإيقاف الخاصة بسطر الرموز.

النقاط الفاصلة للأنواع الموثوق بها

توفر واجهة برمجة التطبيقات للنوع الموثوق به الحماية ضد محاولات الاختراق الأمني المعروفة باسم هجمات البرمجة النصية عبر المواقع الإلكترونية (XSS).

في لوحة نقاط الإيقاف من علامة التبويب المصادر، انتقِل إلى القسم نقاط التوقف عن انتهاك سياسة أمان المحتوى (CSP) وفعِّل أحد الخيارَين التاليَين أو كليهما، ثم نفِّذ الرمز:

• اطّلِع على مخالفات مخزن البيانات.

  

  في هذا المثال، تم إيقاف التنفيذ مؤقتًا عند حدوث انتهاك بالوعة.

• اطّلِع على انتهاكات السياسة.

  

  في هذا المثال، يتم إيقاف التنفيذ مؤقتًا عند انتهاك السياسة. تم إعداد سياسات "النوع الموثوق به" باستخدام trustedTypes.createPolicy.

يمكنك العثور على مزيد من المعلومات حول استخدام واجهة برمجة التطبيقات:

• ولتعزيز أهدافك الأمنية، يُرجى الانتقال إلى مقالة منع الثغرات الأمنية في النصوص البرمجية للمواقع الإلكترونية المتعددة المستندة إلى نموذج العناصر في المستند (DOM) باستخدام الأنواع الموثوق بها.
• لتصحيح الأخطاء، انتقِل إلى مقالة تنفيذ تصحيح أخطاء CSP والأنواع الموثوق بها في "أدوات مطوري البرامج في Chrome".