تعرف على توابع الطرفية Console في جافا سكريبت

سنتعرف في مقال اليوم على توابع الواجهة البرمجية للطرفية التي توفرها لغة البرمجة جافا سكريبت JavaScript Console API فهي طرفية قوية توفر للمطور مجموعة من التوابع القادرة على اكتشاف جميع رسائل الخطأ الغامضة و إظهارها له بوضوح مما يسهل عليه فهم سببها وتصحيحها.

تُستخدم الطرفية console لتسجيل بعض المخرجات مثل نتائج العمليات الحسابية، والقيم المعادة من الواجهة البرمجية REST API ونتائج العمليات التي تنفذ على النصوص أو إعادة النظر في جزء معين من البرنامج والكثير من الأمور الأخرى، كما يمكنك استخدام الطرفية console لعرض أو إخراج أي نوع من البيانات ترغب بها. فعندما تقوم بتشغيل JavaScript في متصفحك تعرض سجلات الطرفية console logs في طرفية المطور الخاصة بمتصفح الإنترنت.

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

تسجيل الدخول إلى الطرفية Logging to the console

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

يستخدم معظم المطورين التابع ()console.log لإرسال معلومات عامة حول الكود الخاص بهم إلى الطرفية console والتي يمكن العثور عليها في أدوات التطوير الخاصة بمتصفح الويب DevTools

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

التابع ()log هو التابع الأساسي لكائن الطرفية console، ويمكنك أن تعطي أي قيمة لهذا التابع وسيسجل أو يعرض النتيجة في الطرفية كما في المثال التالي:

const hello = "Hi there, welcome to MDN Web Docs!";
console.log(hello);
// Hi there, welcome to MDN Web Docs!

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

const currentDate = new Date();
const formattedDate = new Intl.DateTimeFormat("en-US").format(currentDate);
console.log("Current date:", formattedDate);
// Current date: 7/12/2024

يمكنك أيضًا تزويد التابع ()log بعدة قيم أوعناصر لتطبيق بعض التنسيقات الجميلة على الخرج كما في المثال التالي:

const currentDate = new Date();
const formattedDate = new Intl.DateTimeFormat("en-US").format(currentDate);

console.log("Today's date is %s", formattedDate);
// Today's date is 7/12/2024

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

console.log(window.navigator.oscpu);
// Intel Mac OS X 10.15

ملاحظة: لا تنس التخلص من بقايا استدعاءات التابع ()console.log الزائدة وغير الضرورية التي أضفتها في الكود البرمجي الخاص بك خلال مرحلة تطويره قبل نشره للعموم كي تتجنب طباعة معلومات حساسة أو غير ضرورية للمستخدمين في بيئة الإنتاج النهائية.

عرض سجلات أخرى في الطرفية باستخدام التوابع info, warn, error

يمكنك أن تضيف المزيد السجلات المفيدة للطرفية باستخدام توابع أخرى مثل التابع ()conlose.info والتابع ()conlose.warn والتابع ()conlose.error.

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

const browser = window.navigator.userAgent;
console.info(browser);
// Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:121.0) Gecko/20100101 Firefox/121.0

يجب عليك استخدام التابعين warn و error إذا كنت تتوقع حدوث أخطاء من المستخدمين عند تشغيل الكود

console.warn("Unknown device - there may be compatibility issues.");
// ⚠️ Unknown device - there may be compatibility issues.
console.error("Unsupported device. See <docs url> for more details.");
// 🛑 Unsupported device. See <docs url> for more details.
//    <stack trace>

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

عرض جداول في الطرفية باستخدام التابع ()console.table

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

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

const dogs = [
  { name: "Yoshi", color: "Black", personality: "Calm" },
  { name: "Melanie", color: "Brown", personality: "Hyperactive" },
  { name: "Peppers", color: "white", personality: "Unpredictable" },
];

console.table(dogs);

سيظهر هذا الكود على المتصفح على على شكل جدول منسق بشكل جميل كما يلي:

التعداد باستخدام التابع ()console.count

يمكنك إضافة عداد إلى سجلاتك عن طريق التابع ()console.count وذلك لمعرفة عدد مرات حدوث أمر معين كما يلي:

function postBoostClicked() {
  // My post has been boosted, do something here
  console.count("Boost count");
}

postBoostClicked();
// Boost count: 1
postBoostClicked();
// Boost count: 2

إضافة المؤقتات باستخدام التابع ()console.time والتابع ()console.timer

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

في المثال التالي يستغرق التابع ()myFunction وقت 200 ميلي ثانية للتنفيذ:

console.time("timerName");
// call myFunction()
console.timeEnd("timerName");
// timerName: 200ms - timer ended

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

console.time("MyTimer");
console.timeLog("MyTimer", "Starting application up…");
// MyTimer: 0ms Starting application up…
// call myFunction(), for example

console.timeLog("MyTimer", "UI is setup, making API calls now");
// MyTimer: 200ms UI is setup, making API calls now
// call otherFunction(), for example

console.timeEnd("MyTimer");
// MyTimer: 300ms - timer ended

تجميع السجلات باستخدام التابع ()console.group

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

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

console.group("Grouped Logs");
console.log("Log 1");
console.log("Log 2");
console.groupEnd();
// Grouped Logs
//     Log 1
//     Log 2

console.groupCollapsed("Collapsed Group");
console.log("Log 3");
console.log("Log 4");
console.groupEnd();
// > Collapsed Group

التعقب باستخدام التابع ()console.trace

يوجد التابع ()trace في معظم لغات البرمجة وهو أحد الخيارات المهمة للمبرمج لمعرفة مراحل تنفيذ الكود ضمن البرنامج، وهو يستخدم في عملية تصحيح الأخطاء ومعرفة مكان تنفيذ الكود.

تعتبر عملية التعقب tracing مفيدة جدًا عندما يكون الكود طويلًا ومعقدًا نوعًا ما إذ يصعب في هذه الحالة تعقب الكود كاملًا بشكل منطقي.

يوضح المثال التالي طريقة إضافة تعقب إلى الدالة ()example لمعرفة فيما إذا تم استدعاؤها من التابع ()one أو من التابع ()two. كما يوجد لدينا هنا شرط منطقي تتغير حالته بين true و false بالاعتماد على الزمن، لذلك من المستحيل معرفة أي من التابعين ()one أو()two سيقوم باستدعاء الدالة ()example

// Is the "currentSeconds" value odd or even?
const currentSeconds = new Date().getSeconds();
const condition = currentSeconds % 2 === 0;

function one() {
  example();
}
function two() {
  example();
}
function randomChoice() {
  if (!condition) {
    // OK, I'm lost!
    one();
  } else {
    two();
  }
}

function example() {
  // Where is this function called?
  console.trace("Trace from example() function");
}

randomChoice();
//  console.trace() Trace from example function
//     example debugger eval code:23
//     one debugger eval code:6
//     randomChoice debugger eval code:16

نستنتج من هذا التعقب ما يلي:

1. ينفذ التابع trace ضمن الدالة ()example في السطر 23
2. تستدعى الدالة ()example من قبل الدالة ()one في السطر 6
3. ينتهي التعقب عندما يتم استدعاء ()randomChoice في السطر 16 قد يكون استخدام التابع ()console.trace مفيدًا جدًا في حال كون الشيفرات البرمجية طويلة ومعقدة وغير مفهومة وذلك من أجل اكتشاف مصدر الأخطاء بسهولة أكبر.

التنظيف باستخدام التابع ()console.clear

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

// Too much information!
console.clear();
// Console was cleared.

وبهذا الأمر البسيط والمفيد نكون قد وصلنا لختام مقال اليوم.

الخلاصة

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

ترجمة وبتصرف للمقال Developer essentials: JavaScript console methods لكاتبه Brian Smith

اقرأ أيضًا

• كيف تستخدم أدوات المطوِّر في المتصفحات الحديثة
• أدوات مطوري الويب المدمجة في المتصفحات
• معالجة المشاكل الشائعة للتوافق مع المتصفحات في شيفرة جافاسكربت
• هيكل البرنامج في جافاسكريبت