به عنوان یک توسعه دهنده وب، خوب می‌دانید که چقدر به خطایابی کد نیاز است. معمولا از کتابخانه‌های خارجی برای logها، قالب‌بندی و یا در برخی موارد نمایش آن‌ها استفاده می‌کنیم، اما کنسول مرورگرها از آنچه که ما فکر می‌کنیم، بسیار قدرتمند‌تر است.
وقتی که درباره کنسول فکر می‌کنیم، اولین چیزی که به ذهنمان می‌رسد، «console.log» است. اما تعداد بسیار بیشتری متد از آنچه که ما فکر می‌کنیم وجود دارند. حال خواهیم دید که چگونه بهترین استفاده را از کنسول ببریم.
کنسول چیست؟
کنسول JavaScript یک ویژگی داخلی در مرورگرهای مدرن است، که در محیطی صدف مانند وجود دارند. این ابزار، توسعه دهنده را قادر می‌سازد تا:
- یک log از خطاها و هشدارهایی که در یک صفحه رخ می‌دهند، ببیند.
- با استفاده از دستورات JavaScript، با صفحه در تعامل باشد.
- برنامه‌ها را خطایابی کند و به صورت مستقیم در مرورگر، از DOM عبور کند.
- فعالیت شبکه را ببیند و تجزیه و تحلیل کند.
اساسا، این ابزار شما را در نوشتن، مدیریت و بررسی JavaScript، مستقیما در مرورگر خود، قوی‌تر می‌کند.
Console.log، Console.error، Console.warn و Console.info
احتمالا این متدها، پر استفاده‌ترین متدها هستند. می‌توانید بیش از یک پارامتر را به این متدها انتقال دهید. هر پارامتر ارزیابی شده و در یک رشته که توسط یک space تعریف شده است، پیوسته می‌شود، اما در مورد آبجکت‌ها و آرایه‌ها، می‌توانید ویژگی‌های آن‌ها را مرور کنید.
Console.group
این متد شما را قادر می‌سازد تا مجموعه‌ای از console.logها (و همچنین error.info و...) را تحت گروهی که می‌تواند باز (Collapse) شود، گروه‌بندی کنید. سینتکس آن بسیار ساده است: فقط تمام console.logهایی که می‌خواهید گروه‌بندی کنید را قبل از console.group() (یا اگر می‌خواهید به طور پیشفرض بسته باشد، console.groupCollapsed()) وارد کنید. سپس به آخر آن یک console.groupEnd() اضافه کنید و گروه را ببندید.
نتیجه به دست آمده، چنین چیزی خواهد بود:
Console.table
از موقعی که consle.table را کشف کردم، زندگی من تغییر کرد. نمایش JSON یا یک JSON خیلی بزرگ داخل یک console.log یک تجربه وحشتناک است. Console.table شما را قادر می‌سازد تا این ساختارها را داخل یک جدول که می‌توانید ستون‌هایش را نامگذاری کنید و آن‌ها را به عنوان پارامتر انتقال دهید، نمایش دهید.
نتیجه به دست آمده شگفت انگیز بوده، و در خطایابی بسیار کاربردی است:
Console.count، Console.time و Console.timeEnd
این سه متد، برای هر توسعه دهنده‌ای که می‌خواهد خطایابی کند، ابزار شگفت‌انگیزی هستند. Console.count تعداد دفعاتی که count() در یک خط، و با یک نام فراخوانده شده است را می‌شمرد و خروجی می‌دهد. Console.time یک تایمر با نامی که به عنوان پارامتر ورودی تعیین شده است، شروع می‌کند و می‌تواند تا 10000 تایمر همزمان را بر روی صفحه داده شده اجرا کند. پس از این که آغاز شد، console.timeEnd را فراخوانی می‌کنیم تا تایمر را متوقف کنیم و زمان سپری شده را در کنسول نمایش دهیم.
خروجی آن چنین چیزی خواهد بود:
Console.trace و Console.assert
این متدها به سادگی یک Stack Trace از نقطه‌ای که فراخوانی شده بودند، نمایش می‌دهند. تصور کنید که در حال ساخت یک کتابخانه JavaScript هستید و می‌خواهید به کاربر اطلاع دهید که خطا در کجا بروز داده است. در این مورد، این متد می‌تواند بسیار کاربردی باشد. Console.assert هم مانند console.trace است، اما فقط در صورتی که شرط مورد نظر برقرار نباشد، آن را نمایش می‌دهد.
همانطور که می‌توانیم ببینیم، خروجی دقیقا چیزی است که React (یا هر کتابخانه دیگری) در هنگام ساخت یک Exception به ما نشان می‌دهد.
تمام کنسول‌ها را حذف کنید
استفاده از کنسول‌ها معمولا ما را مجبور می‌کند که آن‌ها را حذف کنیم. البته، من پیشنهاد نمی‌کنم که در هنگامی که کنسول‌ها نیاز نیستند از آن‌ها استفاده کنید. بهتر است که Error logها و Trace logها را در حالت توسعه رها کنید، تا در خطایابی به شما کمک کنند. من از Webpack استفاده زیادی کردم؛ هم در کار و هم در پروژه‌های خودم. این ابزار، با استفاده از uglifyjs-webpack-plugin به شما در حذف کنسول‌هایی که نمی‌خواهید باقی بمانند، کمک می‌کند.
این پیکربندی بسیار ناچیز بوده، و کار شما را آسان‌تر می‌کند.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید