کنسول توسعه دهنده در مرورگر (Developer Console) | عیب‌یابی کد های جاوا اسکریپت

برنامه‌نویسی همیشه توش خطا هست. شما به احتمال زیاد اشتباه می‌کنین ... اوه من دارم از چی صحبت میکنم ؟!! اشتباه کردن یه چیزیه توی برنامه نویسی که حداقل اگه یه انسان بخواد یه برنامه‌ بنویسه اشتباه میکنه، مگه این که یه ربات بخواد این کار و انجام بده.اما توی مرورگر کاربرا به صورت پیش فرض هیچ خطایی نمی‌بینن پس اگه یه چیزی اشتباه باشه توی اسکریپتی که نوشتیم، ما نمیتونم ببینیم مشکل از چیه تا بتونیم حلش کنیمبرای دیدن خطاها و استفاده از اطلاعات مفید درباره اسکریپت‌ها قسمت "developer tools" (ابزارهای توسعه) توی مرورگرا جاسازی شدهبیشتر توسعه دهنده‌ها برای توسعه میرن سمت Chrome یا Firefox چون این مرورگرا بهترین ابزارهای توسعه رو دارن بقیه مرورگرا هم ابزارهای توسعه رو دارن، بعضی وقتا یه سری ویژگی خاص اضافه کردن اما معمولا با Chrome و Firefox بازی میکنن و زیاد فرق خاصی ندارنبنابراین بیشتر توسعه دهنده‌ها یه مرورگر مورد علاقه دارن و اگه یه مشکل توی یه مرورگر خاص وجود داشته باشه از بقیه مرورگرا استفاده میکننابزارهای توسعه خیلی قوی هستن، اونا خیلی قابلیت زیادی دارن برای شروع میریم سراغ این که چطوری بازشون کنیم و به خطاها یه نگاهی بندازیم و بعدشم چند تا دستور جاوا اسکریپت اجرا کنیم گوگل کروم (Google Chrome)این صفحه رو باز کنین (لینک) اگه توی باز کردنش مشکی داشتین از یه پروکسی یا فیلترشکن استفاده کنینیه ارور جاوا اسکریپت توی این صفحه هست. اما بازدید کننده سایت نمیتونه اون رو ببینه پس بیاین تا ابزار های توسعه رو باز کنیم و اروره رو ببینیم دکمه F12 یا اگه از مک(Mac) استفاده میکنین Cmd+Opt+J رو بزنین ابزار های توسعه به صورت پیش‌فرض روی سر‌برگ Console باز میشه یه چیزی شبیه به این عکس باید باشه:عکسی از ارور داخل کنسول مرورگر کروماین شکل بستگی داره به نسخه مرورگرتون ممکنه فرق کنه اما به عکس بالا باید شبیه باشهاینجا ما میتونیم یه پیغام قرمز رنگ ببینیم، اسکریپت یه دستور ناشناخته "lalala" رو داره نشون میده سمت راست یه لینک قابل کلیک شدن هست که به جایی که این خطا رخ داده داره اشاره می‌کنه که توی عکس بالا گفته bug.html:12 و این یعنی توی خط 12 فایل bug.html یه مشکلی هستزیر متن خطا یه علامت آبی < هست که داره محیط متنی (command line) رو نشون میده جایی که ما میتونیم دستورات جاوا اسکریپت رو تایپ کنیم و با زدن دکمه Enter اونا رو اجرا کنیم حالا ما میتونیم خطا ها رو ببینیم، و برای شروع این کافیه، ما بعدا به ابزار های توسعه بر می‌گردیم و توضیحات بیشتری رو توی قسمت (عیب یابی در کروم) بهتون میدیمهنوز این قسمت رو ترجمه نکردم به محض این که ترجمه‌اش تموم شد لینکش رو میذارماگه بخوام چند خط بنویسم و بعد اجرا کنم چیکار کنم ؟معمولا وقتی ما یه خط کد توی کنسول مینویسیم و دکمه Enter رو میزنیم و کدی که نوشتیم اجرا میشه برای این که بخوایم چند خط بنویسم و بعد اجراش کنیم باید Shift + Enter بزنیم و اینجوری میتونیم کد های طولانی تری بنویسم فایرفاکس(Firefox)، اج(Edge) و بقیه مرورگراتوی بیشتر مرورگرا با استفاده از F12 میشه ابزار های توسعه رو باز کرد ظاهر اونا کاملا مشابه هست وقتی که یکی از این ابزار ها رو بدونین (میتونین با کروم شروع کنین) بعدش خیلی راحته براتون تا با بقیه مرورگرا هم کار کنینسَفاری (Safari)سَفاری (مرورگری برای مک هست و توسط ویندوز/لینوکس پشتیبانی نمیشه) یه مقدار اینجا فرق میکنه ما نیاز داریم تا گزینه "Develop menu" رو فعال کنیماول Preferences رو باز کنین و به سربرگ Advanced برین یه تیک پایین صفحه هست اون رو باید فعال کنین حالا برای باز و بسته کردن کنسول میتونین از دکمه های Cmd+Opt+C استفاده کنین عکسی از تنظیمات مرورگر سَفاریهمچنین، توجه کنین که منوی بالا به نام "Develop" ظاهر میشه و اون دستورات و گزینه های زیاده داره خلاصه ابزار های توسعه به ما اجازه میدن تا بتونیم خطاها رو ببینیم، دستورات رو اجرا کنیم، متغیرها رو بررسی کنیم و خیلی چیزای دیگه ...ابزار های توسعه رو توی بیشتر مرورگرا روی ویندوز میشه با F12 باز کرد و کروم برای مک رو با فشردن Cmd+Opt+J و همچنین مرورگر سَفاری هم با Cmd+Opt+C (البته باز اول فعالش کنین) میشه باز کردخب خب بالاخره محیط کاریمون آماده شد. توی قسمت بعدی میریم سراغ جاوا اسکریپت پست قبلی (کدوم ویرایشگر کد مناسب منه؟) https://vrgl.ir/vKgu1 پست بعدی (خب دیگه بیاین سلام کنیم به دنیای جاوا اسکریپت :)) https://vrgl.ir/K2aik اشتراک گذاری یادتون نره و قلب پایین رو هم فشار بدین :) اگر توی این مقاله مشکلی بود یا خواستین توی این پروژه مشارکت کنین این لینک گیت‌هابش هست.منبعگیت‌هاب