JavaScript Console.log () مثال - كيفية الطباعة إلى وحدة التحكم في JS

يعد تسجيل الرسائل إلى وحدة التحكم طريقة أساسية جدًا لتشخيص واستكشاف المشكلات البسيطة في التعليمات البرمجية الخاصة بك.

لكن ، هل تعلم أن هناك ما هو أكثر consoleمن مجرد log؟ في هذه المقالة ، سأوضح لك كيفية الطباعة على وحدة التحكم في JS ، بالإضافة إلى جميع الأشياء التي لم تكن تعرف أنها consoleيمكن أن تفعلها.

وحدة تحكم محرر Firefox متعدد الخطوط

إذا لم تستخدم وضع المحرر متعدد الخطوط في Firefox مطلقًا ، فيجب عليك تجربته الآن!

ما عليك سوى فتح وحدة التحكم ، Ctrl+Shift+Kأو F12، في الجزء العلوي الأيمن ، سترى زرًا يقول "التبديل إلى وضع المحرر متعدد الخطوط". بدلاً من ذلك ، يمكنك الضغط على Ctrl+B.

يمنحك هذا محرر كود متعدد الأسطر داخل Firefox مباشرة.

وحدة التحكم

لنبدأ بمثال سجل أساسي للغاية.

let x = 1 console.log(x)

اكتب ذلك في وحدة تحكم Firefox وقم بتشغيل الكود. يمكنك النقر فوق الزر "تشغيل" أو الضغط على Ctrl+Enter.

في هذا المثال ، يجب أن نرى الرقم "1" في وحدة التحكم. بسيط جدًا ، أليس كذلك؟

قيم متعددة

هل تعلم أنه يمكنك تضمين قيم متعددة؟ أضف سلسلة إلى البداية للتعرف بسهولة على ما تقوم بتسجيله.

let x = 1 console.log("x:", x)

ولكن ماذا لو كانت لدينا قيم متعددة نريد تسجيلها؟

let x = 1 let y = 2 let z = 3

بدلاً من الكتابة console.log()ثلاث مرات ، يمكننا تضمينها جميعًا. ويمكننا إضافة سلسلة قبل كل منهم إذا أردنا ذلك أيضًا.

let x = 1 let y = 2 let z = 3 console.log("x:", x, "y:", y, "z:", z)

لكن هذا يتطلب الكثير من العمل. فقط لفهم بأقواس مجعدة! الآن تحصل على كائن بالقيم المسماة.

let x = 1 let y = 2 let z = 3 console.log( {x, y, z} )
إخراج وحدة التحكم

يمكنك أن تفعل الشيء نفسه مع كائن.

let user = { name: 'Jesse', contact: { email: '[email protected]' } } console.log(user) console.log({user})

سيقوم السجل الأول بطباعة الخصائص داخل كائن المستخدم. والثاني سيحدد الكائن على أنه "مستخدم" ويطبع الخصائص بداخله.

إذا كنت تقوم بتسجيل العديد من الأشياء إلى وحدة التحكم ، فيمكن أن يساعدك ذلك في تحديد كل سجل.

المتغيرات داخل السجل

هل تعلم أنه يمكنك استخدام أجزاء من السجل كمتغيرات؟

console.log("%s is %d years old.", "John", 29)

في هذا المثال ، %sيشير إلى خيار سلسلة مدرج بعد القيمة الأولية. هذا من شأنه أن يشير إلى "جون".

و %dيشير إلى الخيار رقم وشملت بعد القيمة الأولية. يشير هذا إلى 29.

سيكون ناتج هذا البيان: "جون يبلغ من العمر 29 عامًا."

الاختلافات في السجلات

هناك بعض الاختلافات في السجلات. هناك الأكثر استخداما console.log(). ولكن هناك أيضًا:

console.log('Console Log') console.info('Console Info') console.debug('Console Debug') console.warn('Console Warn') console.error('Console Error') 

تضيف هذه الاختلافات أسلوبًا إلى سجلاتنا في وحدة التحكم. على سبيل المثال ، warnسوف يكون لونه أصفر ، errorوسوف يكون ملونًا باللون الأحمر.

ملاحظة: تختلف الأنماط من متصفح لآخر.

سجلات اختيارية

يمكننا طباعة الرسائل إلى وحدة التحكم بشروط باستخدام console.assert().

let isItWorking = false console.assert(isItWorking, "this is the reason why")

إذا كانت الوسيطة الأولى خاطئة ، فسيتم تسجيل الرسالة.

إذا أردنا التغيير isItWorkingإلى true، فلن يتم تسجيل الرسالة.

عد

هل تعلم أنه يمكنك الاعتماد مع وحدة التحكم؟

for(i=0; i<10; i++){ console.count() }

كل تكرار لهذه الحلقة سيطبع عددًا إلى وحدة التحكم. سترى "افتراضي: 1 ، افتراضي: 2" ، وهكذا حتى تصل إلى 10.

إذا قمت بتشغيل نفس الحلقة مرة أخرى ، فسترى أن العد ينتقل من حيث توقف ؛ 11 - 20.

لإعادة ضبط العداد يمكننا استخدامه console.countReset().

وإذا كنت تريد تسمية العداد بشيء آخر غير "الافتراضي" ، فيمكنك ذلك!

for(i=0; i<10; i++){ console.count('Counter 1') } console.countReset('Counter 1')

الآن بعد أن أضفنا تسمية ، سترى "عداد 1 ، عداد 2" ، وهكذا.

ولإعادة ضبط هذا العداد ، يتعين علينا تمرير الاسم إليه countReset. بهذه الطريقة يمكنك تشغيل عدة عدادات في نفس الوقت وإعادة تعيين عدادات محددة فقط.

وقت المسار

إلى جانب العد ، يمكنك أيضًا ضبط الوقت مثل ساعة الإيقاف.

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

console.time() setTimeout(() => { console.timeEnd() }, 5000)

كما تتوقع ، بعد 5 ثوانٍ ، سيكون لدينا سجل نهاية مؤقت لمدة 5 ثوانٍ.

We can also log the current time of our timer while it's running, without stopping it. We do this by using console.timeLog().

console.time() setTimeout(() => { console.timeEnd() }, 5000) setTimeout(() => { console.timeLog() }, 2000)

In this example, we will get our 2 second timeLog first, then our 5 second timeEnd.

Just the same as the counter, we can label timers and have multiple running at the same time.

Groups

Another thing that you can do with log is group them. ?

We start a group by using console.group(). And we end a group with console.groupEnd().

console.log('I am not in a group') console.group() console.log('I am in a group') console.log('I am also in a group') console.groupEnd() console.log('I am not in a group')

This group of logs will be collapsible. This makes it easy to identify sets of logs.

By default, the group is not collapsed. You can set it to collapsed by using console.groupCollapsed() in place of console.group().

Labels can also be passed into the group() to better identify them.

Stack Trace

You can also do a stack trace with console. Just add it into a function.

function one() { two() } function two() { three() } function three() { console.trace() } one() 

In this example, we have very simple functions that just call each other. Then, in the last function, we call console.trace().

إخراج وحدة التحكم

Tables

Here's one of the most mind-blowing uses for console: console.table().

So let's set up some data to log:

let devices = [ { name: 'iPhone', brand: 'Apple' }, { name: 'Galaxy', brand: 'Samsung' } ]

Now we'll log this data using console.table(devices).

إخراج وحدة التحكم

But wait – it gets better!

If we only want the brands, just console.table(devices, ['brand'])!

إخراج وحدة التحكم

How about a more complex example? In this example, we'll use jsonplaceholder.

async function getUsers() { let response = await fetch('//jsonplaceholder.typicode.com/users') let data = await response.json() console.table(data, ['name', 'email']) } getUsers()

Here we are just printing the "name" and "email". If you console.log all of the data, you will see that there are many more properties for each user.

Style ?

Did you know that you can use CSS properties to style your logs?

للقيام بذلك ، نستخدم %cلتحديد أن لدينا أنماط لإضافتها. يتم تمرير الأنماط في الوسيطة الثانية من log.

console.log("%c This is yellow text on a blue background.", "color:yellow; background-color:blue")

يمكنك استخدام هذا لجعل سجلاتك مميزة.

واضح

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

console.clear()ما عليك سوى الإضافة إلى الجزء العلوي من التعليمات البرمجية الخاصة بك وستحصل على وحدة تحكم جديدة في كل مرة تقوم فيها بالتحديث. ؟

فقط لا تضيفه إلى الجزء السفلي من التعليمات البرمجية الخاصة بك ، لول.

شكرا للقراءة!

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

Jesse Hall (codeSTACKr)

أنا جيسي من تكساس. تحقق من المحتوى الآخر الخاص بي واسمحوا لي أن أعرف كيف يمكنني مساعدتك في رحلتك لتصبح مطور ويب.

  • اشترك في بلدي يوتيوب
  • قل مرحبا! انستغرام | تويتر
  • اشترك في رسالتي الإخبارية