کدنویسی مستلزم خطاست اگر کدی ننویسید خطایی وجود ندارد شما خطارها رو میسازید …. داریم در مورد چی حرف میزنیم ؟

خود ما خطاها رو ایجاد میکنیم ! به این دلیل چون ما یک انسانیم نه یک ربات .

به صورت پیشفرض کاربران توی مرورگر نمیتونن خطا ها رو ببیند . اگر هم در اسکریپت ها خطای وجود داشته باشد نمیتوانند ببینن که مشکل از کجاست و اون رو درست کنند.

برای دیدن خطا و اطلاعات دیگر در مورد اسکریپت ها  “developer tools” به مرورگر اضافه شده است.

اکثر توسعه دهنده ها برای توسعه به کروم و فایرفاکس تمایل دارند. چون ابزار توسعه بهتری دارند. مرورگر های دیگه هم  developer tools را بعضی مواقع با ویژگی های خاص دارند اما اکپرا از کروم و فایرفاکس استفاده میشود. اما اکثرا توسعه دهنده ها به یک مرورگر خاص علاقه دارند مگر اینکه برای مشکل خاصی داشته باشند تا مروگرشون رو تغییر بدن.

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

گوگل کروم

این صفحه را باز کنید.توی اون صفحه یک خطای جاوا اسکریپت وجود دارد . که از چشمبازدیدکننده های عادی پنهان است برای دیدن خطا developer tools رو باز کنید.

کلید F12 یا در مک Cmd+Opt+J را فشار دهید. developer tools برای شما باز میشود و پیشفرض روی تب Console قرار دارد.

یه چیزی شبیه تصویر زیر میبینید.

نتیجه دقیق developer tools به ورژن کروم شما بستگی دارد که طی زمان های مختلف به دلیل ورژن ها با هم تفاوت دارند اما در کل باید شبیه همچنین تصویری که در بالا مشاهده میکنید رو هم توی کروم خودتون ببینید.

  • پیغام خطا رو با رنگ قرمز میتونید ببینید. در این مورد دستور lalala رو نمیشناسه.
  • در حقیقت این خطا bug.html:12 قابل کلیک هست با شماره خط ی که خطا رخ داده است.

زیر پیام خطا یک نماد > به رنگ آبی وجود دارد که علامت خط فرمان هست میتونیدم دستورات javascript رو تایپ کنیم و برای اجرا Enter رو فشار بدید(برای وارد کردن دستورات چند خطی Shift+Enter را استفاده کنید).

حالا شما میتونید خطا ها رو ببینید و این چیزا برای شروع کافیه . بعدا برمیگردیم به developer tools و debugging رو به صورت عمیق در فصل  Debugging کروم پوشش میدیم.

فایرفاکس ، edge و مروگر های دیگه

در اکثر مروگر ها برای باز کردن developer tools از F12 استفاده میکنند.

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

Safari

Safari مرورگر مک که در ویندوز و لینوکس پشتیبانی نمیشود.در اینجا کمی خاص هست که نیاز است ابتدا Develop menu رو فعال کنیم.

Preferences رو باز کنید و در تب Advanced گزینه Develop menu رو تیک بزنید.

حالا با Cmd+Opt+C میتونیم به محیط Develop  رو ببینید.

ورودی های چند خطی

معمولا برای قرار دادن یک خط کد در console  و اجرا کردنش  Enter رو فشار میدیم و برای نوشتن دستورات چند خطی از کلید Shift+Enter رو استفاده میکنیم.

خلاصه

  • Developer tools به ما اجازه میده که خطاها رو ببینیم دستورات رو اجرا کنیم متغیر ها رو بررسی کنید و خیلی چیزایه دیگه.
  • با کلید F12 در ویندوز و Cmd+Opt+J در مک البته در Safari کلید Cmd+Opt+C میتونیم اونها رو باز کرد.

منبع : www.javascript.info

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *