كيفية الحصول على أقصى استفادة من وحدة تحكم JavaScript

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

يمكنك استخدام وحدة التحكم لتنفيذ بعض المهام التالية:

  • إخراج جهاز توقيت للمساعدة في قياس بسيط
  • قم بإخراج جدول لعرض صفيف أو كائن بتنسيق سهل القراءة
  • قم بتطبيق اللون وخيارات التصميم الأخرى على الإخراج باستخدام CSS

كائن وحدة التحكم

يمنحك كائن وحدة التحكم إمكانية الوصول إلى وحدة تحكم المتصفح. يتيح لك إخراج السلاسل والمصفوفات والكائنات التي تساعد على تصحيح التعليمات البرمجية الخاصة بك. تعد وحدة التحكم جزءًا من كائن النافذة ، ويتم توفيرها بواسطة طراز كائن المستعرض (BOM).

يمكننا الوصول إلى وحدة التحكم بإحدى طريقتين:

  1. window.console.log ("هذا يعمل")
  2. console.log ('هكذا يفعل هذا')

الخيار الثاني هو في الأساس إشارة إلى الأول ، لذلك سنستخدم الخيار الأخير لحفظ ضغطات المفاتيح.

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

إخراج النص

تسجيل النص إلى وحدة التحكم

العنصر الأكثر شيوعًا في كائن وحدة التحكم هو console.log. بالنسبة لمعظم السيناريوهات ، ستستخدمها لإنجاز المهمة.

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

  1. سجل
  2. معلومات
  3. حذر
  4. خطأ

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

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

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

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

سلسلة البدائل

تستخدم هذه التقنية عنصرًا نائبًا في سلسلة يتم استبدالها بالوسيطة (الوسائط) الأخرى التي تقوم بتمريرها إلى هذه الطريقة. فمثلا:

الإدخال: console.log ('string٪ s' ، 'بدائل')

الإخراج: بدائل سلسلة

٪ s هو العنصر النائب لـ "بدائل" الوسيطة الثانية التي تأتي بعد الفاصلة. سيتم تحويل أي سلاسل أو أعداد صحيحة أو صفائف إلى سلسلة وسيتم استبدال٪ s. إذا قمت بتمرير كائن ، فسيتم عرض [كائن كائن].

إذا كنت تريد تمرير كائن ، فأنت بحاجة إلى استخدام٪ o أو٪ O بدلاً من٪ s.

console.log ('هذا كائن٪ o' ، {obj: {obj2: 'hello'}})

أعداد

يمكن استخدام استبدال السلسلة مع الأعداد الصحيحة وقيم الفاصلة العائمة باستخدام:

  • ٪ i أو٪ d للأعداد الصحيحة ،
  • ٪ f للنقاط العائمة.

الإدخال: console.log ('int:٪ d ، الفاصلة العائمة:٪ f' ، 1 ، 1.5)

الإخراج: int: 1 ، الفاصلة العائمة: 1.500000

يمكن تنسيق العوامات لعرض رقم واحد فقط بعد العلامة العشرية باستخدام٪ .1f. يمكنك عمل٪ .nf لعرض عدد من الأرقام n بعد العلامة العشرية.

إذا قمنا بتنسيق المثال أعلاه لعرض رقم واحد بعد العلامة العشرية لرقم الفاصلة العائمة ، فسيبدو كما يلي:

الإدخال: console.log ('int:٪ d ، الفاصلة العائمة:٪ .1f' ، 1 ، 1.5)

الإخراج: int: 1 ، الفاصلة العائمة: 1.5

محددات التنسيق

  1. ٪ s | يستبدل عنصر بسلسلة
  2. ٪ (د | ط) | يستبدل عنصر مع عدد صحيح
  3. ٪ f | يستبدل عنصر بعوامة
  4. ٪ (س | س) | يتم عرض العنصر ككائن.
  5. ٪ ج | يطبق CSS المتوفر

قوالب السلسلة

مع ظهور ES6 ، تعد حرفية القوالب بديلاً عن البدائل أو السلاسل. يستخدمون backticks (``) بدلاً من علامات اقتباس ، والمتغيرات تدخل داخل $ {}:

const a = 'بدائل' ؛
console.log (`bear: $ {a}`) ؛
// الدب: بدائل

يتم عرض الكائنات على أنها [كائن كائن] في القوالب الحرفية ، لذلك ستحتاج إلى استخدام الإحلال باستخدام٪ o أو٪ O لرؤية التفاصيل ، أو تسجيلها بشكل منفصل بمفرده.

يؤدي استخدام البدائل أو القوالب إلى إنشاء رمز يسهل قراءته مقارنة باستخدام سلسلة السلسلة: console.log ('hello' + str + '!') ؛.

فاصل اللون جميلة!

الآن حان الوقت لشيء أكثر متعة قليلا والملونة!

لقد حان الوقت لجعل وحدة التحكم الخاصة بنا تبرز بألوان مختلفة مع بدائل السلسلة.

سوف أستخدم مثالا ساخرا أجاكس يمنحنا النجاح (باللون الأخضر) وفشل (باللون الأحمر) في العرض. إليك الإخراج والرمز:

الدببة الناجحة والفشل الخفافيش
نجاح const = [
 "الخلفية: الأخضر" ،
 'اللون الابيض'،
 'العرض محجوب'،
 "محاذاة النص: الوسط"
].انضم('؛')؛
فشل const = [
 "الخلفية: الأحمر" ،
 'اللون الابيض'،
 'العرض محجوب'،
 "محاذاة النص: الوسط"
].انضم('؛')؛
console.info ('٪ c / dancing / bears كانت ناجحة!' ، نجاح) ؛
console.log ({data: {
 الاسم: "بوب" ،
 العمر: "غير معروف"
}})؛ // "يسخر" استجابة البيانات
console.error ('٪ c / dancing / bats فشل!' ، فشل) ؛
console.log ('/ الرقص / الخفافيش غير موجود') ؛

يمكنك تطبيق قواعد CSS في استبدال السلسلة مع العنصر النائب٪ c.

console.error ('٪ c / dancing / bats فشل!' ، فشل) ؛

ثم ضع عناصر CSS الخاصة بك كوسيطة سلسلة ويمكنك الحصول على سجلات CSS-style. يمكنك إضافة أكثر من٪ c في السلسلة أيضًا.

console.log ('٪ cred٪ cblue٪ cwhite'، 'color: red؛'، 'color: blue؛'، 'color: white؛')

سيؤدي ذلك إلى إخراج الكلمات "الأحمر" و "الأزرق" و "الأبيض" بألوانها المحترمة.

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

الطرق الأخرى المتاحة

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

يجزم()

يأخذ Assert وسيطين - إذا تم تقييم الوسيطة الأولى إلى قيمة زائفة ، فسوف تعرض الوسيطة الثانية.

دع isTrue = false ؛
console.assert (isTrue ، 'هذا سيعرض') ؛
isTrue = صحيح ؛
console.assert (isTrue، 'This will not')؛

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

دير ()

تعرض طريقة dir قائمة تفاعلية بالكائن الذي تم تمريره إليها.

console.dir (document.body)؛
يعرض Chrome dir بطريقة مختلفة

في النهاية ، يحفظ dir نقرة أو نقرتين فقط. إذا كنت بحاجة إلى فحص كائن من استجابة API ، فإن عرضه بهذه الطريقة المنظمة يمكن أن يوفر لك بعض الوقت.

الطاولة()

تعرض طريقة الجدول صفيفًا أو كائنًا كجدول.

console.table (['Javascript'، 'PHP'، 'Perl'، 'C ++'])؛
الناتج عن مجموعة

تأتي مؤشرات الفهرس أو أسماء خصائص الكائن أسفل عمود الفهرس الأيسر. ثم يتم عرض القيم في العمود الأيمن.

const خارقة = {
    الاسم: "بيتر" ،
    اسم العائلة: "باركر" ،
}
console.table (خارقة)؛
الإخراج لكائن

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

console.table ([['Javascript'، 'PHP'، 'Perl'، 'C ++']]) ؛
const خارقة = {
    الاسم: "بيتر" ،
    اسم العائلة: "باركر" ،
}
console.table ([بطل])؛

مجموعة()

يتكون console.group () من ثلاثة على الأقل من مكالمات وحدة التحكم ، وربما تكون الطريقة التي تتطلب استخدام معظم الكتابة. لكنها أيضًا واحدة من أكثرها فائدة (خاصة للمطورين الذين يستخدمون Redux Logger).

تبدو المكالمة الأساسية إلى حد ما كما يلي:

console.group ()؛
console.log ('سأخرج') ؛
console.group ()؛
console.log ('مزيد من المسافات البادئة')
console.groupEnd ()؛
console.log ('يا تبدو الدب') ؛
console.groupEnd ()؛

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

يعرض Firefox قائمة بادئة:

يعرضهم Chrome في نمط كائن:

ستبدأ كل مكالمة إلى console.group () في إنشاء مجموعة جديدة ، أو إنشاء مستوى جديد إذا تم الاتصال به داخل المجموعة. في كل مرة تتصل بـ console.groupEnd () ، ستنهي المجموعة الحالية أو المستوى الحالي وتعيد مستوى واحد احتياطيًا.

أجد أن أسلوب إخراج Chrome أسهل في القراءة لأنه يبدو أكثر ككائن قابل للطي.

يمكنك تمرير مجموعة وسيطة رأس سيتم عرضها عبر console.group:

console.group ( 'رأس')؛

يمكنك عرض المجموعة كما تم طيها من البداية إذا اتصلت console.groupCollapsed (). بناءً على تجربتي ، يبدو أن هذا يعمل فقط في Chrome.

زمن()

طريقة الوقت ، مثل طريقة المجموعة أعلاه ، تأتي في جزأين.

طريقة لبدء المؤقت وطريقة لإنهائه.

بمجرد انتهاء المؤقت ، سيتم إخراج إجمالي وقت التشغيل بالمللي ثانية.

لبدء المؤقت ، يمكنك استخدام console.time ('id for timer') ولإنهاء المؤقت الذي تستخدم console.timeEnd ('id for timer'). يمكنك تشغيل ما يصل إلى 10000 جهاز توقيت في وقت واحد.

سيبدو الإخراج مثل هذا المؤقت: 0.57 مللي ثانية

إنه مفيد للغاية عندما تحتاج إلى القيام ببعض المعايير السريعة.

استنتاج

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

هناك طريقتان لم أتحدث عنه لأن واجهة برمجة التطبيقات الخاصة بهما ما زالت تتغير. يمكنك قراءة المزيد عنها أو عن وحدة التحكم بشكل عام على صفحة MDN Web API وصفحة المواصفات الحية الخاصة بها.

https://developer.mozilla.org/en/docs/Web/API/console