ابزارها و کنسول توسعهدهنده
اهداف یادگیری
- آشنایی با Developer Tools مرورگر و نحوهی باز کردن آن
- آشنایی با تب Console و کاربرد آن در توسعه
- یادگیری کار با متدهای پرکاربرد console
- آشنایی مقدماتی با نحوهی تست کد جاوااسکریپت مستقیماً در مرورگر
مقدمه
پیش از آنکه وارد آموزش عمیقتر جاوااسکریپت شویم، لازم است با ابزاری آشنا شوید که در تمام طول این دوره و همچنین در کار واقعی توسعه، همراه همیشگی شما خواهد بود: Developer Tools مرورگر. این ابزار به شما اجازه میدهد کد را اجرا کنید، خطاها را ببینید، ساختار HTML را بررسی کنید و رفتار جاوااسکریپت را لحظهبهلحظه دنبال کنید.
باز کردن Developer Tools
در اکثر مرورگرها (Chrome، Edge، Firefox) میتوانید Developer Tools را با یکی از روشهای زیر باز کنید:
- کلیک راست روی صفحه و انتخاب گزینهی Inspect
- فشردن کلید
F12 - فشردن ترکیب کلید
Ctrl + Shift + I(در ویندوز) یاCmd + Option + I(در مک)
پس از باز شدن، پنجرهای شامل چند تب مختلف مشاهده میکنید که یکی از مهمترین آنها برای این دوره، تب Console است.
تب Console چیست؟
Console محیطی است که در آن میتوانید:
- کد جاوااسکریپت بنویسید و بلافاصله نتیجهی آن را ببینید
- خروجی
console.logو متدهای مشابه را مشاهده کنید - خطاها (Errors) و هشدارها (Warnings) کد را ببینید
در طول این دوره، از Console برای تست بسیاری از مثالها استفاده خواهیم کرد.
متدهای پرکاربرد Console
شیء console چند متد مهم دارد که هرکدام کاربرد خاص خود را دارند:
console.log("پیام عادی");
console.warn("این یک هشدار است");
console.error("این یک خطاست");
console.table([{ name: "علی", age: 25 }, { name: "سارا", age: 30 }]);| متد | کاربرد |
|---|---|
console.log() | چاپ اطلاعات عمومی و مقادیر متغیرها |
console.warn() | نمایش پیام بهصورت هشدار (معمولاً زرد رنگ) |
console.error() | نمایش پیام بهصورت خطا (معمولاً قرمز رنگ) |
console.table() | نمایش دادههای آرایهای یا شیءمانند بهصورت جدول |
تحلیل کد
در مثال بالا، console.table یک آرایه از اشیاء دریافت میکند و بهجای چاپ ساده، آن را به شکل یک جدول با ستونهای name و age نمایش میدهد. این ویژگی هنگام بررسی دادههای ساختاریافته بسیار کاربردی است و در فصلهای مربوط به آرایه و شیء بیشتر با آن سروکار خواهیم داشت.
نوشتن مستقیم کد در Console
یکی از قابلیتهای مهم Console این است که میتوانید مستقیماً در آن کد بنویسید و بلافاصله نتیجه را ببینید، بدون نیاز به ساختن فایل HTML یا جاوااسکریپت جداگانه:
2 + 2
// خروجی: 4
"سلام".length
// خروجی: 5این قابلیت برای تست سریع یک قطعه کد کوچک، بدون نیاز به تغییر فایل پروژه، بسیار مفید است.
خطاها در Console
وقتی کد جاوااسکریپت شما دچار خطا شود، مرورگر جزئیات آن خطا را در Console نمایش میدهد؛ از جمله نوع خطا، توضیح آن و شماره خط مربوطه در فایل. یادگیری خواندن این پیامهای خطا یکی از مهارتهای ضروری در مسیر یادگیری برنامهنویسی است و در فصل مربوط به Error Handling با جزئیات بیشتری به آن میپردازیم.
Best Practices
- در حین یادگیری این دوره، Developer Tools را همیشه باز نگه دارید تا خروجی مثالها را مشاهده کنید.
- از
console.errorوconsole.warnبهجایconsole.logبرای پیامهای مهم استفاده کنید تا در میان خروجیهای زیاد گم نشوند. - در پروژههای نهایی و آماده انتشار، معمولاً
console.logهای اضافی حذف میشوند.
جمعبندی
Developer Tools مرورگر، بهویژه تب Console، مهمترین ابزار شما در طول این دوره خواهد بود. با استفاده از آن میتوانید کد بنویسید، خروجی را ببینید و خطاها را بررسی کنید. در درسهای بعدی، با مفاهیم پایهی جاوااسکریپت مانند متغیرها شروع خواهیم کرد و بهطور مداوم از همین Console برای آزمایش کدها استفاده میکنیم.