20 روش کنسولی که نحوه اشکال زدایی شما را تغییر می دهد

ممکن است قبلاً با روش‌های اصلی کنسول مانند console.log، console.error و console.dir آشنایی داشته باشید، اما بیش از 20 روش کنسول در اختیار شما وجود دارد. این روش ها هر کدام اهداف خاصی دارند و استفاده از روش مناسب برای هر سناریو به میزان قابل توجهی توانایی های اشکال زدایی شما را افزایش می دهد.

من مقاله را به چهار بخش جداگانه تقسیم کردم. چهار بخش عبارتند از:

1. ورود به سیستم اولیه
2. ثبت فرمت شده
3. ثبت عملکرد
4. ثبت ابزار

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

روش های اصلی ثبت نام

برای شروع، باید پنج روش اصلی ثبت را مورد بحث قرار دهیم.

• ورود به سیستم
• اشکال زدایی
• اطلاعات
• هشدار دهد
• خطا

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

console.log("Log")
console.debug("Debug")
console.info("Info")
console.warn("Warn")
console.error("Error")

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

قابلیت روشن/خاموش کردن (نمایش/پنهان کردن) سطوح مختلف گزارش یکی از دلایل ارزشمند بودن این روش های مختلف ثبت است. می‌توانید به راحتی آنچه را که می‌خواهید نمایش دهید تنظیم کنید، بنابراین اگر فقط به خطاها علاقه دارید، می‌توانید تمام سطوح گزارش‌گیری را که خطا نیستند خاموش کنید و درک آنچه اتفاق می‌افتد را آسان‌تر کنید.

نحو پایه

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

console.log("Hello", "World", { name: "Kyle" })
// Hello World {name: 'Kyle'}

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

مشکلات با نمای زنده

مرورگرها با نمایش مقدار فعلی و به‌روز برای هر شیء ثبت‌شده در کنسول، یک ویژگی مفید برای اشکال‌زدایی ارائه می‌کنند. یعنی اگر کد زیر را اجرا کنید و کنسول را بررسی کنید، بسته به زمانی که کنسول را بررسی می کنید، ممکن است خروجی های مختلفی ببینید.

const person = { name: "Kyle" }
console.log(person)
person.name = "Sally"

در گوگل کروم، وقتی یک شی را در کنسول گسترش می دهید، در آن زمان است که مقدار آن محاسبه شده و در کنسول چاپ می شود. این بدان معنی است که اگر قبل از اجرای کد، شیء “person” را در کنسول گسترش دهید تا نام را به “Sally” تغییر دهید، حتی پس از تغییر نام به “Sally” همانطور که انتظار می رود ظاهر می شود. با این حال، اگر شیء “person” را پس از تغییر نام به “Sally” گسترش دهید، خواهید دید که نام شی “person” وارد شده به کنسول به جای “Kyle”، که مقدار واقعی بود، “Sally” است. وقتی از “شخص” خارج شدید.

گاهی اوقات، ممکن است شما آخرین مقدار را بخواهید، اما اغلب، می خواهید ارزش شی را در زمانی که در صفحه ثبت شده است بدانید. یک راه حل آسان برای این مسئله این است که به سادگی شی را قبل از ورود به صفحه کلون کنید.

const person = { name: "Kyle" }
console.log({ ...person })
person.name = "Sally"

در صورتی که شیء شما هیچ شیء یا آرایه تودرتو نداشته باشد، کد ذکر شده در بالا کار خواهد کرد. با این حال، اگر اشیاء یا آرایه‌های تودرتو در داخل شیء خود دارید، باید روش خود را برای کلون کردن عمیق شی بنویسید یا آن را به/از JSON سریال کنید.

const person = { name: "Kyle" }
console.log(JSON.parse(JSON.stringify(person)))
person.name = "Sally"

ثبت رشته پیشرفته

در نهایت، قبل از رفتن به روش‌های پیشرفته‌تر، ذکر گزینه‌هایی برای یک ظاهر طراحی پیشرفته با روش‌های اولیه ورود به سیستم ضروری است. گاهی اوقات، استایل اولیه رشته ها یا مقادیر چاپ ممکن است سفارشی سازی کافی را ارائه نکند و ممکن است به کنترل بیشتری بر نحوه نمایش خروجی نیاز داشته باشید. این امر به دو روش اصلی قابل انجام است:

1. قالب بندی رشته:
این شامل قالب بندی محتوا و قرار دادن محتوا در یک رشته است.

console.log("String: %s, Int: %d, Decimal: %f, Object: %o", "Hello", 1, .1, { name: "Kyle" })
// String: Hello, Int: 1, Decimal: 0.1, Object: {name: 'Kyle'}

این مثال از متغیرهای مختلفی مانند %s، %d، %f و %o استفاده می‌کند که نشان می‌دهد مقادیر باید کجا در خروجی کنسول درج شوند. %s برای متغیرهای رشته، %d برای مکان‌گردان‌های عدد صحیح، %f برای مکان‌نماهای اعشاری و %o برای مکان‌نماهای شیء استفاده می‌شود.

در حالی که این ویژگی می‌تواند مفید باشد، معمولاً از آن استفاده نمی‌شود زیرا الگوهای برچسب‌گذاری شده جایگزین مناسب‌تری ارائه می‌دهند.

console.log("String: %s", stringVariable)
console.log(`String: ${stringVariable}`)
// Same output

2. استایل CSS سفارشی:
نوع دوم قالب بندی، یک ظاهر طراحی سفارشی CSS، قدرتمندتر و انعطاف پذیرتر است. این به شما امکان می‌دهد تا CSS سفارشی برای استایل کردن لاگ‌های خود در کنسول بنویسید.

console.log("Normal, %cRed, %cGreen", "color: red", "background-color: green; color: white")

نماد %c در روش‌های ثبت‌نام کنسول مشخص می‌کند که سبک‌های CSS سفارشی باید روی متن زیر نماد اعمال شوند. آرگومان بعدی که پس از نماد %c به متد log ارسال می شود، سبک های CSS برای اعمال خواهد بود. این استایل ها تا انتهای متد log یا تا زمانی که نماد %c دیگری استفاده شود بر روی تمام متن اعمال می شود. این ویژگی توانایی ایجاد پیام‌های کنسولی جذاب و برجسته را برای اهداف خاص فراهم می‌کند.

روش های ثبت فرمت

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

کارگردان

روش dir مشابه روش log است اما با یک تفاوت کلیدی. هنگام استفاده از log، عناصر HTML به صورت HTML نمایش داده می شوند و می توان آنها را کاوش کرد، در حالی که با dir، همه چیز به گونه ای نمایش داده می شود که گویی با فرمت JSON است، از جمله عناصر HTML، که آن را برای بررسی ویژگی های عناصر HTML مفید می کند.

جدول

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

const people = [
  { name: "Kyle", age: 27, programmer: true },
  { name: "Sally", age: 15, programmer: false },
  { name: "John", age: 34, programmer: false },
  { name: "Beth", age: 72, programmer: true }
]
console.table(people)

روش جدول به شما امکان می دهد آرایه ای از اشیاء را در قالب جدول مشاهده کنید که مقایسه عناصر در آرایه را ساده تر می کند. حتی می‌توانید جدول را بر اساس یک ستون خاص با کلیک کردن روی سرصفحه آن در ابزار توسعه مرورگر خود در صورت وجود آن ویژگی مرتب کنید.

گروه بندی

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

1.گروه
2.groupCollapsed
3. گروه پایان

متدهای گروهی، از جمله group و groupCollapsed، گروهی را در کنسول راه اندازی می کنند، که groupCollapsed به عنوان یک گروه بسته شروع می شود و گروه به عنوان یک گروه باز شروع می شود. متد groupEnd گروه فعلی را می بندد. همه گزارش‌ها بین شروع و پایان یک گروه در داخل گروه قرار می‌گیرند. یک مثال برای کمک به درک ارائه شده است.

console.log("Outside")

console.group()
console.log("Inside First Group")
console.log("Still Inside First Group")
console.groupEnd()

console.group("Label")
console.log("Inside Second Group")

console.groupCollapsed()
console.log("Inside Nested Group")
console.groupEnd()

console.log("Still Inside Second Group")
console.groupEnd()

مثال قبلی استفاده از سه گروه را نشان داد. گروه اول مقداری را شامل نمی شد، بنابراین یک برچسب پیش فرض به آن داده شد. با این حال، گروه دوم به لطف مقدار ارسال شده به روش گروه، برچسب برچسب گذاری شد. همچنین نشان داده شد که می‌توانید گروه‌های تودرتو در داخل گروه‌ها داشته باشید. گروه داخلی یا تودرتو به صورت پیش فرض در خروجی به صورت گروهی جمع شده نمایش داده می شود.
روش‌های گروهی در شرایطی مفید هستند که اطلاعات مرتبط زیادی برای نمایش وجود دارد، اما شما می‌خواهید خروجی کنسول را مرتب نگه دارید.

روش های ثبت عملکرد

دسته بندی زیر از روش های کنسول مربوط به عملکرد است و می توان آن را به دو بخش تقسیم کرد:

1. مربوط به زمان
2. مربوط به پروفایلر

ثبت بر اساس زمان

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

console.time()
slowFunction()
console.timeEnd()
// default: 887.69189453125 ms

console.time("Label")
slowFunction()
console.timeEnd("Label")
// Label: 863.14306640625 ms

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

به‌علاوه، تعیین برچسب هنگام فراخوانی timeLog، درست مانند timeEnd، مهم است تا مشخص شود که می‌خواهید زمان فعلی را از کدام تایمر دریافت کنید.

console.time("Label")
slowFunctionOne()
console.timeLog("Label")
slowFunctionTwo()
console.timeEnd("Label")
// Label: 920.578125 ms
// Label: 1855.43896484375 ms

ثبت نمایه

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

console.profile()
slowFunction()
console.profileEnd()

console.profile("Label")
slowFunction()
console.profileEnd("Label")

ویژگی ثبت پروفایلر، نمایه ساز داخلی را در ابزارهای توسعه دهنده مرورگر شما راه اندازی می کند و داده های عملکرد مختلف را ثبت می کند. با این حال، ارائه این اطلاعات ممکن است در مرورگرهای مختلف متفاوت باشد و برخی از مرورگرها ممکن است اصلا از این ویژگی پشتیبانی نکنند. بنابراین، توصیه می شود از این روش با احتیاط و تنها در صورتی استفاده کنید که با نحوه عملکرد آن در مرورگر خاص خود آشنا هستید. علاوه بر این، روش timeStamp را می توان برای علامت گذاری یک نقطه در پروفایلر و اندازه گیری زمان صرف شده برای رسیدن به آن نقطه مورد استفاده قرار داد.

در پایان، می‌توان با استفاده از روش timeStamp نشانگرهایی را به نمایه‌گر اضافه کرد تا ببیند چقدر طول می‌کشد تا به نقاط خاصی برسید. با این حال، شایان ذکر است که ثبت پروفایلر یک ویژگی غیر استاندارد است و اطلاعات ثبت شده و نمایش آن ممکن است بسته به مرورگر مورد استفاده متفاوت باشد.

console.profile()
slowFunctionOne()
console.timeStamp()
slowFunctionTwo()
console.profileEnd()

روشهای ثبت ابزار

آخرین گروه از روش‌های کنسولی که می‌خواهم در مورد آن صحبت کنم، در هیچ یک از دسته‌های قبلی قرار نمی‌گیرد، اما همچنان بسیار مفید هستند.

ادعا کردن

یکی از کاربردی ترین روش های کنسول در میان گروه نهایی، روش اظهار نظر است. این تابع به طور مشابه با سایر روش های کنسول عمل می کند، با این حال، یک مقدار بولی را به عنوان اولین پارامتر خود می گیرد. اگر بولی درست باشد، روش هیچ خروجی تولید نمی کند. با این حال، اگر مقدار بولی نادرست باشد، همه چیزهایی که پس از پارامتر بولی به متد ارسال شده است را ثبت می کند. عملکردی مشابه با قرار دادن یک دستور log در داخل یک دستور if دارد.

console.assert(n === 1, "Not equal to one")
if (n !== 1) console.error("Not equal to one")
// Same output

این روش برای ارزیابی ارزش‌ها ایده‌آل است تا اطمینان حاصل شود که آنها انتظارات شما را برآورده می‌کنند، که باعث می‌شود گزارش‌های شما مرتب‌تر شوند، زیرا فقط زمانی ثبت نام می‌کنید که چیزی غیرمنتظره باشد.

روشن

متد console.clear به سادگی تمام مقادیر موجود در کنسول را پاک می کند.

console.clear()

count و countReset

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

console.count()
console.count()
console.countReset()
console.count()
// default: 1
// default: 2
// default: 1

console.count("Label")
console.count("Label")
console.countReset("Label")
console.count("Label")
// Label: 1
// Label: 2
// Label: 1

این به روشی مشابه تایمرها عمل می کند و به یک برچسب نیاز دارد که یک پارامتر اختیاری است تا مشخص کند چه چیزی در حال شمارش است. برای تنظیم مجدد تعداد، باید از همان برچسب با تابع countReset استفاده شود.

پی گیری

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

نتایجی که اظهار شده

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