تصحيح الأخطاء في JavaScript: تسجيل الدخول إلى Browser Console

تصحيح الأخطاء في JavaScript: تسجيل الدخول إلى Browser Console

تعد وحدة تحكم مستعرض الويب واحدة من أكثر الأدوات استخدامًا على نطاق واسع لتصحيح أخطاء تطبيقات الواجهة الأمامية. توفر Console API للمطورين القدرة على معالجة الأخطاء وتسجيل الرسائل.



console.log () من المحتمل أن تكون الطريقة الأكثر استخدامًا في Console API ، ولكن هناك طرق أخرى أيضًا يمكنك استخدامها في سير عملك. يوضح لك هذا الدليل الطرق المختلفة لوحدة تحكم مستعرض الويب التي يمكنك استخدامها لتحسين سير عمل تصحيح الأخطاء.





لماذا التسجيل مهم؟

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





ذات صلة: 6 أطر عمل جافا سكريبت تستحق التعلم

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



نصيحة : يمكن لوحدة تحكم المتصفح تشغيل جميع التعليمات البرمجية التي تمت مناقشتها في هذا الدليل. صحافة F12 على لوحة المفاتيح لفتح أدوات مطوري المتصفح في Chrome أو Firefox.

تسجيل الرسائل المتسلسلة

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





كيفية معرفة ما يستخدم النطاق الترددي على الشبكة

لإخراج أ مرحبا بالعالم رسالة ، يمكنك استخدام ما يلي.

console.log(`Hello World`);

ميزة خاصة أخرى من console.log () الطريقة هي القدرة على طباعة ناتج عناصر DOM أو بنية جزء من موقع ويب ، على سبيل المثال ، لإخراج بنية عنصر الجسم وكل شيء بداخله يستخدم ما يلي.





console.log(document.body)

الإخراج عبارة عن مجموعة من عناصر DOM كشجرة HTML.

تسجيل كائنات JavaScript التفاعلية

ال وحدة التحكم. dir () يتم استخدام الطريقة لتسجيل الخصائص التفاعلية لكائنات JavaScript. على سبيل المثال ، يمكنك استخدامه لعرض عناصر DOM في صفحة ويب.

الناتج النموذجي لملف وحدة التحكم. dir () تتكون الطريقة من جميع خصائص كائن JavaScript المحدد بتنسيق JSON. استخدم الطريقة أدناه لطباعة خصائص جميع العناصر في نص صفحة HTML:

console.dir(document.body)

إيجاد قيمة التعبيرات

قد تكون على دراية بأساليب التأكيد من اختبار الوحدة — وكذلك console.assert () الطريقة تعمل بطريقة مماثلة. استخدم ال console.assert () طريقة لتقييم تعبير أو شرط.

عندما يفشل أسلوب التأكيد ، تطبع وحدة التحكم رسالة خطأ ؛ وإلا فإنه لا يطبع أي شيء. استخدم الكود أدناه لتقييم ما إذا كان عمر الشخص أكبر من 18:

let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';

console.assert( yourAge > ageLimit, assertFailMessage);

يفشل التأكيد أعلاه ويتم طباعة رسالة خطأ وفقًا لذلك.

تسجيل البيانات في الجداول

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

ملحوظة : بعض المتصفحات ، مثل Firefox ، لها حد أقصى يبلغ 1000 صف يمكن عرضها بامتداد وحدة التحكم. جدول () طريقة.

بافتراض أن لديك المجموعة التالية من كائنات السيارة:

let cars = [
{'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},
{'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}
]

يمكنك عرض المصفوفة أعلاه في جدول باستخدام الطريقة أدناه:

console.table(cars);

تسجيل الرسائل حسب الفئة

يتم تصنيف رسائل وحدة تحكم مستعرض الويب بشكل أساسي إلى ثلاث مجموعات: الخطأ والتحذير والمعلومات.

أخطاء

لطباعة رسائل الخطأ على وجه التحديد إلى وحدة التحكم باستخدام ملف خطأ وحدة التحكم () الطريقة ، يتم عرض الرسائل المتعلقة بالخطأ بخط أحمر.

console.error('error message');

تحذيرات

لطباعة التحذيرات ، استخدم ما يلي. كما هو الحال مع معظم السيناريوهات ، يتم عرض رسائل التحذير باللون البرتقالي:

console.warn('warning message');

معلومات

لطباعة معلومات عامة إلى وحدة التحكم ، استخدم ملف console.info () طريقة:

console.info('general info message')

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

تدفق برنامج التتبع

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

لرؤية ال وحدة التحكم. تتبع () الطريقة في العمل ، يمكنك إنشاء ثلاث وظائف (كما هو موضح أدناه) ووضع تتبع مكدس في إحدى الوظائف.

function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}

في وحدة تحكم المستعرض الخاص بك ، اتصل أو أطلق functionOne () وستحصل على تتبع مكدس لاستدعاءات الوظائف المطبوعة في Last In First Out Order (LIFO) لأنها مكدس.

توقيت تنفيذ البرنامج

لتحديد الوقت الذي تستغرقه العملية للتنفيذ في برنامجك ، يمكنك استخدام ملف console.time () طريقة. console.time () عادةً ما يتم استخدامه مع console.timeEnd () الطريقة التي يتم فيها استخدام الأخير لإنهاء الموقت.

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

لتحديد الوقت الذي تستغرقه حلقة for للانتقال عبر الأرقام من 1 إلى 50000 ، يمكنك استخدام المؤقت على النحو التالي.

console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');

عد

ال console.count () تُستخدم هذه الطريقة لتتبع عدد المرات التي تم فيها استدعاء دالة أو جزء من التعليمات البرمجية في البرنامج. على سبيل المثال ، يمكننا تتبع عدد مرات تنفيذ حلقة for على النحو التالي:

for(i=0; i<4; i++ ){
console.count();
}

تجميع رسائل السجل

تمامًا مثل طريقة المؤقت ، فإن console.group () ، و console.groupEnd () عادة ما تستخدم الطرق في أزواج.

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

console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()

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

مسح لوحة التحكم

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

استخدم ال console.clear () الطريقة على النحو التالي.

console.clear()

يمكنك أيضًا مسح وحدة تحكم المتصفح باستخدام اختصارات لوحة مفاتيح المتصفح.

جوجل كروم : السيطرة + L.

ثعلب النار : Ctrl + Shift + L

استخدام المتصفح على أكمل وجه

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

الألعاب التي يمكنك الدردشة مع الناس

قم بإجراء التحقق من صحة CAPTCHA من مشروعك التالي واختبر مهاراتك الجديدة في تصحيح الأخطاء!

يشارك يشارك سقسقة بريد الالكتروني قم بإنشاء نموذج التحقق من صحة CAPTCHA باستخدام HTML و CSS وجافا سكريبت

تأمين مواقع الويب الخاصة بك مع التحقق من صحة CAPTCHA.

اقرأ التالي
مواضيع ذات صلة
  • برمجة
  • تطوير الشبكة
  • جافا سكريبت
نبذة عن الكاتب جاهز للمضي(36 مقالة منشورة)

تقوم Mwiza بتطوير البرامج حسب المهنة وتكتب على نطاق واسع على Linux والبرمجة الأمامية. تشمل بعض اهتماماته التاريخ والاقتصاد والسياسة والهندسة المعمارية للمؤسسات.

المزيد من Mwiza Kumwenda

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك