کنسول هایی که هر برنامه نویس JavaScript باید بداند ...

اینکه JS کار کرده باشین و با Console آشنا نباشین کمی عجیبه ولی الان میخوام Consoleهایی که میتونه خیلی بیشتر بهمون کمک کنه را یادآوری کنم. در همه مرورگر قابلیتی با نام Console وجود داره که برای دیباگ کردن کدهای JS بدردمون میخوره.

console.log(); 

خب این کنسول توابعی را در اختیارمون قرار داده که میتونه توی مدیریتِ دیباگ کردن کدها بیشتر بهمون کمک کنه مثلا :

console.log();
console.info();
console.warn();
console.error();

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

خب هر کدوم از این موارد رنگ های مربوط به خودش را داره و توی هر خط بهتون نمایش میده

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

استفاده از placeholder

کلمات مختصری وجود داره که اگر توی console بزاریم بعد میتونیم براش مقدار درنظر بگیریم
o% : آبجکت
s% : رشته
d% : اعداد صحیح

var test = { 'number':10, 'name': 'Dornika', 'work': 'Web & Mobile Developer'};
console.log('your name are %s, your number are %d and your account detial is %o', test.name, test.number, test );

اضافه کردن CSS به console

اگر یکنواختی رنگ ها توی console براتون خسته کننده باشه یا اینکه نمیخواین از استایل پیش فرضی که کنسول بهتون داده استفاده کنین، میتونین خودتون استایل شخصی به هر کنسول بدین و هر پیام را با استایل خاصی مشخص کنین.

console.log('%cThis example for add CSS to console', 'color: green; font-size: x-large');

نمایش فایل های JSON با console.dir

برای نمایش فایل های json میتونین از این کنسول هم استفاده کنین

نمایش جدولی فایل ها JSON

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

console.table();

var json_var = [{id: '1', name:'dornica'},{id: '2', name: 'Mohammad'}, {id: '3', name: 'Ali'}];
console.table(json_var)

گروه بندی کنسول ها

برای مدیریت کنسول ها برای زمانیکه تعداد کنسول زیاد داشته باشیم، شاید بعضی جاها نیاز باشه که چند تا کنسول را توی هم نمایش بدیم.

console.group() & console.groupEnd();

console.group(); //group 1 started
    console.log('group 1');
        console.group(); // group 2 started
            console.log( 'group 2');
       console.groupEnd(); // group 2 ended
console.groupEnd(); // group 1 ended

شمارنده کنسول ها

console.count( optional: 'label' );

برای اینکه بدونیم برای مثال یک حلقه چند بار تکرار شده یا در کل بخوایم بدونیم تابع count چند بار صدا زده شده میتونیم از این متد استفاده کنیم. خب شاید بپرسین اگر توی برنامه دو یا چند حلقه داشته باشیم باید چیکار کنیم؟ این تابع مقدار ورودی به عنوان لیبل میگیره که میتونه هر حلقه را جداگانه بشماره.

for(let i=0; i<5; i++){
console.count('loop 1');
}

for(let i=0; i<5; i++){
    console.count('loop 1 ');
    for( let j=0; j<4; j++)
        console.count('loop 2 ');
}

این مورد حتما بدردتون میخوره

console.assert();

خب این تابع بهتون کمک میکنه یه سری شرایط خاص را نمایش بده برای مثال اگر میخواین ببینین جایی از برنامه اگر عدد زوج نبود بهتون ارور بده که مشکلشو برطرف کنین از کد زیر استفاده کنین.

for( let number=2; number<5; number+=1 ){ 
console.assert( number % 2 === 0 ,  'is not even', number)
}

برای مسیریابی توابع از این کنسول استفاده کنین

console.trace();

function parentFunction(){ childFunction(); }
function childFunction(){ console.trace(); }
parentFunction() ;

این نشون میده از تابع childFunction به تابع parentFunction میریم، حالا مثال زیادی داره که توی اسکریپت میشه استفاده کرد

مدیریت زمان

console.time();

برای اینکه بتونین زمان را توی اسکریپت مدیریت کنین و بدونین در چه زمانی کارهایی که گفتین انجام میشه میتونین از این تابع استفاده کنین. این تابع هم مثل count لیبل میگیره.

console.time( 'time test');
for(let j=0; j<100; j++){ 
// do anything
 }
 console.timeEnd('time test');

خب همه این مواردی که یادآوری کردم را میتونین با یه دستور پاک کنین و از ابتدا خودتون تست بگیرین.

console.clear();

مواردی که فکر میکردم شاید بدردتون بخوره و برای خودم هم یادآوری یشه را گفتم، البته توابع دیگه ای هم داره ولی من خودم بیشتر از این ها برای پیدا کردن باگ یا پارس کردن برنامه استفاده میکنم، خوشحال میشم شما هم تجربیاتتون را با من به اشتراک بزارین.

با تشکر
http://dornica.net