تصحيح الأخطاء في كروم

قبل كتابة أي كود معقد , فلنتحدث قليلا عن تصحيح الأخطاء.

(Debugging) تصحيح الأخطاء هي عملية البحث و تصحيح الأخطاء في الكود. كل المتصفحات الحديثة و معظم بيئات العمل تدعم تصحيح الأخطاء – تجعل أدوات مطور واجهة المستخدم الخاصة عملية تصحيح الأخطاء أسهل , فهي تسمح ايضا بتتبع الكود خطوة بخطوة لمعرفة حقيقة ما يجري.

هنا سنستخدم جوجل كروم, لأن بها من الخواص الكثير و معظم المتصفحات لها عمليات مشابهة.

لوحة “المصادر”

قد يبدو اصدار متصفح كروم الخاص بك مختلف قليلا ,لكن سيظل كل شئ بداخله واضح.

• افتح صفحة المثال في كروم.
• قم بتشغيل أدوات المطور باستخدام F12 أو (Mac : Cmd+Opt+I).
• اختر لوحة المصادر Sources

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

زر التبديل يفتح التبويب محتويا الملفات.

فلنضغط عليه Ùˆ نختار hello.js في العرض الشجري . هذا هو ما سيظهر:

The Sources panel has 3 parts: لوحة المصادر بها ثلاثة أقسام:

1. لوحة مستكشف الملفات و التي يظهر بها كل ملفات ال HTML, JavaScript, CSS و الملفات الأخري متضمنة الصور الملحقة بالصفحة. اضافات كروم قد تظهر هنا أيضا.
2. لوحة محرر الكود و التي يظهر بها كود الصفحة.
3. لوحة مصحح أخطاء JavaScript لتصحيح الأخطاء, و سيتم شرحها بعد قليل.

الآن بامكاننا الضغط علي نفس الزر لاخفاء قائمة المصادر و اعطاء الكود بعض المساحة.

وحدة التحكم (Console)

اذا ضغطنا علي زر Esc, هنا ستظهر لوحة التحكم بالأسفل حيث يمكننا طباعة الأوامر و ضغط Enter لتنفيذها.

بعد ان يتم تنفيذ الأمر, الناتج يظهر اسفله.

كمثال, هنا 1+2 ينتج عنها 3 Ùˆ hello("debugger") لا ينتج عنها شئ, لذا فالناتج يكون undefined.

نقاط التوقف (Breakpoints)

فلنري ما يحدث في أكواد صفحة المثال. في hello.js, قم بالضغط علي السطر 4, نعم, علي الرقم 4ليس علي الكود نفسه

مبروك! لقد وضعت نقطة توقف, فلتضع اخري علي السطر رقم 8>

من المفترض ان تبدو هكذا (الأزرق هو المكان الذي يفترض عليك الضغط عليه) :

نقطة التوقف هي نقطة في الكود يتوقف عندها تنفيذ كود ال JavaScript بشكل تلقائي.

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

يمكننا دائمًا العثور على قائمة بنقاط التوقف في اللوحة اليمنى. هذا مفيد عندما يكون لدينا العديد من نقاط التوقف في ملفات مختلفة.فهو يتيح لنا:

• الانتقال بسرعة إلى نقطة التوقف في الكود (بالضغط عليها في اللوحة اليمنى).
• تعطيل نقطة التوقف مؤقتًا بإلغاء تحديدها.
• قم بإزالة نقطة التوقف بالنقر بزر الماوس الأيمن واختيار إزالة.
• …و هكذا.

أمر مصحح الخطأ(Debugger)

يمكننا أيضًا إيقاف الكود مؤقتًا باستخدام الأمر debugger الموجود فيه ØŒ كالتالي:

function hello(name) {
  let phrase = `Hello, ${name}!`;

  debugger;  // <-- يتوقف مصحح الأخطاء هنا

  say(phrase);
}

هذا الأمر مريح للغاية عندما نكون في محرر أكواد ولا نريد التبديل إلى المتصفح والبحث عن النص في أدوات المطور لتعيين نقطة التوقف.

انتظر قليلا وانظر حولك

في مثالنا ØŒ hello() يتم النداء عليها عند تحميل الصفحة, لذا اسهل طريقة لتفعيل مصحح الأخطاء (بعد وضع نقطة التوقف) هي اعادة تحميل الصفحة. لذا نضغط F5 (Windows, Linux) أو Cmd+R (Mac).

عند تعيين نقطة التوقف ، يتوقف التنفيذ مؤقتًا عند السطر الرابع:

من فضلك افتح القوائم المنسدلة للمعلومات على اليمين (الموضح بالأسهم)و التي تسمح لك بفحص حالة الكود الحالية:

1. Watch – يعرض القيم الحالية لأي تعبيرات.

   يمكننا النقر فوق علامة زائد + وإدخال تعبير. سيظهر مصحح الأخطاء قيمته في أي لحظة ØŒ ويعيد حسابه تلقائيًا في عملية التنفيذ.

2. Call Stack – يعرض سلسلة من الاستدعاءات المترابطة.

   في الوقت الحالي ØŒ يكون المصحح داخل استدعاء hello () ØŒ والذي يتم استدعاؤه بواسطة النص في index.html (لا توجد دالة هناك ØŒ لذلك يطلق عليه" مجهول ").

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

3. Scope – المتغيرات الحالية.

   Local يظهر المتغيرات المحلية للدوال. يمكنك أيضًا رؤية قيمهم مظللة مباشرة فوق المصدر.

   Global له متغيرات عامة (من أي دوال).

   هنالك ايضا كلمة this Ùˆ التي لم نطلع عليها بعد, Ùˆ لكننا سنفعل قريبا.

تتبع التنفيذ

حان الوقت الآن لتتبع النص.

توجد أزرار لها في أعلى اللوحة اليمنى. فلندرسهم.

– “إكمال”: الاستمرار في التنفيذ, زره السريع F8.

استئناف التنفيذ. إذا لم تكن هناك نقاط توقف إضافية ، فسيستمر التنفيذ فقط ويفقد المصحح السيطرة.

إليك ما يمكننا رؤيته بعد النقر عليه:

تم استئناف التنفيذ ØŒ ووصل إلى نقطة توقف أخرى داخل say () وتوقف هناك. ألق نظرة على “Call Stack” على اليمين. وقد زادت بنداء واحد آخر. نحن داخل say () الآن.

– “خطوة”: تقوم بتشغيل الأمر التالي, زره السريع F9.

تشغيل العبارة التالية. إذا نقرنا عليه الآن ،سيظهر alert.

سيؤدي النقر عليه مرة أخرى تلو الأخرى إلى استعراض كافة عبارات النص واحدًا تلو الآخر.

– “خطوة للأمام”: تقوم بتشغيل الأمر التالي, لكن لا تدخل بداخل الدالة, زره السريع F10.

يشبه الأمر “خطوة” السابق ØŒ ولكنه يتصرف بشكل مختلف إذا كانت العبارة التالية هي استدعاء دالة. اذا لم تكن دالة مدمجة ØŒ مثل alertØŒ ولكنها دالة من انشاءنا.

ينتقل الأمر “خطوة” إليه ويوقف التنفيذ عند السطر الأول مؤقتًا ، بينما يقوم “خطوة للأمام” باستدعاء الدالة المتداخلة بشكل غير مرئي ، مع تخطي الدوال الداخلية.

يتم إيقاف التنفيذ بعد ذلك مباشرة بعد هذه الدالة.

هذا أمر جيد إذا لم نرغب في معرفة ما يحدث داخل استدعاء الدالة.

– “خطوة للداخل”, زره السريع F11.

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

للمعرفة مستقبلا ØŒ لاحظ فقط أن الأمر “خطوة” يتجاهل الإجراءات غير المتزامنة ØŒ مثل setTimeout (نداء الدوال المجدولة) ØŒ التي يتم تنفيذها لاحقًا. تدخل “الخطوة للداخل” في الكود الخاص بهم ،و تنتظرهم إذا لزم الأمر.

لمزيد من التفاصيل , اتطلع علي DevTools manual.

– “خطوة للخارج”: تابع التنفيذ حتى نهاية الدالة الحالية ، زره السريع Shift+F11.

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

– تفعيل / تعطيل جميع نقاط التوقف.

هذا الزر لا ينقل التنفيذ. مجرد ايقاف/تفعيل كلي لكل نقاط التوقف.

– تفعيل / تعطيل الإيقاف المؤقت التلقائي في حالة حدوث خطأ.

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

التسجيل (Logging)

To output something to console from our code, there’s console.log . لإخراج شيء ما إلى وحدة التحكم من الكودالخاص بنا ØŒ هناك دالة console.log.

على سبيل المثال ØŒ ينتج عن هذا القيم من 0 إلى4 إلى وحدة التحكم:

// افتح وحدة التحكم لترى
for (let i = 0; i < 5; i++) {
  console.log("value,", i);
}

لا يرى المستخدمون العاديون هذا المخرج ، فهو موجود في وحدة التحكم. لمشاهدته ، إما أن تفتح لوحة وحدة التحكم في أدوات المطورين أو اضغط على “المفتاح: Esc” أثناء وجودك في لوحة أخرى: تفتح وحدة التحكم في الأسفل.

إذا كان لدينا ما يكفي من التسجيل في الكود الخاص بنا ، فيمكننا أن نرى ما يحدث من السجلات ، دون استخدام مصحح الأخطاء.

الملخص

كما نرى ، هناك ثلاث طرق رئيسية لإيقاف النص مؤقتًا:

1. نقطة توقف.
2. عبارة أمر مصحح الخطأ debugger.
3. خطأ (اذا كانت ادوات المطور مفتوحة و زر مفعل اي قيمته “on”).

عند الإيقاف المؤقت ، يمكننا تصحيح الأخطاء – فحص المتغيرات وتتبع الكود لمعرفة المكان الذي يذهب فيه التنفيذ بشكل خاطئ.

هناك العديد من الخيارات في أدوات المطورين أكثر من تلك المغطاة هنا. الدليل الكامل في https://developers.google.com/web/tools/chrome-devtools.

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

يمكن أيضًا يمكنك النقر على أماكن مختلفة من أدوات التطوير ومعرفة ما يظهر. ربما هذا هو أسرع طريق لتعلم أدوات المطورين. لا تنس النقر بزر الماوس الأيمن وقوائم السياق!