کنسول هایی که هر برنامه نویس 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');console.log()/info()/debug()/warn()/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 );مثالی برای استفاده از placeholder در کنسول اضافه کردن CSS به consoleاگر یکنواختی رنگ ها توی console براتون خسته کننده باشه یا اینکه نمیخواین از استایل پیش فرضی که کنسول بهتون داده استفاده کنین، میتونین خودتون استایل شخصی به هر کنسول بدین و هر پیام را با استایل خاصی مشخص کنین.console.log('%cThis example for add CSS to console', 'color: green; font-size: x-large');مثالی برای افزودن css به کنسول، به c% دقت کنیننمایش فایل های 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.table()گروه بندی کنسول ها برای مدیریت کنسول ها برای زمانیکه تعداد کنسول زیاد داشته باشیم، شاید بعضی جاها نیاز باشه که چند تا کنسول را توی هم نمایش بدیم.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شمارنده کنسول ها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.assert()برای مسیریابی توابع از این کنسول استفاده کنینconsole.trace();function parentFunction(){ childFunction(); } function childFunction(){ console.trace(); } parentFunction() ;cاین نشون میده از تابع childFunction به تابع parentFunction میریم، حالا مثال زیادی داره که توی اسکریپت میشه استفاده کردمدیریت زمانconsole.time();برای اینکه بتونین زمان را توی اسکریپت مدیریت کنین و بدونین در چه زمانی کارهایی که گفتین انجام میشه میتونین از این تابع استفاده کنین. این تابع هم مثل count لیبل میگیره.console.time( 'time test'); for(let j=0; j<100; j++){ // do anything } console.timeEnd('time test');console.time()خب همه این مواردی که یادآوری کردم را میتونین با یه دستور پاک کنین و از ابتدا خودتون تست بگیرین.console.clear();مواردی که فکر میکردم شاید بدردتون بخوره و برای خودم هم یادآوری یشه را گفتم، البته توابع دیگه ای هم داره ولی من خودم بیشتر از این ها برای پیدا کردن باگ یا پارس کردن برنامه استفاده میکنم، خوشحال میشم شما هم تجربیاتتون را با من به اشتراک بزارین.با تشکرhttp://dornica.net