کنسول جاوا اسکریپت چیست؟ + توضیح متدها

۶۶۷ بازدید
آخرین به‌روزرسانی: ۱۷ بهمن ۱۴۰۲
زمان مطالعه: ۱۲ دقیقه
دانلود PDF مقاله
کنسول جاوا اسکریپت چیست؟ + توضیح متدهاکنسول جاوا اسکریپت چیست؟ + توضیح متدها

مرورگرهای وب امروزی مجهز به ابزارهای توسعه پیشرفته‌ای هستند که برای پشتیبانی از جاوا اسکریپت و سایر فناوری‌های وب طراحی شده‌اند. در این جعبه‌ابزار، کنسول جاوا اسکریپت، شبیه به نوعی رابط مانند ترمینال است. کنسول Javascript با قابلیت‌هایی برای بازرسی «مدل شی سند» (DOM)، اشکال‌زدایی و بررسی دقیق فعالیت‌های شبکه، کمک‌های زیادی به توسعه‌دهندگان می‌کند. کنسول در اصل ثبت اطلاعات در طول توسعه برنامه‌های وب را تسهیل می‌کند و با اجرای عبارات دستورات جاوا اسکریپت، تعامل با صفحه وب را تقویت خواهد کرد. در واقع، کنسول توسعه‌دهندگان را برای نوشتن، مدیریت و نظارت بر جاوا اسکریپت به صورت پویا مجهز می‌کند.

997696

در این مطلب از «مجله فرادرس» به بررسی عملکرد کنسول جاوا اسکریپت مرورگر خواهیم پرداخت و مروری کلی بر سایر ابزارهای توسعه وب خواهیم داشت. کاربران با تجربه و مبتدی با مطالعه این مطلب و درک پیچیدگی‌های کنسول Javascript می‌توانند به طور قابل‌توجهی روند توسعه خود را بهبود ببخشند. در پایان مطالعه مطلب پیش‌ِ رو کاربران درک عمیقی از عملکردهای «Javascript Console» خواهند داشت و در پایان می‌توانند از این ابزار حیاتی برای توسعه و اشکال‌زدایی کدهای خود استفاده کنند.

کنسول جاوا اسکریپت چیست؟

کنسول جاوا اسکریپت به عنوان ابزاری ارزشمند برای توسعه‌دهندگان برای نظارت بر پیام‌ها و خطاهای مرتبط با کدهای تشکیل‌دهنده صفحات وب عمل می‌کند. این ابزار توسعه، ردیابی متغیرها، اجرای دستورات جاوا اسکریپت و تعامل با «Document Object Model (DOM)» صفحه را امکان‌پذیر خواهد کرد. این ابزار در عیب‌یابی سریع و مؤثر مشکلات درون کد بسیار مفید واقع شده است و امروزه کمتر توسعه‌دهنده‌ای پیدا می‌شود که از این ابزار استفاده نکند.

اهمیت کنسول Javascript در چیست؟

توسعه‌دهندگان از ابزار کنسول برای تعامل با مرورگر و عیب‌یابی مؤثر کد جاوا اسکریپت خود استفاده می‌کنند. در اصل کاربران و توسعه‌دهندگان با استفاده از متد «console.log» می‌توانند پیام‌ها، مقادیر و اشیا را در کنسول ضبط کنند و بینش ارزشمندی را در مورد رفتار کد ارائه دهند. همچنین کنسول در ساده‌سازی و افزایش کارایی فرآیندهای اشکال‌زدایی و آزمایش کد جاوا اسکریپت بسیار مفید است.

یک مرد نشسته پشت میز در حال کدنویسی با لپ تاپ و مشاهده کدها در مانیتور بزرگ پشت لپ تاپ

دستورات پایه کنسول جاوا اسکریپت

کنسول Javascript مبتنی بر دستور است و بر پایه دستورات عمل می‌کند. در فهرست زیر برخی از رایج‌ترین دستورات پایه این ابزار آورده شده است:

  • console.log(): پیام‌ها را به کنسول خروجی می‌دهد.
  • console.info(): پیام‌های اطلاعاتی را در کنسول به کاربران ارائه خواهد داد.
  • console.warn(): اخطارها را در کنسول نشان می‌دهد.
  • console.error(): خطاهای موجود در کنسول را برجسته می‌کند.
  • console.debug(): برای اهداف اشکال‌زدایی استفاده می‌شود.
  • console.clear(): محتوای کنسول را پاک می‌کند.
  • console.table(): داده‌ها را در قالب جدولی نمایش می‌دهد.
  • console.time() و console.timeEnd(): زمان لازم برای اجرای بلوکی از کد را اندازه‌گیری می‌کند.

همچنین برخی از دستورات کنسول پیشرفته به صورت فهرست زیر هستند:

  • console.assert(): فرضیات را تأیید می‌کند.
  • console.group()و console.groupEnd(): پیام‌های کنسول را سازماندهی می‌کند.
  • console.dir(): خصوصیات شیئی را ارائه می‌دهد.

نحوه استفاده از کنسول Javascript چگونه است؟

برای استفاده از کنسول جاوا اسکریپت، باید ابزارهای توسعه‌دهنده مرورگر وب خود را راه‌اندازی کرد. به طور معمول، این ابزارها به راحتی در محیط مرورگر قابل‌دسترسی هستند. می‌توان آن‌ها را با زدن دکمه «F12» یا کلیک راست روی هر صفحه وب و انتخاب «Inspect Element» فعال کرد. پس از باز شدن ابزارهای توسعه‌دهنده، باید به تب کنسول رفت. «سینتکس» (Syntax) متد console.log()به شرح زیر است:

1console.log(value1 [, value2, ..., valueN]);

متد console.log()یک یا چند پارامتر را در خود جای می‌دهد و انواع مقادیر مختلفی مانند «رشته‌ها» (String)، اعداد، اشیا یا آرایه‌ها را می‌پذیرد. این مقادیر با کاما از هم جدا خواهند شد و در داخل پرانتز قرار می‌گیرند.

باز کردن کنسول در مرورگر

برای توسعه‌دهندگان وب که با جاوا اسکریپت سروکار دراند، مرورگرهای مدرنی که از «HTML» و «XHTML» مبتنی بر استاندارد پشتیبانی می‌کنند، نوعی «Developer Console» شبیه به رابط پوسته ترمینال ارائه می‌دهند. در ادامه نحوه دسترسی به این کنسول در دو مرورگر معروف فایرفاکس و کروم آورده شده است.

کنسول جاوا اسکریپت در فایرفاکس

برای دستیابی به کنسول وب در فایرفاکس، باید روی منوی همبرگر مانند در گوشه سمت راست بالا در مجاورت نوار آدرس، کلیک کرد. پس از آن می‌توان با انتخاب گزینه «ابزارهای بیشتر | More Tools»، در آن «ابزار توسعه‌دهنده وب | Web Developer Tools» را برگزید.

تصویری برای نشان دادن کنسول جاوا اسکریپت در فایرفاکس
برای مشاهده تصویر در ابعاد بزرگ روی آن کلیک کنید.

پنجره بخش کنسول با طی کردن مراحل بالا به کاربران نشان داده می‌شود و این بخش همان کنسول جاوا اسکریپت مرورگر در فایرفاکس است. همچنین می‌توان از میانبر صفحه‌کلید «CTRL + SHIFT + K» در لینوکس و ویندوز، یا «COMMAND + OPTION + K» در سیستم عامل مک برای دسترسی سریع به کنسول وب استفاده کرد. پس از ورود به کنسول، می‌توان کار جاوا اسکریپت را به طور یکپارچه شروع کرد.

کنسول جاوا اسکریپت در مرورگر گوگل کروم

برای فعال کردن کنسول جاوا اسکریپت در کروم، باید به منوی سمت راست بالای پنجره مرورگر رفت که با سه‌نقطه عمودی مشخص شده است. پس از آن باید به «ابزارهای بیشتر | More Tools» مراجعه کرد و سپس «ابزار توسعه‌دهنده | Developer Tools» را برگزید.

تصویری برای نشان دادن کنسول جاوا اسکریپت در مرورگر گوگل کروم

با طی کردن مراحل بالا نوعی پنل به کاربر نشان داده می‌شود که در امتداد نوار منوی بالایی، می‌توان روی «Console» کلیک کرد تا کنسول جاوا اسکریپت ظاهر شود.

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

روش دیگر دستیابی به کنسول در گوگل کروم، استفاده از میانبر صفحه‌کلید CTRL + SHIFT + J  در لینوکس و ویندوز، یا COMMAND + OPTION + J  در macOS است.

مثال هایی برای استفاده از کنسول Javascript

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

برای نمونه قطعه کد زیر نوعی هشدار را به کاربران ارائه خواهد داد که رشته Hello, Faradars!را نمایش می‌دهد:

1alert("Hello, Faradrs!");

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

نمایش نوعی هشدار در کنسول مرورگر

توجه به این نکته مهم است که کنسول نه‌تنها هشدارها را راه‌اندازی می‌کند، بلکه نتیجه ارزیابی یک عبارت را نیز نشان می‌دهد و زمانی که عبارت فاقد مقدار بازگشتی خاص باشد، «تعریف‌نشده | Undefined» را بازمی‌گرداند.

به جای تکیه‌ بر هشدارهای باز شونده که نیاز به تعامل کاربر دارند، همچنین می‌توان با استفاده از «console.log»خروجی‌های کنسول را وارد و این‌گونه با جاوا اسکریپت شروع به کارکرد. به عنوان مثال، برای چاپ رشتهHello, Faradars!، می‌توان کدهای زیر را در کنسول وارد کرد:

1console.log("Hello, Faradrs!");

در کنسول خروجی به صورت زیر خواهد بود:

تصویری برای نشان دادن نوعی اعلان در کنسول جاوا اسکریپت

علاوه بر این، کنسول از عملیات ریاضی پشتیبانی می‌کند که مثال زیر این موضوع را نشان می‌دهد:

1console.log(2 + 6);

مثال فوق این خروجی را به دست خواهد آورد:

8

همچنین انجام عملیات ریاضیات پیچیده‌تر نیز امکان‌پذیر است، مانند مثال زیر:

1console.log(34348.2342343403285953845 * 4310.23409128534);
بر اساس رای ۰ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
Blog.HubSpotDigitalOcean
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *