چگونه با استفاده از کنسول JavaScript روند کاری خود را ارتقا دهیم؟

گردآوری و تالیف : عرفان کاکایی
تاریخ انتشار : 25 تیر 1397
دسته بندی ها : جاوا اسکریپت

به عنوان یک توسعه دهنده وب، خوب می‌دانید که چقدر به خطایابی کد نیاز است. معمولا از کتابخانه‌های خارجی برای 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 به شما در حذف کنسول‌هایی که نمی‌خواهید باقی بمانند، کمک می‌کند.

این پیکربندی بسیار ناچیز بوده، و کار شما را آسان‌تر می‌کند.

منبع

مقالات پیشنهادی

چگونه برنامه‌های JavaScript خود را با استفاده از حلقه‌ها بهینه‌سازی کنیم؟

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

چگونه فراخوانی‌های useEffect در HTTP را به سادگی و با استفاده از RxJS لغو کنیم؟

حال که Hookهای React به طور رسمی منتشر شده‌اند، الگوهای بیشتری در حال پدیدار شدن بر روی اینترنت هستند.

چگونه با استفاده از GraphQL، وبسایت خود را تمیز و قابل نگهداری کنیم؟

سرویس‌های REST API، دیتابیس‌های SQL، فایل‌های markdown، فایل‌های متنی، سرویس‌های SOAP... آیا می‌توانید راه دیگری برای ذخیره و رد و بدل داده و محتویات...

چگونه با استفاده از Phaser 3 و TypeScript، یک بازی ساده در مرورگر بسازیم؟

من یک توسعه دهنده مدافع و backend هستند، و تخصص توسعه‌دهی frontend من نسبتا ضعیف است. کمی پیش من می‌خواستم کمی خوش بگذرانم و یک بازی در مرورگر بسازم....