كيفية استخدام وحدة تحكم JavaScript: تجاوز console.log ()

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

هيا بنا نبدأ.

حالة الاستخدام الأساسية للغاية هي تسجيل سلسلة أو مجموعة من كائنات JavaScript. بكل بساطة،

console.log('Is this working?');

الآن ، تخيل سيناريو عندما يكون لديك مجموعة من العناصر تحتاج إلى تسجيل الدخول إلى وحدة التحكم.

const foo = { id: 1, verified: true, color: 'green' };const bar = { id: 2, verified: false, color: 'red' };

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

كما ترى ، لا توجد أسماء متغيرات مرئية. يصبح الأمر مزعجًا للغاية عندما يكون لديك مجموعة من هؤلاء وعليك توسيع السهم الصغير الموجود على اليسار لمعرفة اسم المتغير بالضبط. أدخل أسماء الخصائص المحسوبة. هذا يسمح لنا بشكل أساسي بتجميع جميع المتغيرات معًا في واحد console.log({ foo, bar });ويكون الناتج مرئيًا بسهولة. هذا يقلل أيضًا من عدد console.logالأسطر في الكود الخاص بنا.

وحدة التحكم. جدول ()

يمكننا أن نخطو خطوة إلى الأمام من خلال وضع كل هذه الأشياء معًا في جدول لجعلها أكثر قابلية للقراءة. كلما كان لديك كائنات ذات خصائص مشتركة أو مجموعة من الكائنات ، استخدم console.table(). هنا يمكننا استخدام console.table({ foo, bar})وتظهر وحدة التحكم:

console.group ()

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

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

على سبيل المثال ، إذا كنت تقوم بتسجيل تفاصيل المستخدم:

console.group('User Details');console.log('name: John Doe');console.log('job: Software Developer');
// Nested Groupconsole.group('Address');console.log('Street: 123 Townsend Street');console.log('City: San Francisco');console.log('State: CA');console.groupEnd();
console.groupEnd();

يمكنك أيضًا استخدام console.groupCollapsed()بدلاً من console.group()إذا كنت تريد تصغير المجموعات افتراضيًا. ستحتاج إلى الضغط على زر التوصيف على اليسار للتوسيع.

console. warn () & console.error ()

اعتمادًا على الموقف ، للتأكد من أن وحدة التحكم الخاصة بك أكثر قابلية للقراءة ، يمكنك إضافة سجلات باستخدام console.warn()أو console.error(). يوجد أيضًا console.info()الذي يعرض رمز "i" في بعض المتصفحات.

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

console.log('%c Auth ', 'color: white; background-color: #2274A5', 'Login page rendered');console.log('%c GraphQL ', 'color: white; background-color: #95B46A', 'Get user details');console.log('%c Error ', 'color: white; background-color: #D33F49', 'Error getting user details');

يمكنك أيضًا تغيير font-size، font-styleوأشياء CSS الأخرى.

وحدة التحكم. تتبع ()

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

console.time ()

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

let i = 0;
console.time("While loop");while (i < 1000000) { i++;}console.timeEnd("While loop");
console.time("For loop");for (i = 0; i < 1000000; i++) { // For Loop}console.timeEnd("For loop");

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