در این قسمت از آموزش های جاوا اسکریپت سراغ ابزار های مرورگر که برای شروع به آن ها نیاز داریم می رویم.
برای دیباگ کردن کدهایمان به ابزارهایی نیاز داریم که مثلا به ما بگوید کجای کد ما اشتباه است. خوشبختانه این ابزار به صورت پیش فرض در مرورگرهای امروزی وجود دارد. در واقع همه مرورگرها به صورت پیشفرض سیستمهایی برای توسعه وبسایت دارند. این ابزارها که در حالت عادی از دید کاربران مخفی هستند، Developer Tools نام دارند.
کنسول مرورگر و تب توسعه دهندگان
برای نمایش ابزار مخصوص توسعهدهندگان در مرورگر کروم مراحل زیر را طی کنید:
نمایش ابزار توسعهدهندگان در مرورگر کروم
روی صفحه در مرورگر کلیک راست کرده و گزینه Inspect را بزنید. یا این که دکمه F12 ویندوز را بزنید.
نمایش ابزار توسعهدهندگان در مرورگر فایرفاکس
در این جا نیز مانند فوق روی صفحه راست کلیک کنید و گزینه Inspect Element را بزنید. از دکمه F12 هم می توانید استفاده کنید.
تصویر باز شده در هردو یکسان است و تفاوت چندانی ندارد.
آشنایی با بخش Elements
این بخش از Developer Tools کدهای اچتیامال و سیاساس نهایی را نمایش میدهد. شما میتوانید از طریق این بخش تمامی تگهای اچتیامال صفحه را مشاهده کنید. همچنین در سمت راست این پنجره، یک بخش مخصوص نمایش CSS-ها وجود دارد که با رفتن روی هر المان، میتوانید دستورات CSS اعمالشده روی آن را در سمت راست صفحه و در بخش styles، مشاهده کنید.
تمامی CSS-ها و HTML-های صفحه قابل تغییر هستند و شما میتوانید همانجا در تب Elements، آنها را به دلخواه خود تغییر دهید و تغییرات خود را بهصورت زنده و لحظهای مشاهده کنید. البته این تغییرات تنها در مرورگر شما اجرا میشود و در سایت اصلی به هیچ عنوان تغییری ایجاد نمیشود. همچنین با هر بار Refresh و بارگذاری مجدد صفحه، تمام تغییرات شما نیز از بین خواهد رفت و همه چیز به حالت ابتدایی خود برخواهد گشت. همچنین شما میتوانید با کلیک روی المنتهای اچتیامال صفحه در صورت لزوم آنها را تغییر دهید یا کپی یا حذف کنید.
آشنایی با بخش Console
اینجا همانجایی است که ما با آن بسیار سر و کار خواهیم داشت. کنسول مرورگر یکی از پرکاربردترین بخشهایی است که در جاوا اسکریپت بدان نیاز خواهید داشت. این کنسول شما را از خطاها و مشکلات کدهای جاوا اسکریپت آگاه میکند و اطلاعات دقیق ارورها و خطاهای جاوا اسکریپتی در کد شما را اعلام میکند.
همچنین شما میتوانید پیغامهای دلخواه را در جاوا اسکریپت بنویسید و این پیغامها را در کنسول مرورگر نمایش دهید (اصطلاحا چاپ کنید). این کار توسط دستور console.log انجام میشود. بعدا این دستور را با هم استفاده خواهیم کرد.
همچنین شما میتوانید در محیط کنسول، بهصورت ریل تایم کد جاوا اسکریپت بنویسید و این کدها را همان جا اجرا کنید. برای مثال ما میتوانیم از دستور alert جاوا اسکریپت بهصورت مستقیم در کنسول استفاده کنیم. برای این کار دستور زیر را در کنسول مرورگر کپی کنید و اینتر بزنید.
alert("i am console")
آشنایی با بخش Network
این تب در واقع نمایشدهنده وضعیت تعامل شما با سرورهای سایت است. در واقع تمامی درخواستهای ارسالشده به سرور و وضعیت و پاسخ آنها در این تب قابل مشاهده است. به علت اینکه در این آموزش ما به سرور وصل نخواهیم شد، وارد جزئیات این تب نخواهیم شد.
شبیهسازی موبایل
یکی دیگر از ابزارهای کاربردی که در بخش توسعهدهندگان مرورگر قرار دارد، امکان شبیهسازی موبایل برای چک کردن سایت روی آن است. برای این کار، کافی است روی آیکون موبایل کلیک کنید و از آنجا سایزهای مختلف را انتخاب کنید. همچنین میتوانید از لیست دستگاههای موجود پیشفرض، یک دستگاه را انتخاب کنید و سایت را در ابعاد صفحه نمایش همان دستگاه ببینید.