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

Kayce Basques

Sofia Emelianova

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

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

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

نقاط الإيقاف في سطر الرمز البرمجي

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

لضبط نقطة توقّف لخط رمز في "أدوات مطوّري البرامج":

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 = 42
   // obj = {attr: "x"}
   A string 42 true TEST {attr: 'x'}
   

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

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

تعديل نقاط إيقاف سطر الرمز البرمجي

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

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

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

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

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

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

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

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

لتعديل نقطة توقّف:

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

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

  

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

  

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

شاهِد الفيديو للاطّلاع على تعديلات مختلفة لنقاط التوقف أثناء تنفيذها: إيقافها أو إزالتها أو تعديل الشرط أو إظهار موقعها من القائمة أو تغيير نوعها.

تخطّي نقاط الإيقاف باستخدام الخيار "عدم الإيقاف المؤقت هنا مرة أخرى"

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

لإيقاف صوت موقع فاصل إعلاني:

1. في لوحة المصادر، افتح ملف المصدر وابحث عن السطر الذي لا تريد تقسيمه.
2. انقر بزر الماوس الأيمن على رقم السطر في عمود رقم السطر على يمين العبارة التي تؤدي إلى الفاصل.
3. من القائمة المنسدلة، اختَر عدم الإيقاف المؤقت هنا مطلقًا. تظهر نقطة إيقاف برتقالية (شرطية) بجانب السطر.

يمكنك أيضًا كتم صوت نقطة التوقف أثناء إيقاف التنفيذ مؤقتًا. شاهد الفيديو التالي للتعرّف على سير العمل.

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

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

نقاط إيقاف تغيير DOM

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

لضبط نقطة إيقاف لتغيير DOM:

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

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

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

• العناصر > لوحة نقاط DOM الفاصلة
• المصادر > اللوحة الجانبية نقاط DOM الفاصلة

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

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

أنواع نقاط DOM الفاصلة لتغييرات DOM

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

النقاط الفاصلة للاسترجاع/طلبات XHR

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

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

لضبط نقطة إيقاف الجلب/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() من DevTools Console. في ما يلي استراتيجية واحدة:

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

نقاط إيقاف "النوع الموثوق به"

توفّر واجهة برمجة التطبيقات Trusted Type الحماية من الاستغلالات الأمنية المعروفة باسم هجمات البرمجة النصية على المواقع الإلكترونية (XSS).

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

• راجع انتهاكات مخزن البيانات.

  

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

• راجِع انتهاكات السياسة.

  

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

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

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