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

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

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

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

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

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

اهمیت کنسول 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» کلیک کرد تا کنسول جاوا اسکریپت ظاهر شود.

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

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

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

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

برای نمونه قطعه کد زیر نوعی هشدار را به کاربران ارائه خواهد داد که رشته 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);