نحوه چاپ گزارش در کنسول جاوا اسکریپت با متد ()Console.log

در این مطلب به بررسی موضوع نحوه چاپ گزارش در کنسول جاوا اسکریپت با متد ()Console.log می‌پردازیم.

ورود پیام به کنسول یک روش بسیار اساسی برای تشخیص و عیب یابی مشکلات جزئی در کد شماست. اما آیا می‌دانید چیزهای دیگری در مورد کنسول وجود دارد که فقط محدود به ورود به سیستم نیست؟ در این مقاله نحوه چاپ پیام در کنسول در جاوا اسکریپت و همچنین همه کارهایی را که کنسول می‌تواند انجام دهد، به شما نشان می‌دهم.

کنسول ویرایشگر چند خطی فایرفاکس

اگر تا کنون از حالت ویرایشگر چند خطی در فایرفاکس استفاده نکرده‌اید، باید همین حالا آن را امتحان کنید.

کافی است کنسول را با زدن کلیدهای ترکیبی Ctrl + Shift + K یا F12 باز کنید و در بالا سمت راست دکمه‌ای را می‌بینید که می‌گوید "تغییر به حالت ویرایشگر چند خطی". همچنین می‌توانید Ctrl + B را فشار دهید. این کار به شما یک ویرایشگر کد چند خطی در داخل فایرفاکس می‌دهد.

console.log

بیایید با یک مثال بسیار اساسی شروع کنیم.

let x = 1
console.log(x)

آن را در کنسول فایرفاکس تایپ کرده و کد را اجرا کنید. می‌توانید روی دکمه "Run" کلیک کنید یا 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: 'codestackr@gmail.com'
  }
}
console.log(user)
console.log({user})

اولین پیام، خصوصیات را در شی کاربر چاپ می‌کند. مورد دوم شی را به عنوان "کاربر" شناسایی کرده و خصوصیات موجود در آن را چاپ می‌کند.

اگر موارد زیادی را در کنسول وارد می‌کنید، این می‌تواند به شما در شناسایی هر گزارش کمک کند.

متغیرهای داخل خروجی کنسول

آیا می‌دانید می‌توانید در بخش‌هایی از پیام خود، از متغیرها استفاده کنید؟

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

در این مثال %s به رشته‌ای اشاره دارد که پس از مقدار اولیه گنجانده شده است. این به "John" اشاره دارد.

%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')

این تغییرات باعث ایجاد یک ظاهر طراحی شده به پیام‌های ما در کنسول می‌شود. به عنوان مثال، اخطار زرد رنگ و خطا قرمز رنگ خواهد بود.

توجه: استایل‌ها در مرورگرهای مختلف، متفاوت است.

گزارش‌های اختیاری

ما می‌توانیم با ()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)

همانطور که انتظار داشتید، یک تایمر پنج ثانیه‌ای خواهیم داشت.

همچنین می‌توانیم زمان فعلی تایمر خود را بدون اینکه متوقف شود، ثبت کنیم. این کار را با استفاده از ()console.timeLog انجام می‌دهیم.

console.time()

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

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

در این مثال، ما ابتدا 2 ثانیه timeLog زمان خود را دریافت می‌کنیم، سپس 5 ثانیه timeEnd.

دقیقا مانند همان شمارنده، می‌توانیم به تایمرها برچسب بزنیم و همزمان چند اجرا داشته باشیم.

گروه‌ها

کار دیگری که می‌توانید با log انجام دهید گروه‌بندی آن‌هاست.

با استفاده از ()console.group گروهی را ایجاد می‌کنیم و آن گروه را با ()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')

این گروه از گزارش‌ها قابل جمع شدن است. این کار شناسایی مجموعه‌های مربوطه را آسان می‌کند.

به طور پیش فرض، گروه از بین نرفته است. می‌توانید با استفاده از ()console.groupCollapsed به جای ()console.group، آن را تنظیم کنید.

همچنین می‌توان برچسب‌ها را برای شناسایی بهتر به group() وارد کرد.

پیگیری پشته

همچنین می‌توانید پیگیری پشته را با کنسول انجام دهید. کافی است فقط آن را به یک تابع اضافه کنید.

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

در این مثال، توابع بسیار ساده‌ای داریم که یکدیگر را فراخوانی می‌کنند. سپس در آخرین تابع، ()console.trace را فراخوانی می‌کنیم.

خروجی کنسول

جداول

در اینجا یکی از جالب‌ترین کاربردهای کنسول آورده شده است ().console.table

بنابراین بیایید برخی از داده‌ها را برای ورود به سیستم تنظیم کنیم:

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

اکنون ما با استفاده از console.table این داده‌ها را ثبت خواهیم کرد.

خروجی کنسول

اما صبر کنید، بهتر می‌شود!

اگر فقط برندها را می‌خواهیم، کافی است فقط از console.table استفاده کنیم. (devices,[‘brand’])

خروجی کنسول

بگذارید یک مثال پیچیده‌تر بزنیم. در این مثال از jsonplaceholder استفاده خواهیم کرد.

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

getUsers()

در اینجا ما فقط در حال چاپ "نام" و "ایمیل" هستیم. اگر برای تمام داده‌ها از console.log استفاده کنید، خواهید دید که ویژگی‌های بسیار بیشتری برای هر کاربر وجود دارد.

استایل دهی

آیا می‌دانید می‌توانید از ویژگی‌های CSS برای استایل دادن به گزارش‌های خود استفاده کنید؟

برای این کار ما از%c  استفاده می‌کنیم تا مشخص کنیم استایل‌هایی برای اضافه کردن داریم. استایل‌ها به آرگومان دوم گزارش سیستم وارد می‌شوند.

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

می‌توانید از این ویژگی برای برجسته کردن گزارش‌های خود استفاده کنید.

پاک کردن

اگر می‌خواهید با استفاده از گزارش‌ها مشکلی را عیب‌یابی کنید، ممکن است کنسول شما بهم ریخته باشد. فقط ()console.clear را به بالای کد خود اضافه کنید و هر بار که رفرش می‌کنید یک کنسول تازه خواهید داشت.

فقط آن را به پایین کد خود اضافه نکنید!

امیدوارم این مقاله را پسندیده باشید. لطفا نظرات خود را در بخش زیر با ما در میان بگذارید.

منبع