با این 10 ترفند Console مانند حرفه‌ای‌ها Debug کنید

در این مطلب 10 ترفند Console که با استفاده از اونا میتونین مانند افراد حرفه‌ای کدهاتون رو Debug و خطایابی کنید و سریعتر مشکلات رو پیدا و حل کنید.

در پایان این مطلب چیزایی در مورد توانایی‌های Console مرورگر Chrome یاد می‌گیرید که احتمالا قبلا در مورد اونا اطلاعاتی نداشته‌اید.

خب از موارد ساده شروع میکنیم و کم کم موارد پیشرفته رو قرار میدیم:

1. متد console.group و console.groupEnd

همونطور که از اسم این دستورها مشخص هست، با استفاده از این موارد میتونین چند log رو در یک گروه قرار بدین که میتونین اونا رو باز و بسته کنید. شما همچنین میتونین گروه‌بندی‌ها رو بصورت تو در تو قرار بدین و مواردی که مربوط به هم هستند رو در یک جا قرار بدین. با استفاده از console.group(‘groupName’) یک گروه شروع و با console.groupEnd(‘groupName’) به پایان می‌رسد.

وقتی گروه رو با group بسازید، در ابتدا باز هست و میتونین محتویات اون رو ببینید ولی اگر می‌خواهید از اول بسته باشه، میتونین از console.groupCollapsed استفاده کنید.

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 برگردونید، میتونین از console.countReset(‘Counter’) استفاده کنید.

4. متد console.time و console.timeEnd

با استفاده از console.time و مشخص کردن یک نام برای اون، میتونین یک تایمر رو راه‌اندازی کنید و با استفاده از console.timeEnd اون رو به پایان برسونید. این متدها معمولا جاهایی که میخواید تست Performance انجام بدین، بدردتون میخوره. شما هر تعداد تایمر که بخواید رو میتونین بصورت همزمان و با اسم‌های مختلف به وجود بیارید.

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 میتونین این دوره آموزشی رو در وبسایت سون لرن مطالعه کنید.

نویسنده

محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.