9 طرق لتحسين إجراء الت调试 لـ JavaScript باستخدام أدوات الت调试 المدمجة في Chrome و Firefox

نحن نستخدم عادةً أدوات الت调试 المدمجة في Chrome أو Firefox لتحسين JavaScript، ويقوم هذا المقال بعرض بعض النصائح المستخدمة في الت调试 لـ JavaScript، وبتعلم هذه النصائح، يمكننا تقليل الوقت الذي ننفقونه في حل الأخطاء والثغرات، مما يزيد من كفاءة التطوير.

1. debugger

إضافة إلى console.log، debugger هو أداة الت调试 المفضلة لدينا، السريعة. عند تنفيذ الكود، سيتوقف Chrome تلقائيًا عند التنفيذ. يمكنك حتى تضمينه في شرط، مما يجعله يعمل فقط عند الحاجة.

if (thisThing) { 
 debugger; 
}

2. عرض الأشياء باستخدام جدول

في بعض الأحيان، تحتاج إلى عرض مجموعة معقدة من الأشياء. يمكنك استخدام console.log لعرضها والتمرير من خلالها، أو استخدام console.table لتوسيعها، مما يجعل من السهل رؤية المحتوى الذي يتم معالجته!

var animals = [ 
 { animal: 'Horse', name: 'Henry', age: 43 }, 
 { animal: 'Dog', name: 'Fred', age: 13 }, 
 { animal: 'Cat', name: 'Frodo', age: 18 } 
]; 
console.table(animals); 

3. استخدام أبعاد الشاشة المختلفة

من الرائع تثبيت محاكيات أجهزة متنوعة على سطح المكتب، ولكن في الواقع ليس ممكنًا. كيفية تعديل حجم النافذة؟ يقدم Chrome كل ما تحتاجه. انتقل إلى محطة التحكم و انقر على زر 'التبديل إلى نمط الجهاز'. قم بإجراء ملاحظة للتغيير في النافذة!

　

4. اختبار الدورات باستخدام console.time() و console.timeEnd()

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

console.time('Timer1'); 
var items = []; 
للحصول على i من 0 إلى 100000; 
 items.push({index: i}); 
} 
console.timeEnd('Timer1'); 

تم إنتاج بعض النتائج التالية:

　

5. قم بتنسيق الكود قبل إجراء اختبارات JavaScript

بعض الأحيان قد تواجه مشاكل في بيئة الإنتاج، ولكن لا تقلق بشأن ملفات source maps التي لم يتم نشرها في بيئة الإنتاج. لا تخف. يمكن لتسلسل Chrome تنسيق ملفات JavaScript الخاصة بك. قد لا تكون الكودات المنسقة مفيدة مثل الكود الأصلي، ولكن على الأقل يمكنك رؤية ما يحدث. انقر على زر مصادر الكود في محطة التحكم الخاصة بـ Chrome.

　

6. مراقبة استدعاء الدوال المحددة و المعلمات
في محطة التحكم الخاصة بـ Chrome، يمكنك مراقبة الدوال المحددة. كلما تم استدعاء الدالة، سيتم طباعة المعلمات التي تم إيصالها.

var func1 = function(x, y, z) { 
//.... 
}; 

الإخراج:

　

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

7. الوصول السريع إلى العناصر في لوحة التحكم

أسرع طريقة في لوحة التحكم لاستخدام querySelector هي استخدام رمز الدولار، $('css-selector') سيقوم بإرجاع العنصر الأول الذي يطابق النموذج. $$('css-selector') سيقوم بإرجاع جميع العناصر التي تطابق النموذج. إذا كنت تستخدم عنصرًا عدة مرات، يمكنك حفظه كمتغير.

　

8. Postman رائع (لكن Firefox أسرع)

العديد من المطورين يستخدمون Postman للنظر في طلبات AJAX. Postman رائع حقًا. لكن فتح نافذة جديدة، كتابة كائن الطلب، ثم اختباره، يبدو أمرًا مزعجًا.

في بعض الأحيان يكون استخدام المتصفح أسهل.

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

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

سأقوم بإرسال طلبين مرة أخرى باستخدام خصائص مختلفة:

　

9. التوقف عند تغيير العنصر

DOM شيء ممتع. في بعض الأحيان يغير نفسه، ولا تعرف لماذا. ولكن، عندما ت调试 JavaScript، يمكن لـ Chrome التوقف عند تغيير عنصر DOM. يمكنك حتى مراقبة خصائصه. في لوحة التحكم في Chrome، انقر بزر الماوس الأيمن على العنصر، ثم اختر الإعداد واختر التوقف:

أدوات الت调试 المدمجة في Chrome وFirefox قوية جدًا، هناك العديد من الميزات الصغيرة المفيدة تحتاج إلى اكتشافها.