کنسول توسعه دهنده (Developer console) برای جاوا اسکریپت

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

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

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

کنسول توسعه دهنده Chrome

برای درک بهتر مساله فایل bug.html را باز کنید.
شما محتوای صفحه را بدون ایراد می‌بینید ولی در واقع یک خطا جاوا اسکریپت در این صفحه وجود دارد که بخاطر سیاست‌های مرورگرها از چشم بازدیدکننده پنهان است. برای دیدن این خطا و جزئیات بیشتر باید Developer console مرورگر را باز کنیم.

برای باز کردن Developer console کلید F12 را در ویندوز و یا Cmd+Opt+J را در مک فشار دهید تا پنجره توسعه دهنده باز شود.

developer console تقریبا در همه مروگرها ساختاری مشابه تصویر بالا دارد، چندین تب مختلف که هر کدام برای فعالیت خاصی در نظر گرفته شده‌اند. در تصویر بالا و بررسی خطای پیش آمده به دو نکته باید توجه کرد.

• برای بررسی خطا باید به تب console بروید همانطور که می‌بینید یک خطا در کد ما وجود داردو آن دستور ناشناخته lalala است.
• در سمت راست خطا نام فایل و خط رخ دادن خطا درج شده است، با کلیک بر روی آن کد منبع صفحه اچ تی ام را مشاهده خواهید کرد.

در خط بعدی کنسول و بعد از علامت > می‌توانید دستورات جاوا اسکریپت را وارد کرده و با زدن کلید Enter آنها را اجرا کنید. در آینده به وضوح در مورد خطایابی و کار با کنسول توسعه دهنده در بخش های مختلف توضیح خواهیم داد.

برای نوشتن چند خط و سپس اجرا کردن باید خط‌ها را با Shift+Enter از هم جدا کرده و در آخرین خط Enter را بزنید

کنسول توسعه دهنده در Firefox، Edge

در موزیلا و فایرفاکس و تقریبا بیشتر مرورگرها از کلید F12 برای دسترسی به developer console استفاده می‌شود. اگر نحوه کارکردن با یکی از آنها را یاد بگیرید تقریبا می‌توانید با کنسول همه مروگرها به خوبی کار کنید.

کنسول توسعه دهنده در Safari

مرورگر Safari که مرورگر پیش‌فرض سیستم‌عامل‌های شرکت اپل است کمی با سایر مروگر ها متفاوت است.در این مرورگر به صورت پیش‌فرض کنسول توسعه غیر فعال است و قبل از استفاده باید آن را فعال کنید. برای فعال سازی مراحل زیر را انجام دهید:

• ابتدا در منوی safari گزینه Preferences را انتخاب کنید.
• در پنجره باز شده تب Advance را انتخاب کنید.
• در انتهای صفحه تیک show developer menu in menu bar را بزنید. با انتخاب این گزینه یه منوی جدید با نام develop به منوها اضافه می‌شود.
• در منوی develop بر روی گزینه show error console کلیک کنید تا پنجره کنسول خطا باز شود.

خلاصه درس:

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

تمرین برای آشنایی بیشتر:

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

آزمون درس:

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

آزمون درس کنسول توسعه دهنده در Google form