tgoop.com/fullStackDevs/491
Last Update:
#Chain_posts
✳️Developer Tools Console
🔹معرفی چند متد در کنسول مرورگر که دیباگ کردن کدهای js را در وب اپلیکیشن سهل و آسان می نماید.
🔹اگر تاکنون با کنسول مرورگر کار نکرده اید و با آن اشنایی ندارید همین الان مروگر را باز کرده و در هر جایی از صفحه کلیک راست کرده گزینه INSPECT ELEMENT را انتخاب کرده و به تب CONSOLE بروید. یا با فشردن کلید های CTRL + SHIFT + J کنسول مرورگر بازمیشود.(در برخی مرورگر ها نظیر کروم با فشردن کلید های CTRL + SHIFT + I).
▫️console.log()
🔸یکی از پرکاربردترین متدهایی که هر برنامه نویس جاوا اسکریپتی حداقل یکبار از آن استفاده کرده است.برای نمایش هر نوع متغیر و ابجکتی در کنسول مرورگر از این متد استفاده میکنیم.
برای نمایش چند شئ میتوانید با ',' آنها را از هم جدا کنید. همچنین این متد در پارامتر اول فرمت نمایشی خروجی را دریافت میکند به عنوان مثال فرمت
%c
امکان استایل دهی خروجی با css را فراهم مینماید.
console.log('%cThis text is styled!', 'color: #86CC00; background-color: blue; font-size: 20px; padding: 3px;')
کد بالا پیام مشخص شده را در یک کادر آبی رنگ نمایش خواهد داد.
🔻نکته برای اجرا شدن کد ها در کنسول مرورگر بعد از نوشتن هر کد کلید ENTER را فشار دهید.اگر میخواهید کد را چند خط بنویسید برای رفتن به خط بعد بدون اجرا شدن کد کلید های SHIFT + ENTER را فشار دهید.
▫️console.assert(expression, object)
🔸این متد دو پارامتر دریافت میکند . پارامتر اول یک عبارت شرطی میباشد و پارامتر دوم یک آبجکت یا یک رشته و..
در صورتی که خروجی عبارت شرطی پاس داده این متد FALSE باشد در نتیجه پارامتر دوم در خروچی چاپ خواهد شد.
var count = 5;
console.assert(count > 10, 'count is not larger than 10');
🔻برای پاک کردن انچه تاکنون نوشته اید از console.clear() استفاده کنید.
▫️console.count(label)
🔸این متد هر بار تعداد دفعاتی که با label مشخص شده، صدا زده شده است در خروجی نمایش میدهد. label پاس داده شده کلیدی برای متمایز کرد console.count ها از یکدیگر است.
▫️console.error(object [, object, …])
🔸این متد نیز مثل متد log پارامترهای ورودی خود را در خروجی چاپ میکند با این تفاوت که حروجی به عنوان یک error علامت گذاری میشود و همچنین یک stack trace ای از محلی که این متد صدا زده شده نمایش خواهد داد.
▫️console.group(object[, object, …])
▫️console.groupEnd()
🔸برای نمایش دادن مجموعه ای ار log message ها با هم که مطعلق به یک گروه اند از این متد استفاده میکنیم. بدین ترتیب که ابتدا با استفاده از متد
console.group(object[, object, …])
یک گروه جدید ایجاد کرده و هر message log و error log بعد از ایجاد تا قبل بستن آن در یک گروه میگیرند.
console.group("webdevs");
console.log("happy")
console.log("js")
console.error("codding");
console.groupEnd();
▫️console.info(object [, object, …])
🔸این متد نیز مانند متد log برای نمایش log message های به کاربرده میشود با این تفاوت خروجی نمایش داده شده توسط این متد به عنوان یک information نشانه گذاری میشوند.
▫️console.table(data)
🔸برای نمایش یک داده ساختاری مانند (ابجکت ها ، ارایه ها و...) در قالب یک جدول از این متد استفاده میکنیم.
▫️console.time(label)
▫️console.timeEnd(label)
🔸از این متد ها برای نمایش میزان زمانی که اجرای یک قطعه کد طول میکشد استفاده میکنیم.
console.time('Draw frame');
// Execute some code...
console.timeEnd('Draw frame');
برای مشخص کردن میزان زمان اجرای یک قطعه کد دو متد time و timeEnd را در با label های همنام به عنوان پارامتر ورودی در ابتدا و انتهای قطعه کد قرار دهید.
▫️console.warn(object [, object, …])
🔸از این متد هم برای چاپ خروجی به عنوان یک warning استفاده میشود.
@FullStackDevs
BY Web Devs
Share with your friend now:
tgoop.com/fullStackDevs/491