كيفية عرض البيانات كجدول في وحدة تحكم المتصفح

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

يمكنك أيضًا التفاعل مع وحدة التحكم من خلال Shell وConsole API، وهو أمر مفيد لاختبار وظائف معينة وبيانات الإخراج. هنا، ستعرض لك المقالة نصيحة مفيدة لاستخدام Console API.

وحدة التحكم بالوصول على المتصفح

في Chrome، يمكنك تحديد عرض > المطور > وحدة تحكم JavaScript لعرض وحدة التحكم. بالإضافة إلى ذلك، يمكنك أيضًا استخدام اختصار لوحة المفاتيح: Cmd+ Option+ Jعلى نظام التشغيل OS X و Ctrl+ Shift+ Jعلى نظام التشغيل Windows.

يوجد أدناه وحدة تحكم Chrome خالية من الأخطاء.

من هنا، يمكنك البدء في استخدام الأوامر المتوفرة في Console API.

التفاعل مع وحدة التحكم

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

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

هنا مثال:

var a = 1;

if(a == 1) {

console.log('true');

} else {

console.log('false');

}

الكود أعلاه سوف يعود صحيحا، لأن المتغير يحتوي على الرقم 1 . في وحدة التحكم، سترى أن المتصفح يقوم بإخراج النص بالمحتوى "صحيح".

إخراج البيانات في شكل جدول

في بعض الأحيان، سيتعين عليك معالجة مجموعة من البيانات أو قائمة الكائنات، كما هو موضح أدناه:

var data = [

{ name: "Andi", age: "21", city: "Tuban" },

{ name: "Ani", age: "25", city: "Trenggalek" },

{ name: "Adi", age: "30", city: "Kediri" }

];

console.table(data);

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

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

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

أتمنى أن تكون ناجحا.