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

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 الفاصلة لتغيير المحتوى

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

النقاط الفاصلة للاسترجاع/طلبات 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

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

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

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

  

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

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

  

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

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

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