مانند یک حرفه ای بر CONSOLE.LOG جاوا اسکریپت مسلط شوید

مانند یک حرفه ای بر console.log جاوا اسکریپت مسلط شوید

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

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

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

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

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

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

console log/info/debug/warn/error
console log/info/debug/warn/error

استفاده از placeholder

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

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

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

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

Messages with colors
Messages with colors

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

highlighting specific word
highlighting specific word

console.dir( )

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

console.dir

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

HTML Elements
HTML Elements

console.table ( )

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

Better visualization of an array of objects huh!
Better visualization of an array of objects huh!

console.group( ) & console.groupEnd( )

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

Grouping messages
Grouping messages

console.count( )

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

counter
counter

console.assert( )

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

Assertion
Assertion

console.trace( )

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

Trace
Trace

console.time( )

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

console.time

console.memory

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

Memory
Memory

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
ترجمه: سیدمحمدحسین طباطبایی بالا

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *