تابع console.log در جاوا اسکریپت

ساعت : ۱۲:۴۷

تاریخ : ۲۳ تیر ۱۳۹۸

معرفی دستور console.log در جاوا اسکریپت

تابع console.log در جاوا اسکریپت ، تابعی هست که برای نمایش لیستی از شیء های جاوا اسکریپت به کار برده میشه. کار تابع console.log اینجوریه که مقدار شی یا متغیری که در اون درج شده را برمی گردونه و برای ما در قسمت کنسول inspect چاپ میکنه. برخی از طراحان وب و برنامه نویسان این تصور رو دارن که با استفاده از console.log() و فراخوانی مرورگر از طریق اون خروجی اونا دیباگ می شه؛ که این اشتباهه. حالا در ادامه console.log() رو بیشتر توضیح میدیم.

box-sizing در CSS
دستور ()console.log در جاوا اسکریپت

معرفی تابع console.log در جاوا اسکریپت:

تابع console.logبه شکل زیر استفاده می شود:


console.log( parameter );

تابع console.log یک پارامتر ورودی میگیره. در واقع لیستی از شیء هایی که می خوایم مقدار آنها رو در خروجی مشاهده کنیم ، به عنوان ورودی در تابع console.log وارد میکنیم و نتیجه روی برای ما بر میگردونه. یعنی مثلا اگر رشته وارد کنیم مقداری مربوط به آن رشته و اگر عدد یا شیء وارد کنیم مقدار مربوط به آن را باز می گرداند.

برای درک بهتر یک مثال میزنیم. فرض کنید در کدهای جاوااسکریپت خودتون یک آرایه دارید که ۴ عنصر داره (مثلا اسم ۴ تا خودرو) و اسم این آرایه هم MyCssparkArray هست. حالا شما میخواین به کمک console.log بیاین ببینید داخل ارایه تون چیه و چه خروجی ای داره. حالا inspect بگیرید (ctrl + F12) و قسمت console رو باز کنید و دستور زیر رو اونجا بنویسید :


console.log( MyCssparkArray );

خروجی کدهای بالا به شکل زیر خواهد بود :

تابع console.log در جاوا اسکریپت

تفاوت بین دو دستور console.log و console.dir :

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

تابع console.log در جاوا اسکریپت
  • Console.log عناصر رو به شکل html چاپ می کند.
  • Console.dir عناصر رو به شکل J-SON چاپ می کند.

اما اگر تابع console.log در جاوا اسکریپت خطا میده و دیگه استفاده از آن فایده ایی نداره، چگونه اونو متوقف کنیم و به جای اون بیایم از دیباگر مرورگر در جاوا اسکریپت استفاده کنیم؟ در ادامه این مطلب را شرح می دهیم.

شاید در هنگام استفاده از تابع console.log در جاوا اسکریپت از خودتون بپرسید که آیا این کنسول در هنگام اشکال زدایی و بازنگری کدها صحیح عمل می کنه یا اینکه کد را ویرایش می کنه؟ و اینکه آیا بعد از اتمام اشکال زدایی و دیباگ به برنامه نویس اجازه ادامه کدنویسی را می ده؟ در پاسخ باید گفت که ارسال توابع و اشیاء به کنسول و در نهایت چاپ خروجی کاملا بصری است و تمامی عملیات را در خروجی می توان مشاهده کرد.

اما درباره توقف تابع console.log در جاوا اسکریپت باید گفت که فقط با زدن یک دکمه آن را متوقف کنید. به این صورت که در هنگام اتفاق افتادن یک رویداد تنها با یک کلیک و یا زدن یک دکمه اونو متوقف کنید. حتی می تونید مقدار متغیرهایی که می خواین اونارو ببینید فقط با تایپ کردن نام مشاهده کنید. اما به تازگی ابزاری با عنوان devtools به مرورگرهای جاوا اسکریپت اضافه شده که با استفاده از اون میشه دیباگ مناسب و دقیق تر را انجام داد. با مراجعه به بخش advance در internet option می تونید دیباگر خود مرورگر را فعال کنید.

در صورتی که به آموزش css و یا آموزش jquery و یا آموزش bootstrap علاقه دارید میتونید از آموزش های پروژه محور و کاربردی سی اس اس پارک استفاده کنید که ضمانت بازگشت وجه هم داره.



  • تابع console.log در جاوا اسکریپت
    نام نویسنده : میلاد احمدی نیا
  • تابع console.log در جاوا اسکریپت
    نام نویسنده : رضا ابولحسن زاده
  • تابع console.log در جاوا اسکریپت
    نام نویسنده : رضا ابولحسن زاده
  • تابع console.log در جاوا اسکریپت
    نام نویسنده : رضا ابولحسن زاده

درباره نویسنده : برنامه نویس front-end و کارشناس فناوری اطلاعات

پاسخی بگذارید

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