در این مطلب 10 ترفند Console که با استفاده از اونا میتونین مانند افراد حرفهای کدهاتون رو Debug و خطایابی کنید و سریعتر مشکلات رو پیدا و حل کنید.
در پایان این مطلب چیزایی در مورد تواناییهای Console مرورگر Chrome یاد میگیرید که احتمالا قبلا در مورد اونا اطلاعاتی نداشتهاید.
خب از موارد ساده شروع میکنیم و کم کم موارد پیشرفته رو قرار میدیم:
فهرست محتوای این مقاله
1. متد console.group و console.groupEnd
همونطور که از اسم این دستورها مشخص هست، با استفاده از این موارد میتونین چند log رو در یک گروه قرار بدین که میتونین اونا رو باز و بسته کنید. شما همچنین میتونین گروهبندیها رو بصورت تو در تو قرار بدین و مواردی که مربوط به هم هستند رو در یک جا قرار بدین. با استفاده از
یک گروه شروع و با به پایان میرسد.وقتی گروه رو با group بسازید، در ابتدا باز هست و میتونین محتویات اون رو ببینید ولی اگر میخواهید از اول بسته باشه، میتونین از
2. متد console.trace
زمانی که شما به call stack یک تابع بصورت کامل احتیاج دارید، میتونین از console.trace استفاده کنید. مثال زیر رو ببینید:
function foo() { function bar() { console.trace(); } bar(); } foo();
همونطور که میبینید Call stack بصورت کامل نمایش داده شده و میتونین از اون استفاده کنید.
3. متد console.count
این متد خیلی میتونه بدردتون بخوره. مثلا با استفاده از اون میتونین بفهمید که یک تابع چند بار فراخوانی شده و یا اینکه یک Component react چند بار render شده است. هر بار که این متد را فراخوانی میکنید، یک عدد به اون اضافه میشه و از صفر هم شروع میشه. این متد یک نام رو بصورت رشته دریافت میکنه و برای اون نام، شمارش رو انجام میده.
اگر نام دیگری رو قرار بدین، counter از اول شروع میشه و بصورت مستقل از هم کار میکنن. اگر بخواید یک counter با نام مشخص رو تحت شرایط خاصی reset کنید و اون رو به حالت اول یا 0 برگردونید، میتونین از
4. متد console.time و console.timeEnd
با استفاده از
5. متد console.assert
فرض کنید که شما یک عبارت یا مقدار دارید که میخواید وقتی false بود، یک چیزی رو در console چاپ کنید. بصورت نرمال اینکار رو با استفاده از یک if...else انجام میدین و هر زمان که false شد، موارد مورد نظرتون رو در console چاپ میکنید. اما با داشتن console.assert نیازی به این کارها نیست و کافیه که شرط یا عبارت مورد نظرتون رو به عنوان پارامتر اول و رشتهای که میخواید در زمان false بودن چاپ بشه رو به عنوان پارامتر دوم به console.assert پاس بدین. مثال زیر گویای همه چیز هست:
6. متد console.profile و console.profileEnd
اگر بخوایم بصورت نرمال از profile در chrome inspector استفاده کنیم، باید ابتدا قبل از اینکه هر کاری رو انجام بدیم، بر روی start بصورت دستی کلیک کنیم و کارهای مورد نظرمون رو انجام بدین و اون رو در پایان stop کنیم و حالا دنبال اون چیزی که مورد نظرمون هست بگردیم و ...
کارهای بالا خیلی وقت رو تلف میکنه و شما میتونین با استفاده از console.profile و console.profileEnd درون کدهاتون فقط اون چیزی که میخواید بررسی کنید رو پروفایل کنید و نیازی به start و stop کردن چیزی هم ندارید. کد زیر رو ببینید:
function thisNeedsToBeProfiled() { console.profile("thisNeedsToBeProfiled()"); // later, after doing some stuff console.profileEnd(); } thisNeedsToBeProfiled();
با اینکار پروفایل مورد نظر انجام میشه و شما میتونین در تب Javascript profiler اطلاعات مربوط به پروفایل مورد نظر رو مشاهده کنید:
به همین راحتی.
7. متد console.timeStamp
با استفاده از این روش میتونین یک مارک یا نشانه خاص رو در تب Performance قرار بدین تا راحتتر بتونین جای مورد نظرتون رو پیدا کنید.
console.timeStamp('custom timestamp!');
8. متد console.clear
با استفاده از این متد میتونین console رو پاک کنید و فضا رو برای بقیه چیزا خالی کنید.
9. ویژگی console.memory
با استفاده از این ویژگی میتونین اطلاعاتی در مورد Memory و HeapSize بدست بیارید. بصورت زیر:
10. console.table
شما به این متد، آرایهای از Objectها رو پاس میدید و اون متد با استفاده از این اطلاعات یک جدول رو به وجود میاره و اطلاعات رو بصورت زیبا به شما نشون میده.
به همین راحتی.
با استفاده از این 10 ترفند Console میتونین حرفهایتر از گذشته با Console کار کنید و کدهاتون رو Debug کنید.
برای کسب اطلاعات بیشتر در مورد Chrome inspector میتونین این دوره آموزشی رو در وبسایت سون لرن مطالعه کنید.
سلام
مقاله مفیدیه
لطفا آیتم شماره 9 رو کامل کنید
ممنون
این مطلب رو ببینید و اون رو با استفاده از مرورگر ترجمه کنید
https://www.toutjavascript.com/reference/ref-window.console.memory.php