خیلی از اوقات در کدهایی که می‌نویسیم سوتی می‌دهیم، اشتباه می‌کنیم و به باگ می‌خوریم. همه‌ی برنامه‌نویسان کم و بیش با این موضوع درگیر هستند، زیرا که ما انسان هستیم، نه ربات یا فرشته! انسان هم ممکن الخطاست.
وقتی خطایی رخ می‌دهد مرورگر آن را بروز نمی‌دهد تا کاربر خطا را نبیند. حالا اگر چیزی درست کار نکند نمی‌توانیم بفهمیم کجاست و دقیقاً چه اتّفاقی افتاده است که نسبت به اصلاحش اقدام کنیم.
برای مشاهده‌ی خطاها و به دست آوردن اطلاعات مفید و فراوان دیگری از این دست، مرورگرها قابلیّتی تحت عنوان Developer Tools یا به اختصار DevTools در خود گنجانده‌اند، که ما آن را «ابزار برنامه‌نویسی» می‌نامیم.
بیشتر برنامه‌نویسان از مرورگر Chrome یا Firefox استفاده می‌کنند، زیرا که ابزار برنامه‌نویسی این مرورگرها نسبت به دیگران بسیار قوی‌تر است. سایر مرورگرها هم ابزار برنامه‌نویسی دارند، حتّی شاید قابلیّت خاصی هم داشته باشد، ولی فراتر از ابزار برنامه‌نویسی همین دو مرورگر نیست. برنامه‌نویسان معمولاً به دلخواه خود از یک مرورگر استفاده می‌کنند و اگر مشکلی در مرورگر خاصی گزارش شد برای رفع مشکل سراغ آن مرورگر هم می‌روند.
ابزار برنامه‌نویسی واقعاً شگفت‌انگیز است؛ زیرا امکانات فراوانی دارد که کار برنامه‌نویسان را بسیار ساده می‌کند. در ادامه فقط برای شروع کار، این ابزار را باز می‌کنیم، خطاها را بررسی می‌کنیم و دستورات جاوااسکریپتی دلخواه‌مان را در آن اجرا می‌کنیم.
مرورگر کروم
صفحه‌ی bug.html را باز کنید.
در این صفحه یک خطای جاوااسکریپتی وجود دارد که کاربر عادی با چشم غیر مسلّح نمی‌تواند آن را ببیند!
خوب، حالا برای این که بتوانیم خطا را ببینیم با فشردن کلید F12 ابزار برنامه‌نویسی را باز می‌کنیم (اگر از سیستم عامل مک استفاده می‌کنید Cmd+Opt+J را بزنید).
ابزار برنامه‌نویسی در حالت پیش‌فرض باید روی سربرگ Console باشد (اگر در این سربرگ نبودید به این سربرگ بروید).
حالا چیزی شبیه تصویر زیر را می‌بینید.
البته قیافه‌ی دقیق ابزار برنامه‌نویسی شما به نسخه‌ی مرورگرتان بستگی دارد، زیرا که کروم طراحی آن را در طول زمان تغییر می‌دهد، ولی در هر صورت باید شبیه به همین تصویر باشد.
- در این جا خطاهای موجود در کد شما به رنگ قرمز نمایش داده می‌شوند، مثلاً در این مورد دستور
lalalaدر کد تایپ شده است که دستوری ناشناخته در جاوااسکریپت است. - سمت راست خطا یک لینک قابل کلیک می‌بینید (در اینجا bug.html:12) که نام فایل و شماره‌ی خطی که به خطا خورده است را گزارش می‌دهد.
زیر متن خطا، یک علامت آبی رنگ > دیده می‌شود. در جلوی این علامت می‌توانید هر کد جاوااسکریپتی را که می‌خواهید بنویسید و کلید Enter را فشار دهید تا در همان لحظه اجرا شود. اگر دستور جاوااسکریپت مورد نظرتان چند خطی بود برای رفتن به خط بعدی از Shift+Enter استفاده کنید.
تا حالا یاد گرفتیم که چه طور با کمک ابزار برنامه‌نویسی خطاها را ببینیم که همین برای شروع کارمان کافیست. ان‌شاءالله در آینده بیشتر با این ابزار آشنا خواهیم شد.
فایرفاکس، Edge و سایر مرورگرها
در بیشتر مرورگرها با کلید F12 ابزار برنامه‌نویسی باز می‌شود.
شکل و شمایل ابزار برنامه‌نویسی در بین مرورگرهای مختلف نزدیک به یکدیگر است. شما همین که یاد بگیرید با ابزار برنامه‌نویسی یک مرورگر خاص، مثلاً کروم، کار کنید به راحتی می‌توانید با ابزار برنامه‌نویسی سایر مرورگرها هم کار کنید.
مرورگر Safari
مرورگر Safari که مخصوص سیستم عامل مک است و ویندوز یا لینوکس را پشتیبانی نمی‌کند یک مرحله‌ی اضافی‌تر برای استفاده از ابزار برنامه‌نویسی دارد. شما باید قبل از استفاده از ابزار برنامه‌نویسی Develop menu را فعّال کنید. برای این کار تنظیمات مرورگر را باز کنید، سربرگ Advanced را باز کنید، و تیک گزینه‌ی Show Develop menu in menu bar را در پایین صفحه بزنید.
حالا برای باز کردن کنسول مرورگر از کلید میانبر Cmd+Opt+C استفاده کنید.
خلاصه
- ابزار برنامه‌نویسی یا همان Developer tools خطاهای برنامه را نشان می‌دهد، و اجازه می‌دهد تا دستورات دلخواه خود را اجرا کنیم، مقادیر متغیّرها را بررسی کنیم و بسیاری امکانات دیگر…
- با فشردن کلید
F12در تمام مرورگرهای ویندوزی ابزار برنامه‌نویسی باز می‌شود. ولی در سیستم عامل مک برای بازکردن ابزار برنامه‌نویسی کروم از کلیدCmd+Opt+Jو برای مرورگر Safari ازCmd+Opt+Cاستفاده می‌کنیم (البته در مرورگر Safari نیاز به فعّالسازی دارد).