چاپ پیغام ها در کنسول مرورگر قطعاً برای همه برنامه نویسان نجات بخش است. پیام های console.log برای بسیاری از مشکلات در هم تنیده در کد شما، مانند دارو برای بیماری است.
بیشتر توسعه دهنده ها چیزی شبیه به این را می گویند که: «بیا تا پیغامی رو در مرورگر چاپ کنیم تا بیشتر در مورد مشکل بدونیم». من مطمئن هستم که من تنها کسی نیستم که این کار را می کنم.

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

فیلیپه فورتس (Filipe Fortes)

به غیر از متداول ترین پیام console.log برای چاپ پیام در مرورگر، روش های مختلف زیادی وجود دارد که روند اشکال زدایی شما را بسیار آسان تر می کند. بیایید با چند مثال، یک به یک به آنها نگاهی بیندازیم.

console.log( ) | info( ) | debug( ) | warn( ) | error( )

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

---

استفاده از placeholder

آنچه می توانید به عنوانplaceholder استفاده نمایید عبارتند از:

• %o — که یک شیء (Object) را می گیرد،
• %s — یک رشته را می گیرد،
• %d — برای اعداد صحیح و اعشاری به کار می رود.

---

افزودن CSS به پیام های کنسول

آیا همه پیام های کنسول شما یکسان هستند؟ خوب، از این پس دیگر یکسان نخواهد بود، می توانید پیام های خود را بر اساس آنچه برایتان مهمتر است برجسته تر و جذاب تر نمایید.

اگر می خواهید تنها بخشی از پیغام، رنگ متفاوتی داشته باشد، به شکل زیر عمل کنید:

---

console.dir( )

نمایه JSON از شیء مشخص شده را چاپ می کند.

---

عناصر HTML در کنسول

---

console.table ( )

آیا می خواهید JSON را به روشی مناسب و با نمایشی قابل فهم مشاهده کنید؟

---

console.group( ) & console.groupEnd( )

گروه بندی پیام ها با کنسول کاملاً امکان پذیر است.

---

console.count( )

این تابع تعداد دفعاتی را که یک بخش خاص، آن را برای شمارش فراخوانی کرده است، ثبت می کند. این تابع یک آرگومان اختیاری تحت عنوان label می گیرد.
اگر label به تابع داده شود، این تابع تعداد دفعات فراخوانی با آن برچسب خاص را شمارش می کند.
اگر label به تابع داده نشود، تابع تعداد دفعات فراخوانی در این خط خاص را شمارش می کند.

---

console.assert( )

این تابع زمانی که قصد دارید تنها بخشی از لاگ ها را چاپ نمایید، کاملا مفید است. به عبارتی فقط اگر آرگومان اول false باشد، آرگومان دوم را چاپ می کند. اگر آرگومان اول صادق (true) باشد، اصلاً کاری انجام نمی دهد.

---

console.trace( )

این تابع مسیری را نشان می دهد که مشخص می کند چگونه کد در یک نقطه خاص به پایان رسیده است.

---

console.time( )

این تابع اختصاصی برای ردیابی زمان گرفته شده توسط یک عملیات است. console.time روشی بهتر برای ردیابی زمان (microtime) گرفته شده برای اجرای JavaScript است.

---

console.memory

نمی دانید چگونه برنامه های JavaScript از حافظه مرورگر استفاده می کنند؟

---

console.clear( )

برای پاک کردن تمام پیام های کنسول فوق که یاد گرفته اید، زمان آن رسیده است که آنها را با دستور ()clear از بین ببرید.

---

در قطعه کد زیر می توانید تمام دستوراتی که یاد گرفتید را مشاهده کنید:

// time and time end
console.time("This");
let total = 0;
for (let j = 0; j < 10000; j++) {
  total += j
}
console.log("Result", total);
console.timeEnd("This");

// Memory
console.memory()

// Assertion
const errorMsg = 'Hey! The number is not even';
for (let number = 2; number <= 5; number += 1) {
    console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg});
}

// Count
for (let i = 0; i < 11; i++) {
  console.count();
}

// group & groupEnd
console.group();
  console.log('Test message');
  console.group();
    console.log('Another message');
    console.log('Something else');
  console.groupEnd();
console.groupEnd();


// Table
const items = [
  {
    name: "chair",
    inventory: 5,
    unitPrice: 45.99
  },
  {
    name: "table",
    inventory: 10,
    unitPrice: 123.75
  },
  {
    name: "sofa",
    inventory: 2,
    unitPrice: 399.50
  }
];
console.table(items)

// Clear
console.clear()

// HTML Element
let element = document.getElementsByTagName("BODY")[0];
console.log(element)

// Dir
const userInfo = {"name":"John Miller", "id":2522, "theme":"dark"}
console.dir(userInfo);

// Color
console.log('%cColor of the text is green plus small font size', 'color: green; font-size: x-small');

// pass object, variable
const userDetails = {"name":"John Miller", "id":2522, "theme":"dark"}
console.log("Hey %s, here is your details %o in form of object", "John", userDetails);

// Default 
console.log('console.log');
console.info('console.info');
console.debug('console.debug');
console.warn('console.warn');
console.error('console.error');

---

منبع: Mastering JS console.log like a Pro
ترجمه: سیدمحمدحسین طباطبایی بالا