ننشر اليوم ملاحظة حول ميزات استخدام وحدة تحكم JavaScript في المتصفحات التي تقع خارج أمر
console.log() المعروف. في الواقع ، هذا الأمر هو أبسط أداة لتصحيح البرامج ، والتي تسمح لك بإخراج شيء إلى وحدة التحكم. ومع ذلك ، فإن معرفة بعض ميزات هذه الأداة سوف تتيح لأولئك الذين يستخدمونها لزيادة كفاءة العمل.
أسماء Console.log () والأسماء المتغيرة
أبسط حالات الاستخدام لـ
console.log() هي ، على سبيل المثال ، إخراج سلسلة أو كائن. على سبيل المثال ، قم بطباعة السطر إلى وحدة التحكم:
console.log('Is this working?');
الآن تخيل أنك تحتاج إلى إخراج عدة كائنات إلى وحدة التحكم. على سبيل المثال - مثل:
const foo = { id: 1, verified: true, color: 'green' }; const bar = { id: 2, verified: false, color: 'red' };
ربما سيكون من المنطقي استخدام عدة أوامر للنموذج
console.log(variable) لحل هذه المشكلة. على الرغم من أن البيانات تصل إلى وحدة التحكم ، فإن مشكلة واحدة تصبح واضحة عندما يتم إخراجها.
ألق نظرة على ما يتم عرضه في وحدة التحكم.
لا توجد أسماء متغيرة في وحدة التحكمكما ترون ، الأسماء المتغيرة
foo and
bar ليست هنا. يمكن توسيع الكائنات ، باستخدام أيقونة السهم في الأجزاء اليسرى من الخطوط ، ولكن حتى بالنظر إلى البنية الداخلية للكائنات ، قد يكون من الصعب للغاية فهم أي كائن معروض في وحدة التحكم. في حل هذه المشكلة ، سوف تساعدنا أسماء خصائص الكائنات المحسوبة. وهي ، تتيح لك ميزة حرفية الكائن ، التي ظهرت في ES6 ، استخدام تصميم مناسب للنموذج التالي:
console.log({ foo, bar });
باستخدام هذا الأسلوب ، سيصل كائن إلى وحدة التحكم التي ستكون أسماء خصائصها هي أسماء الكائنات المتغيرة التي تحتاج إلى عرضها. بالإضافة إلى ذلك ، يسمح لك هذا بالتخلص من بعض المكالمات إلى
console.log() ، والتي كانت تُستخدم سابقًا لعرض الكائنات بشكل منفصل.
command console.table ()
يمكنك زيادة تحسين مظهر ما يعرضه البرنامج في وحدة التحكم عن طريق تنسيق محتويات الكائنات في جدول. سيكون لهذا تأثير جيد على سهولة قراءة المعلومات. وهي نتحدث عن حقيقة أنه إذا قمت بعرض كائنات لها نفس أسماء الخصائص أو صفائف كائنات مماثلة في وحدة التحكم ، يمكنك استخدام الأمر
console.table() . هذه هي نتيجة تنفيذ أمر النموذج
console.table({ foo, bar }) .
الأمر Console.table () قيد التنفيذالأمر Console.group ()
يمكن استخدام هذا الأمر إذا كنت بحاجة إلى تجميع بعض البيانات ذات الصلة وإنشاء هياكل من مجموعات متداخلة تزيد من قابلية استخدام هذه البيانات.
بالإضافة إلى ذلك ، يمكن استخدام هذا النهج في الحالات التي يتم فيها تنفيذ العديد من الأوامر لإخراج شيء ما إلى وحدة التحكم في وظيفة معينة ، ومن الضروري أن يكون من الممكن ، في لمحة ، أن تفصل نتائج هذه الأوامر بوضوح عن الآخرين.
افترض أننا نعرض معلومات حول بعض المستخدمين في وحدة التحكم:
console.group('User Details'); console.log('name: John Doe'); console.log('job: Software Developer');
إليك ما تبدو عليه نتائج هذا الرمز.
تجميع نتائج أوامر إخراج البيانات إلى وحدة التحكمعند استخدام الأمر
console.group() ، يتم عرض المجموعات افتراضيًا في شكل موسع. لتقليلها ، يمكنك استخدام الأمر
console.groupCollapsed() بدلاً من هذا الأمر. لعرض محتويات هذه المجموعة ، ستحتاج إلى توسيعها باستخدام الرمز الموجود على يسار اسم المجموعة.
Console.warn () و console.error ()
اعتمادًا على الموقف ، قد يكون
console.warn() و
console.error() مفيدًا للتأكيد على أهمية بعض الرسائل المعروضة على وحدة التحكم. يتم استخدامها ، على التوالي ، لعرض التحذيرات والأخطاء.
التحذيرات والأخطاءربما يكون الأمر
console.info() ، المصمم لعرض الرسائل الإعلامية ، مفيدًا لك أيضًا.
في تخصيص مظهر الرسائل المعروضة في وحدة التحكم ، يمكنك المضي قدمًا بشكل أكبر في تصميمها بنفسك. يمكنك استخدام التوجيه
%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');
يمكنك أيضًا تكوين خصائص CSS أخرى للنص ، مثل
font-size font-style .
إخراج بيانات التصميم إلى وحدة التحكمالأمر Console.trace ()
يقوم أمر
console.trace() بطباعة نتائج تتبع المكدس إلى وحدة التحكم ويسمح لك بالحكم على ما حدث في نقطة معينة في البرنامج أثناء تنفيذه. على سبيل المثال ، هناك بعض الطرق التي ، في بعض الحالات ، تحتاج إلى استدعاء مرة واحدة فقط ، على سبيل المثال - طرق لإزالة المعلومات من قاعدة البيانات. من الممكن التحقق مما إذا كانت
console.trace() بالفعل بإجراء مكالمة واحدة فقط لهذه الطريقة. يتيح لك هذا الأمر عرض المعلومات في وحدة التحكم التي تساعد على التحقق من التشغيل الصحيح للآليات الداخلية للبرامج.
وقت تعزية القيادة ()
واحدة من المهام الهامة التي تواجه المطور الأمامي هو توفير رمز السرعة العالية. يتيح لك الأمر
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++) {
ألق نظرة على ما وصل إلى وحدة التحكم بعد تنفيذ هذا الرمز.
نتائج استخدام console.time ()النتائج
في هذه المقالة ، نظرنا في بعض الأشياء الصغيرة المفيدة فيما يتعلق بإخراج البيانات في وحدة تحكم المستعرض. إذا لم تكن على علم بهذه الميزات من قبل ، نأمل أن يكون لديك الآن أدوات JavaScript مفيدة.
أعزائي القراء! إذا كنت تقوم بتطوير مشاريع جافا سكريبت كبيرة ، نطلب منك إخبارنا بالوسائل التي يمكنك من خلالها حل مشاكل التسجيل فيها.