خطایابی (Debugging) در جاوا اسکریپت

با سلام، هر زمانی که قصد نوشتن کدهای جدیدی داشته باشید، مهم نیست که کدها را به زبان جاوا اسکریپت بنویسید یا به زبان PHP یا به زبان C و غیره، بالاخره به خطاهای مختلفی برمیخورید. در این قسمت از سری آموزشی جاوا اسکریپت می خواهیم به راه کار مقابله با این خطاها بپردازیم. به عبارت دیگر می خواهیم خطایابی در جاوا اسکریپت را ارائه دهیم.

خطایابی در جاوا اسکریپت (Debugging)

کدهایی که نوشته می شود می توانند دو نوع خطا داشته باشند:

خطاهای مربوط به نحو و ساختار کدها (syntax errors)
خطاهای مربوط به منطق برنامه نویسی (logical errors)

خیلی از این خطاها به راحتی پیدا و حل می شوند اما در بسیاری از مواقع پیدا کردن منبع خطا کار بسیار دشواری است؛ در مواقعی که با خطا مواجه می شویم هیچ اتفاق خاصی نمی افتد که ما بتوانیم بر اساس آن منشا مشکل را پیدا کنیم و هیچ پیغامی به شما نشان داده نمی شود که بگوید خطایتان کجا بوده است. بر این اساس:

به عملیات جست و جو و رفع خطاها در برنامه نویسی debugging یا خطایابی می گوییم.

خطایاب یا debugger

همانطور که گفتیم، پروسه ی Debugging (خطایابی در جاوا اسکریپت) کار آسانی نیست اما خوشبختانه اکثر مرورگرهای جدید ابزار خطایاب (debugger) دارند که می توانند فعال یا غیرفعال شوند تا خطاها را به کاربر نمایش دهند/ندهند. در این ابزارها می توانید breakpoint (به معنی «نقطه ی شکست») تعریف کنید؛ breakpoint ها نقاطی هستند که توسط شما در برنامه گذاشته می شوند تا متغیرهای مختلف هنگام اجرای کد بررسی شوند.

در حالت عادی برای فعال سازی debugger خود باید از کلید f12 استفاده کنید و سپس به سربرگ console بروید. اگر کلید f12 برایتان کار نکرد می توانید در قسمتی از صفحه کلیک راست کرده و inspect element را بزنید، سپس از آنجا به سربرگ console بروید.

متد ()console.log

اگر مرورگر شما از قابلیت debugging برخوردار است (تمام مرورگر های جدید مانند کروم و فایرفاکس تمام این قابلیت ها را دارند) می توانید از ()console.log استفاده کنید تا مقادیر مختلف را به شما نمایش دهد. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>

<p>Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu.</p>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

این یک کد ساده ی جاوا اسکریپت است که مقدار a + b را در کنسول مرورگر نمایش می دهد. برای مشاهده ی آن به ادیتور آنلاین جاوا اسکریپت مراجعه کنید.

پس از رفتن به صفحه ی ادیتور، کلید f12 را بزنید و به سربرگ console بروید. حالا هر بار که روی run with JS کلیک می کنید به console نگاه کنید. مقدار a + b برایتان به نمایش در می آید.

مثالی دیگر، کد زیر است:

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript console.log() Method</h1>

<p>Press F12 on your keyboard to view the message in the console view.</p>

<p>This example demonstrates how an Array is displayed in the console view.</p>

<script>
var myArr = ["Orange", "Banana", "Mango", "Kiwi" ];
console.log(myArr);
</script>

</body>
</html>

برای مشاهده ی این کد در ادیتور آنلاین جاوا اسکریپت به این لینک مراجعه کنید. پس از مراجعه به این صفحه، کلید f12 را بزنید و مشاهده می کنید که با هر بار کلیک روی دکمه ی run with JS در ادیتور آنلاین، محتویات آرایه نیز در console نمایش داده می شوند.

breakpoint ها یا نقاط شکست

شما می توانید در پنجره ی debugger در مرورگرتان، breakpoint هایی ایجاد کنید. هر breakpoint اجرای کد جاوا اسکریپت را متوقف می کند تا بتوانید مقادیر مختلف را در آن لحظه ارزیابی کنید و متوجه اشکال کدهایتان شوید. بعد از آنکه کدها را بررسی کردید می توانید با فشردن دکمه ی play به مرورگر بگویید اجرای کدهای جاوا اسکریپت را ادامه دهد.

برای استفاده از breakpoint دو راه اصلی وجود دارد:

راه اول: استفاده از سربرگ source برای خطایابی در جاوا اسکریپت

مبنای کار ما مرورگر کروم است اما با مشاهده ی کار ما در این مرورگر، خودتان می توانید در مرورگر های دیگر نیز کار کنید. برای شروع به کار به یکی از مثال های بالا یا به این صفحه بروید. چیزی که برای ما مهم است، این است که یک مثال داشته باشید تا بتوانیم روی آن debugging انجام دهیم اما مبنای کار این جلسه این مثال خواهد بود.

حالا کلید f12 را بزنید و این بار مانند تصویر زیر به سربرگ source بروید

حالا مطابق با تصویر بالا روی دکمه ی مشخص شده کلیک کنید تا محتویات آن باز شود. پس از باز شدن محتوا باید مطابق تصویر زیر ابتدا index.html و سپس hello.js را باز کنید

باز کردن فایل جاوا اسکریپت برای خطایابی در جاوا اسکریپت

در تصویر بالا سه قسمت مشخص شده اند:

Resources zone: این قسمت منابع مختلف سایت ما را نشان می دهد، مانند فایل های CSS و HTML و ... . همچنین تصاویر و افزونه های کروم نیز ممکن است در این قسمت ظاهر شوند.
Source zone: این قسمت سورس کد ما را نشان می دهد.
Information and control zone: این قسمت جهت انجام debugging است.

حالا برای تنظیم یک breakpoint باید روی خطی کلیک کنیم که می خواهیم آن را بررسی کنیم. به طور مثال من می خواهم خط چهارم را بررسی کنم بنابراین روی عدد خط چهارم کلیک می کنم تا آبی شود. با این کار در خط 4 یک breakpoint ایجاد کرده ام! همین کار را برای خط هشتم نیز انجام می دهم. به تصویر زیر دقت کنید:

تنظیم breakpoint برای خط چهارم و هشتم سورس کد

همانطور که می دانید اجرای کد جاوا اسکریپت از بالا (اولین خط) به پایین (آخرین خط) است. به زبان ساده، هر زمان اجرای کد جاوا اسکریپت به خط چهارم و هشتم برسد متوقف می شود تا ما بتوانیم به طور دقیق آن ها را بررسی کنیم.

به طور مثال کلید escape (بالا سمت چپ کیبورد) را می زنیم تا console باز شود و چند دستور در آن تایپ می کنیم و یا مقدار متغیر ها را زیر نظر می گیریم و ... . در سمت راست از تصویر بالا لیستی می بینید که نشان دهنده ی همه ی breakpoint هایی است که تا به حال تنظیم کرده اید.

مثلا فرض کنید در console خطایی به شما نمایش داده می شود که میگوید فلان متغیر مقدار صحیحی ندارد. شما می توانید از این قسمت روی آن متغیر یک breakpoint تعریف کنید تا خط به خط رفتار آن را زیر نظر بگیرید. این چنین متوجه می شوید که مثلا در فلان خط کد شما، این متغیر مقداری می گیرد که مد نظر شما نبوده است و خطا اینجاست. هنگامی که منشا خطا را پیدا کردید می توانید به سادگی آن را رفع کنید.

راه دوم: استفاده از دستور debugger برای خطایابی در جاوا اسکریپت+(

در این روش از کد debugger در سورس کد استفاده می کنیم. به کد زیر دقت کنید:

<!DOCTYPE html>
<html>
<head>
</head>

<body>

<p id="demo"></p>

<p>With the debugger turned on, the code below should stop executing before it executes the third line.</p>

<script>
var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

مشاهده ی این کد در ادیتور آنلاین جاوا اسکریپت.

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

امیدوارم از این قسمت لذت برده باشید.

دیدگاه‌های شما (1 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

mehr

08 آذر 1399

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