شرح الخاصية debugger

السلام عليكم ورحم الله تعالى وبركاته،

Debugger هو المصحّح في جافاسكريبت ومن اسمه يظهر لنا دوره فهو أداة نستخدمها لإيقاف تنفيذ الكود ولكن بشكل مؤقت حتى نتمكن من فحص ما يحدث داخل البرنامج خطوة بخطوة.

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

إليك هذا المثال:

function sayHello(name) {
  let message = "Hello, " + name;
  debugger;
  alert(message);
}

sayHello("Hsoub Academy");

هنا الكود سيتوقف عند debugger ويمكنك حينها أن ترى أن  قيمة name هي:

name = "Hsoub Academy"

وقيمة message هي:

message = "Hello, Hsoub Academy"

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

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

debugger في JavaScript

وليس فقط debugger بل مختلف الوسوم والعناصر والدوال وغيرها كلها مشروحة هناك بشكل مبسط مرفقة بأمثلة عملية.

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

وببساطة debugger هو عبارة عن نقطة توقف للمبرمج ليفحص الكود لاحظ هذا المثال:

let x = 5;
let y = 10;

debugger; // هنا سيتوقف الكود لتفحص القيم

let z = x + y;
console.log(z);

هنا يمكنك عندها مشاهدة قيمة x وy قبل أن يحسب z ونستعملها هنا لمعرفة إن كانت المتغيرات فعلا تحمل القيم الصحيحة المتوقعة أم لا وتختلف الاستعمالات حسب الكود الذي ترغب في استخدام المنقّح عليه.

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

حيث الكلمة المفتاحية debugger تستخدم داخل الكود وعندما يصل المتصفح إليها أثناء التنفيذ يتوقف الكود مؤقتًا ويفتح أدوات المطور (Developer Tools) في تبويب Sources تلقائيا، لتتمكن من:

• مشاهدة القيم الحالية للمتغيرات.
• التقدم خطوة بخطوة (Step over / Step into).
• فهم تسلسل التنفيذ.
• اكتشاف أي متغيرات غير صحيحة أو مشاكل في منطق الكود لديك.

فمثلا :

قم بفتح المتصفح ثم قم بالضغط على F12 لفتح Developer Tools ثم قم بالذهاب لتبويب Console وقم بوضع الكود التالي:

function calculateTotal(price, tax) {
  const total = price + tax;
  debugger; // يتوقف هنا التنفيذ
  return total;
}

const result = calculateTotal(100, 20);
console.log("Total:", result);

وهنا سينفذ السطر const total = price + tax وعندما يصل إلى debugger; سيتوقف الكود مؤقتا. وسيتم فتح تبويب Sources تلقائيا في أدوات المطور.

ويمكنك الآن:

• مشاهدة المتغيرات (مثل price, tax, total)
• الضغط على Step over أو Step into لمتابعة الكود خطوة بخطوة.
• فحص ال Call Stack والأحداث الجارية.

وإليك الدرس التالي لمزيد من التفاصيل والشرح من خلال متصفح chrome :