69- دروس جافا سكربت – JS Debugging

### مقدمة إلى تصحيح الأخطاء في JavaScript

تصحيح الأخطاء (Debugging) هو جزء أساسي من تطوير البرمجيات، فهو العملية التي يتم من خلالها تحديد الأخطاء وتصحيحها في الشيفرة البرمجية. في لغة JavaScript، تكون عملية التصحيح ضرورية لضمان عمل التطبيق بشكل صحيح وسلس. يتضمن تصحيح الأخطاء في JavaScript تقنيات وأدوات تساعد المطورين على فهم الأخطاء وإصلاحها بكفاءة.

### أدوات تصحيح الأخطاء في JavaScript

#### 1. **استخدام console.log()**

واحدة من أبسط الطرق لتتبع ما يحدث في تطبيق JavaScript هي استخدام `console.log()`. يمكن للمطورين طباعة القيم المتغيرة في نقاط مختلفة من الشيفرة لتحديد مكان حدوث الخطأ.

function calculateTotal(price, tax) {
    console.log("Price:", price);
    console.log("Tax:", tax);
    var total = price + tax;
    console.log("Total:", total);
    return total;
}
calculateTotal(100, 20);

#### 2. **استخدام أدوات المطور (Developer Tools) في [شركة برمجة مصرية] المتصفحات**

توفر معظم المتصفحات الحديثة مثل Chrome وFirefox أدوات مطور قوية تحتوي على ميزات تصحيح متقدمة.

– **Console**: لعرض رسائل الخطأ والتنبيهات والمخرجات الأخرى.
– **Sources**: لاستعراض الشيفرة البرمجية وضبط نقاط التوقف (Breakpoints).
– **Network**: لمراقبة الطلبات الشبكية والأداء.

#### 3. **نقاط التوقف (Breakpoints)**

تسمح نقاط التوقف للمطورين بإيقاف تنفيذ الشيفرة عند نقطة معينة لفحص الحالة الحالية للتطبيق. يمكن إضافة نقاط التوقف في أدوات المطور بالنقر على جانب الرقم في ملف الشيفرة.

function processData(data) {
    var processedData = data.map(item => {
        debugger; // نقطة توقف
        return item * 2;
    });
    return processedData;
}

#### 4. **استخدام debugger**

يمكنك وضع الكلمة المفتاحية `debugger` في الشيفرة لإيقاف التنفيذ تلقائياً عند هذه النقطة إذا كان لديك أدوات المطور مفتوحة.

function findMax(arr) {
    debugger; // سيوقف التنفيذ هنا
    return Math.max(...arr);
}
findMax([1, 2, 3, 4, 5]);

### استراتيجيات تصحيح الأخطاء

#### 1. **إعادة إنتاج الخطأ**

حاول إعادة إنتاج الخطأ بشكل متسق. إذا كان بإمكانك إعادة إنتاجه، يمكنك اكتشاف السبب وعزله.

#### 2. **تبسيط الشيفرة**

قم بتبسيط الشيفرة إلى أبسط شكل ممكن حيث لا يزال الخطأ موجودًا. هذا يساعد في تحديد الجذر الرئيسي للمشكلة.

#### 3. **التحقق من الأخطاء الشائعة**

– **أخطاء النحو (Syntax Errors)**: مثل الأقواس المفقودة أو القواعد النحوية غير الصحيحة.
– **أخطاء النطاق (Scope Errors)**: التأكد من أن المتغيرات معرفة في النطاق الصحيح.
– **أخطاء الأنواع (Type Errors)**: التأكد من استخدام أنواع البيانات [شركة برمجة مصرية] الصحيحة.

### أمثلة عملية

#### مثال 1: خطأ في نوع البيانات

function add(a, b) {
    return a + b;
}
console.log(add("10", 5)); // هنا قد تتوقع 15 لكن النتيجة ستكون "105"

في المثال أعلاه، يجب تحويل السلسلة النصية إلى رقم:

function add(a, b) {
    return Number(a) + b;
}
console.log(add("10", 5)); // الآن النتيجة ستكون 15

#### مثال 2: خطأ في النطاق

function createCounter() {
    var count = 0;
    return function() {
        count++;
        console.log(count);
    };
}

var counter1 = createCounter();
counter1(); // 1
counter1(); // 2

var counter2 = createCounter();
counter2(); // 1

هنا، كل استدعاء لـ `createCounter()` ينشئ نطاقًا جديدًا للمتغير `count`.

### الخاتمة

تصحيح الأخطاء في JavaScript هو مهارة حيوية يجب أن يتقنها المطورون لضمان كتابة شيفرة نظيفة وخالية من الأخطاء. باستخدام الأدوات والتقنيات المناسبة، يمكن تسهيل هذه العملية بشكل كبير، مما يعزز من كفاءة وجودة تطوير البرمجيات.