ماذا تفعل عند مواجهة أخطاء أثناء كتابة التعليمات البرمجية
دليل هذا الفصل
ملاحظة
جميع الطرق في هذا الفصل مبنية على خبرة عملية مع أدوات تطوير الذكاء الاصطناعي مثل Cursor/Trae/Claude، ويمكن تطبيقها مباشرة في التطوير اليومي.
1. القاعدة الأساسية: التقط لقطة شاشة واسأل الذكاء الاصطناعي
لماذا هذا الفصل مهم؟
أول رد فعل للعديد من المبتدئين عند مواجهة خطأ هو:
- الذعر، والبدء في تعديل التعليمات البرمجية بشكل عشوائي
- قضاء نصف ساعة في البحث عن "كيفية حل خطأ xxx"
- محاولة فهم معنى الخطأ بنفسك
- تصحيح الأخطاء بمفردك حتى وقت متأخر من الليل
كل هذا مضيعة للوقت.
في عصر الذكاء الاصطناعي، أصبح تصحيح الأخطاء أمرًا بسيطًا للغاية:
رؤية خطأ ← التقاط لقطة شاشة ← سؤال الذكاء الاصطناعي ← اتباع تعليمات الذكاء الاصطناعيلا تحتاج إلى فهم الخطأ، ولا تحتاج إلى معرفة كيفية التصحيح، ولا حتى تحتاج إلى معرفة مكان المشكلة.
تحتاج فقط إلى تعلم كيف تسأل.
1.1 أبسط طريقة لطرح الأسئلة
لا تحتاج إلى قوالب معقدة، اختر إحدى الطريقتين:
الطريقة الأولى: وصف الظاهرة
التنسيق: ماذا فعلت للتو، وماذا يحدث الآن
عدّلت للتو كود صفحة تسجيل الدخول، والآن الصفحة بيضاء، ماذا أفعل؟الطريقة الثانية: لقطة شاشة
التقط لقطة شاشة للصفحة الحالية أو رسالة الخطأ مباشرة
[لقطة شاشة]
كيف أحل هذا الخطأ؟أفضل طريقة: وصف + لقطة شاشة
عدّلت للتو كود صفحة تسجيل الدخول، والآن الصفحة بيضاء.
[لقطة شاشة]
ماذا أفعل؟تذكر: صف السياق بوضوح، وأضف لقطة شاشة، وسيتمكن الذكاء الاصطناعي من حل مشكلتك بشكل أسرع.
1.2 كيفية شرح المشكلة بوضوح
يعرف العديد من المبتدئين أنهم بحاجة إلى طرح أسئلة، لكنهم لا يعرفون كيف يعبرون عنها. في الواقع، تحتاج فقط إلى توضيح ثلاثة أشياء:
1. ماذا فعلت للتو
لقد نقرت للتو على زر الحفظ
لقد عدّلت للتو كود صفحة تسجيل الدخول
لقد قمت للتو بتحديث الصفحة2. ماذا ترى الآن
الصفحة فارغة الآن
الزر لا يستجيب عند النقر عليه الآن
يتم عرض رسالة خطأ الآن3. ما التأثير الذي تريده
أريد أن يتم حفظ البيانات بنجاح
أريد أن يتم عرض الصفحة بشكل طبيعي
أريد أن تظهر نافذة منبثقة بعد النقر على الزرمثال كامل:
لقد نقرت للتو على زر الحفظ، والآن تعرض الصفحة خطأ "فشل الحفظ".
[لقطة شاشة]
أريد أن يتم حفظ بيانات النموذج في قاعدة البيانات بنجاح، ماذا أفعل؟المبادئ الأساسية:
- استخدم لغة بسيطة، بدون مصطلحات تقنية
- رتب حسب الترتيب الزمني: ماذا فعلت أولاً، ثم ماذا حدث
- اذكر توقعاتك، ليعرف الذكاء الاصطناعي ما تريده
2. الخطوة الأولى: صف الظاهرة مباشرة واسأل
عند مواجهة مشكلة، لا تتسرع في فتح F12. صف الظاهرة أولاً، وخذ لقطة شاشة للصفحة الحالية، وأرسلها للذكاء الاصطناعي.
في كثير من الأحيان، يمكن للذكاء الاصطناعي تقديم حل مباشرة بمجرد رؤية لقطة الشاشة.
2.1 كيف تصف الظواهر الشائعة
فقط صف ما تراه
الصفحة بيضاء
الصفحة فارغة عند الفتح، ماذا أفعل؟
[لقطة شاشة]الزر لا يستجيب عند النقر
لا يحدث شيء عند النقر على هذا الزر، ساعدني في التحقق.
[لقطة شاشة]لا يتم حفظ البيانات
نقرت على حفظ، لكن البيانات لم تُحفظ، ماذا أفعل؟
[لقطة شاشة]التنسيق يبدو غير صحيح
موضع هذا الزر منحرف، كيف أعدّله؟
[لقطة شاشة]خطأ في الواجهة
حدث خطأ عند استدعاء الواجهة، ساعدني في التحقق.
[لقطة شاشة]2.2 إذا حل الذكاء الاصطناعي المشكلة مباشرة
تهانينا، تم حل المشكلة! اتبع تعليمات الذكاء الاصطناعي للتعديل.
2.3 إذا قال الذكاء الاصطناعي "يحتاج إلى مزيد من المعلومات"
عندها فقط تحتاج إلى فتح F12 لإضافة المعلومات الرئيسية. تابع القراءة.
3. الخطوة الثانية: أضف المعلومات الرئيسية
عندما يقول الذكاء الاصطناعي إنه يحتاج إلى مزيد من المعلومات، حسب نوع المشكلة، افتح F12 وخذ لقطات شاشة للمحتوى المناسب.
3.1 متى تحتاج إلى إضافة معلومات
قد يرد الذكاء الاصطناعي هكذا:
- "يرجى فتح Console لمعرفة ما إذا كانت هناك أخطاء"
- "التقط لقطة شاشة للوحة Network لأراها"
- "يحتاج إلى معلومات الخطأ المحددة"
عندها، اتبع الإرشادات أدناه لإضافة لقطات الشاشة.
3.2 إضافة معلومات Console (صفحة بيضاء/أخطاء)
خطوات العملية
الخطوة الأولى: اضغط F12 لفتح أدوات المطورين
على Mac: Cmd+Option+I، أو انقر بزر الماوس الأيمن على الصفحة واختر "فحص".
الخطوة الثانية: انتقل إلى علامة تبويب Console
الخطوة الثالثة: التقط لقطة شاشة لرسائل الخطأ الحمراء
الخطوة الرابعة: أرسلها للذكاء الاصطناعي
أخطاء Console كما يلي:
[لقطة شاشة]3.3 إضافة معلومات Network (مشاكل البيانات/أخطاء API)
خطوات العملية
الخطوة الأولى: اضغط F12 لفتح أدوات المطورين
الخطوة الثانية: انتقل إلى علامة تبويب Network
الخطوة الثالثة: كرر العملية (انقر على حفظ/حدّث الصفحة)
الخطوة الرابعة: ابحث عن الطلب المقابل، وخذ لقطة شاشة
- تحقق من URL ورمز الحالة
- تحقق من Payload (المعلمات المرسلة)
- تحقق من Response (النتيجة المرجعة)
الخطوة الخامسة: أرسلها للذكاء الاصطناعي
معلومات Network كما يلي:
الطلب: [لقطة شاشة 1]
المعلمات: [لقطة شاشة 2]
النتيجة: [لقطة شاشة 3]3.4 إضافة معلومات Elements (مشاكل التنسيق)
خطوات العملية
الخطوة الأولى: انقر بزر الماوس الأيمن على العنصر ← "فحص"
ستنتقل أدوات المطورين تلقائيًا إلى العنصر.
الخطوة الثانية: التقط لقطة شاشة للوحة Styles
الخطوة الثالثة: أرسلها للذكاء الاصطناعي
أنماط العنصر كما يلي:
[لقطة شاشة]4. الخطوة الثالثة: التكرار حتى الحل
4.1 الممارسات غير الفعالة
هذه الممارسات ستضيع وقتك:
الذعر عند رؤية الخطأ، والبدء في تعديل التعليمات البرمجية بشكل عشوائي قضاء نصف ساعة في البحث عن حلول للأخطاء محاولة فهم معنى كل خطأ بنفسك تصحيح الأخطاء بمفردك حتى وقت متأخر من الليل
4.2 الممارسات الفعالة
اتبع هذه العملية:
صف الظاهرة مباشرة وخذ لقطة شاشة واسأل عندما يقول الذكاء الاصطناعي إنه يحتاج إلى مزيد من المعلومات، افتح F12 وأضفها اتبع الاقتراحات لتعديل الكود بعد التعديل، اختبر، وإذا استمرت المشكلة، استمر في أخذ لقطات شاشة والسؤال
5. الملخص: العملية الكاملة
مواجهة مشكلة
↓
وصف الظاهرة مباشرة + لقطة شاشة
↓
أرسلها للذكاء الاصطناعي: "ماذا أفعل؟"
↓
هل حلها الذكاء الاصطناعي مباشرة؟
↓ نعم
اتبع تعليمات الذكاء الاصطناعي
↓
اختبر ما إذا تم الحل
↓
↓ لا / يحتاج الذكاء الاصطناعي إلى مزيد من المعلومات
افتح F12، وأضف المعلومات الرئيسية
↓
أرسلها مرة أخرى للذكاء الاصطناعي
↓
كرر حتى يتم الحل