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

Kayce Basques

Sofia Emelianova

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

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

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

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

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

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

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. انقر على علامة التبويب Elements.
2. انتقِل إلى العنصر الذي تريد ضبط نقطة الإيقاف عليه.
3. انقر بزر الماوس الأيمن على العنصر.
4. مرِّر مؤشر الماوس فوق فاصل في، ثم اختَر تعديلات الشجرة الفرعية أو تعديلات السمات. إزالة العُقد:

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

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

• Elements > نقاط 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 حدث في مشغّل خدمات.

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

نقاط إيقاف الاستثناء

استخدم نقاط توقف الاستثناء عندما تريد التوقف مؤقتًا عند سطر الرمز الذي يؤدي إلى طرح خطأ استثناء غير معروف. يمكنك إيقاف هذين الاستثناءَين مؤقتًا بشكل مستقل في أي جلسة تصحيح أخطاء غير 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() من خلال وحدة تحكّم أدوات مطوّري البرامج عندما يكون الرمز متوقفًا مؤقتًا في سطر الرمز البرمجي. نقطة توقف.

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

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

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

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

  

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

• يُرجى الاطّلاع على انتهاكات السياسة.

  

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

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

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