الدليل النهائي لتصحيح أخطاء JavaScript

تعرف على كيفية تصحيح أخطاء JavaScript باستخدام مصحح أخطاء المتصفح DevTools

التصحيح هو إحدى تلك المهارات الأساسية لنشاط المبرمج.

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

ماذا تفعل عندما لا يتصرف برنامج كتبته بالشكل الذي تتوقعه؟

تبدأ في تصحيحه.

معرفة مكان الخطأ

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

هذه كلها معلومات أساسية لبدء السير في الاتجاه الصحيح عند اكتشاف مشكلة.

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

اقرأ الكود

إن أبسط طريقة لتصحيح الأخطاء ، على الأقل من حيث الأدوات ، هي قراءة الكود الذي كتبته. بصوت عال. هناك شيء سحري في الاستماع من صوتنا لا يحدث عندما تقرأ في صمت.

في كثير من الأحيان وجدت مشاكل بهذه الطريقة.

باستخدام وحدة التحكم

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

في كود JavaScript الأمامي ، ما ستفعله غالبًا هو استخدامalert()وconsole.log(وأصدقائه الرائعين).

ضع في اعتبارك هذا الخط:

const a = calculateA()
const b = calculateB()
const result = a + b

بطريقة ما لم يتم حساب النتيجة بشكل صحيح ، لذا يمكنك البدء بالإضافةalert(a)وalert(b)قبل حساب النتيجة ، وسيفتح المتصفح لوحتين للتنبيه عند تنفيذ الكود.

const a = calculateA()
const b = calculateB()
alert(a)
alert(b)
const result = a + b

هذا يعمل بشكل جيد إذا كنت تقوم بالمرور إليهalert()عبارة عن سلسلة أو رقم. بمجرد أن يكون لديك مصفوفة أو كائن ، تبدأ الأمور في التعقيد للغايةalert()، ويمكنك استخدام ملفواجهة برمجة تطبيقات وحدة التحكم. بدءا منconsole.log():

const a = calculateA()
const b = calculateB()
console.log(a)
console.log(b)
const result = a + b

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

انظرنظرة عامة مفصلة على Chrome DevTools

أدوات تطوير Chrome

نتيجةconsole.log()تتم طباعة المكالمات إلى وحدة تحكم JavaScript. هذه أداة شائعة بشكل أو بآخر في كل متصفح:

Browser console

الأداة قوية جدًا وتتيح لك طباعة كائنات أو مصفوفات معقدة ويمكنك فحص كل خاصية منها.

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

المصحح

يعد مصحح الأخطاء أقوى أداة في أدوات مطور المتصفح ، وهو موجود في ملفمصادرلوجة:

The debugger

يعرض الجزء العلوي من الشاشة متصفح الملفات.

يمكنك تحديد أي ملف ومعاينته على اليمين. هذا مهم جدًا لتعيين نقاط التوقف ، كما سنرى لاحقًا.

الجزء السفلي هو المصحح الفعلي.

نقاط التوقف

عندما يقوم المتصفح بتحميل صفحة ، يتم تنفيذ كود JavaScript حتى يتم استيفاء نقطة توقف.

في هذه المرحلة ، يتم إيقاف التنفيذ ويمكنك فحص كل شيء عن برنامج التشغيل الخاص بك.

يمكنك التحقق من قيم المتغيرات ، واستئناف تنفيذ البرنامج سطرًا واحدًا في كل مرة.

لكن أولاً ، ما هي نقطة التوقف؟ في شكلها البسيط ، تكون نقطة التوقف أbreakpointوضع التعليمات في التعليمات البرمجية الخاصة بك. عندما يلتقي المتصفح ، يتوقف.

هذا خيار جيد أثناء التطوير. خيار آخر هو فتح الملف في لوحة المصادر والنقر فوق الرقم الموجود على السطر الذي تريد إضافة نقطة توقف:

Added breakpoint

النقر مرة أخرى على نقطة الإيقاف ستزيله.

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

أثناء إضافة نقطة التوقف ، يمكنك أن ترى في ملفنقاط التوقفلوحة ذلكform.jsعبر الانترنت7لديه نقطة توقف. يمكنك رؤية جميع نقاط التوقف الخاصة بك هناك وتعطيلها مؤقتًا.

هناك أنواع أخرى من نقاط التوقف أيضًا:

  • XHR / جلب نقاط التوقف: يتم تشغيله عند إرسال أي طلب عبر الشبكة
  • نقاط توقف DOM: يتم تشغيله عندما يتغير عنصر DOM
  • نقاط توقف مستمع الحدث: يتم تشغيله عند وقوع حدث ما ، مثل النقر بالماوس

Breakpoints

مجال

في هذا المثال ، قمت بتعيين نقطة توقف داخل مستمع الحدث ، لذلك اضطررت إلى إرسال نموذج لتشغيله:

Triggered breakpoint

الآن تتم طباعة جميع المتغيرات الموجودة في النطاق ، بقيمها الخاصة. يمكنك تحرير هذه المتغيرات بالنقر المزدوج عليها.

مشاهدة المتغيرات والعبارات

الحق فيمجاللوحة هناكراقبلوجة.

لديها+الزر الذي يمكنك استخدامه لإضافة أي تعبير. على سبيل المثال إضافةnameسيطبع ملفnameقيمة متغيرة ، في المثالFlavio. يمكنك إضافة ملفاتname.toUpperCase()وسوف تطبعFLAVIO:

Watch expressions

استئناف التنفيذ

الآن تم إيقاف جميع البرامج النصية منذ أن أوقفت نقطة التوقف التنفيذ.

توجد مجموعة من الأزرار أعلى لافتة "تم الإيقاف المؤقت عند نقطة التوقف" تتيح لك تغيير هذه الحالة.

الأول باللون الأزرق. النقر فوقه يستأنف تنفيذ البرنامج النصي العادي.

الزر الثاني هوخطوة أكثر، ويستأنف التنفيذ حتى السطر التالي ، ويتوقف مرة أخرى.

يقوم الزر التالي بتنفيذ ملفخطوة الىالعملية: تدخل في الوظيفة التي يتم تنفيذها ، مما يتيح لك الدخول في تفاصيلها.

يخرجهو العكس: يعود إلى الدالة الخارجية التي تستدعي هذا.

هذه هي الطرق الرئيسية للتحكم في التدفق أثناء التصحيح.

تحرير البرامج النصية

من شاشة devtools هذه ، يمكنك تحرير أي نص برمجي ، وكذلك أثناء توقف البرنامج النصي في تنفيذه. ما عليك سوى تحرير الملف والضغط على cmd-S في نظام Mac أو ctrl-S في نظامي التشغيل Windows / Linux.

بالطبع لا تستمر التغييرات على القرص إلا إذا كنت تعمل محليًا وتقوم بإعداد مساحات عمل في devtools ، وهو موضوع أكثر تقدمًا.

افحص مكدس المكالمات

المكدس المكالماتمن الرائع معرفة عدد مستويات الوظائف التي تعمق فيها في كود JavaScript. يتيح لك الانتقال لأعلى في المكدس أيضًا بالنقر فوق اسم كل وظيفة:

Call stack

نصوص الصندوق الأسود

غالبًا ما تعمل مع المكتبات التي لا تريد "الدخول إليها" ، فإنك تثق بها ولا تريد أن ترى التعليمات البرمجية الخاصة بها في مجموعة الاستدعاءات ، على سبيل المثال. مثل في الحالة أعلاه لvalidator.min.js، والذي أستخدمه للتحقق من صحة البريد الإلكتروني.

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

استخدم أدوات تطوير المتصفح لتصحيح أخطاء Node.js

نظرًا لأن Node.js مبني على نفس محرك Chrome ،الإصدار 8، يمكنك ربط 2 واستخدام Chrome DevTools لفحص تنفيذ تطبيقات Node.js.

افتحطرفيةو اهرب

node --inspect

node-inspect

ثم في Chrome ، اكتب عنوان URL هذا:about://inspect.

node-link-browser

انقر على رابط فتح DevTools المخصص للعقدة بجوار هدف العقدة ، وسيكون لديك حق الوصول إلى Node.js في متصفح DevTools:

node-console

تأكد من النقر فوق ذلك ، وليس رابط الفحص أدناه ، حيث تقوم الأداة بإعادة الاتصال تلقائيًا بمثيل Node.js عند إعادة تشغيله - سهل جدًا!


المزيد من دروس js: