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

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

"فشل في الاستعداد ، استعد للفشل"

ما هي أفضل طريقة لبدء مقال أكثر من المبتذلة القديمة! ستظهر الأخطاء والمشكلات. ببساطة لا توجد طريقة للابتعاد عن هذا (آسف). مع بعض التخطيط البسيط ، هناك طرق يمكننا من خلالها تقليل التعقيد وعدد المشكلات التي نواجهها.

قسّم المهمة إلى مهام أصغر

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

إذا قلت لك ، "عليك إنشاء تطبيق لقائمة التسوق" ، وبدأت في الترميز على الفور ، ماذا سيحدث؟ سينتهي بك الأمر بالتحديق في مؤشر وامض تتساءل كيف أو ماذا تفعل أولاً ، تلعن اسمي تحت أنفاسك لأنك طلبت منك القيام بهذه المهمة.

من الأسهل دائمًا تناول مشكلة كبيرة وتقسيمها إلى العديد من المشكلات الأصغر. على سبيل المثال ، يمكننا تقسيم مشروع قائمة التسوق إلى مهام أصغر:

  • قم بإنشاء نموذج لإضافة عنصر إلى القائمة
  • السماح للمستخدم بإزالة عنصر من القائمة
  • عرض العدد الإجمالي للعناصر في القائمة

يمكنك حتى تقسيم هذه المهام إلى مهام أكثر تفصيلاً. على سبيل المثال ، بالنسبة للمهمة الأولى في قائمتنا ، يمكن أن تكون "المهمة الصغيرة الصغيرة" (هل يجب أن أضع علامة تجارية على هذا المصطلح؟):

1) قم بإنشاء حقل إدخال لالتقاط اسم العنصر

2) قم بإنشاء زر يستدعي وظائف addToList()عند النقر فوقه

3) اكتب المنطق داخل addToList()الوظيفة التي تضيف العنصر إلى القائمة

وهلم جرا. انت وجدت الفكرة. أفضل كسر مثل هذا العمل لأنه يجعلني أفكر حقًا في المشكلات التي سأواجهها مبكرًا والحلول (لقد كتبت مقالة متعمقة حول هذا هنا) قبل أن أكتب أي رمز. كما أنه يساعدني على فهم ما أحاول القيام به ، ويضعني في "المنطقة". من الأسهل بكثير حل المشكلات التي تنشأ عندما تفهم ما تحاول تحقيقه.

كن مستعدا لتطهير التعليمات البرمجية الخاصة بك

لعمل عجة ، علينا كسر بعض البيض. هذا يعني أن تكون مستعدًا لإعادة كتابة الكود الخاص بنا بالكامل حتى يعمل.

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

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

الآن بعد أن أصبحنا لطيفين ومستعدين ، دعنا ننظر إلى ما يحدث عندما تسوء الأمور.

رسائل الخطأ جيدة

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

إذا ألقينا نظرة على هذا المثال:

let animals; function addAnimal(){ animals.push('elephant'); } addAnimal();

الآن دعنا نلقي نظرة على الخطأ:

TypeError: Cannot read property 'push' of undefined at addAnimal (//vanilla.csb.app/src/index.js:8:11) at evaluate (//vanilla.csb.app/src/index.js:11:1) at $n (//codesandbox.io/static/js/sandbox.acff3316.js:1:148704)

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

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

لذلك ، انتهينا من هجوم الذعر عند رؤية الخطأ واخترنا بعض المعلومات من رسالة الخطأ. إذا قمنا بتقسيمها يمكننا رؤية هذا الخط:

Cannot read property 'push' of undefined

هذا يعني عادة أن هناك متغيرًا غير محدد أو مهيأ في مكان ما. لكن أين؟!؟

إذا واصلنا قراءة تتبع المكدس ، فإننا نرى الخطأ يحدث داخل addAnimal()الوظيفة. يمكننا أن نرى أننا نحاول دفع حيوان جديد إلى مجموعة - آه! لقد نسيت تهيئة animalsالمصفوفة. دوه! يبدو رمزنا الثابت كما يلي:

let animals = []; function addAnimal() { animals.push("elephant"); } addAnimal();

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

لهزيمة الحشرة ، يجب أن تفكر مثل الحشرة

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

حان الوقت لإخراج المصحح. دعنا نتعرف على مثال آخر. لكن أولاً بعض السياق!

يقترب منك السيد بوب الرئيس التنفيذي (من هو الرئيس التنفيذي ، من كان يظن؟!) ويقول ،

"مرحبًا ، لدي فكرة رائعة لمنتج.

  • أريد تطبيق ويب يسمح للمستخدم بإدخال رقم.
  • إذا كان الرقم أقل من 5 ، يجب أن تقرأ الرسالة "أقل من".
  • إذا كان الرقم يساوي أو أكثر من 5 ، يجب أن تقرأ الرسالة "OVER".

هذه فكرة بمليون دولار وأريدك أن تبنيها لي ".

"حسنا!" أنت تقول ، وتذهب إلى العمل.

* ترميز المونتاج مع تشغيل الموسيقى الدرامية مع مرور الوقت سريعًا للأمام *

لقد أكملت رمز تطبيق الويب الخاص بك. حوزة!

    My super awesome number app      Submit 0 
(function () { const numberInputSubmitButton = document.getElementById("number-input-submit-button") numberInputSubmitButton.addEventListener("click", function () { const numberInputValue = document.getElementById("number-input").value; let text; if(numberInputValue > 5) { text = "OVER"; } else { text = "UNDER"; } document.getElementById("number-display").innerHTML = text }); })(); 

(ملاحظة: ربما تكون قد اكتشفت الخطأ بالفعل. إذا فعلت ذلك ، فلنفترض أنك لم تلاحظه. إذا لم تكن قد لاحظت الخطأ ، فلا بأس بذلك)

حان الوقت لبدء الاختبار. لنستعرض بعض حالات الاستخدام لمنطق العمل لدينا.

1) يدخل المستخدم 3:

2) يدخل المستخدم 7

حتى الان جيدة جدا! لكن ماذا يحدث إذا دخلنا 5؟

OH NO! A bug! The text displayed is incorrect, it should display "OVER" but instead displays "UNDER". Hmm, no error messages,and I can't seem to see in the code what is wrong. Let's run the debugger and step through the code.

Using the debugger

A good place to start is to put a breakpoint as close to the buggy code as possible. You can determine this by reading the code, error messages, or if you have that "ah-ha!I know which method is causing this" moment. From here, it's a case of stepping through the code, inspecting the variables, and checking if the correct code branches are run.

In our example, I have put a breakpoint at the start of my if statement - as this is where the failing logic is.

Once I start debugging, chrome opens and I can replicate the issue by entering "5" and clicking submit. This hits the breakpoint, and immediately there are a few things to note:

  • The debugger stops at the breakpoint, so this means I'm on the right track
  • This also means that the function is being called correctly, and event handlers are working as expected
  • I can also see that the user input is being captured correctly (from the "variables" panel on the left-hand side, I can see that "5" was entered)

So far so good, no immediate issues to worry about. Well, code related ones anyway. Next, I'll press F10 to step through the code. This runs each statement individually, allowing us to inspect elements, variables, and other things at our own pace. Isn't technology just fabulous?

Remember since I expect the message "OVER" to appear when the user enters "5", I'm expecting the debugger to take me into the first branch of the if statement...

BUT NO! I'm brought into the second branch. Why? I need to amend the conditional to read "more than or equals to" as opposed to "more than".

if(numberInputValue >= 5) { text = "OVER"; } else { text = "UNDER"; }

Success! Our bug is fixed. Hopefully this gives you an idea on how to walk through the code, making use of VSCodes awesome debugging tools.

More Debugging tips

  • If your breakpoints aren't being hit, this could be part of the issue. Make sure the correct functions or event handlers are being called in the way you expect
  • You can step over functions you want to skip. If you want to debug any functions you come across, use the step into command
  • Watch out for variables, parameters, and arguments as you are stepping through your code. Are the values what you expect?
  • Write code in a way that is easier to read/debug. It might look cool to have your code on one line, but it makes debugging harder

Google is your friend

Ok so we've looked at the stack-trace, tried debugging, and we're still stuck with this bug. The only thing left to do now is make a sacrifice to the coding gods and hope things fix themselves!

Or I guess we could use Google.

Google is a treasure trove of software development problems and solutions, all at our fingertips. It can be sneakily difficult to access this information though, as you have to know how to Google the right things to get the right information! So how do we effectively use Google?

Let's look back to our first example - you've read the stack trace, looked at the code, but the message Cannot read property 'push' of undefined is still driving you mad. Bewildered, you take to Google in hopes of finding an answer. Here are some things to try:

Copy and paste the error message. Sometimes this works, depending on how "generic" the error message is. For example, if you get a Null pointer exception (who doesn't love those?), Googling "Null pointer exception" might not return very helpful results.

Search for what you are trying to do. For example, "How to create an array and add an item to the end". You might find some generous developer has posted a solution using best practices on StackOverflow, for example. You might also find this solution is completely different from yours - remember what I said about being comfortable purging your code?

A side note on using someone else's code - try and avoid blindly copying and pasting, make sure you understand what the code does first!

Ask for help the right way

Hopefully, after a mix of debugging, stack trace investigating, and Googling you have seen the light at the end of the tunnel and solved your problem. Unfortunately, depending on what you are trying to do, you still might be a bit stumped. This is a good time to seek advice from other people.

Now, before you run into the street screaming "my code is broken please help me!", it's important to know the best way to ask for help. Asking for help in the right way makes it easier for people to understand the problem and help you solve it. Let's look at some examples:

Bad - "My code is broken and I don't know what's wrong."

Good - "I'm trying to add an item to the end of an array in JavaScript, and I'm getting this error message: Cannot read property 'push' of undefined. Here's my code so far."

See how the "Good" example is much more informative? More information makes it easier for other kindhearted devs to help you out. This is a good habit to get into as it not only benefits you when you are learning to code but also in your first job when you need to ask for help.

So where can you ask for help?

  • StackOverflow
  • Twitter
  • Slack groups
  • Colleagues or developer friends

Quick Tip: You can use a tool like CodeSandbox.io or CodePen.io to recreate your problem and share it with people.

Practice, practice, practice

تمامًا مثل روما لم يتم بناؤها في يوم واحد (حسنًا ، كان من الممكن أن تكون لكل ما أعرفه) لن تصبح ملك حشرة بين عشية وضحاها. مع استمرار حياتك المهنية وتنمو تجربتك ، ستكون مسلحًا بثروة من المعرفة التي تساعدك على حل الأخطاء والمشكلات بشكل أسرع. أجد نفسي بانتظام أقول "آه ، لقد قمت بحل ذلك من قبل" أو "نعم ، لدي رابط StackOverflow يساعدني هنا" ويصبح الأمر برمته أسهل كثيرًا. لذا استمر في التمرين ، وستنمو هذه المهارة بشكل طبيعي.

شكرا للقراءة! إذا استمتعت بهذه المقالة ، فلماذا لا تشترك في رسالتي الإخبارية؟

أرسل كل أسبوع قائمة من 10 أشياء أعتقد أنها تستحق المشاركة - أحدث مقالاتي ، والبرامج التعليمية ، والنصائح والروابط الشيقة للمطورين القادمين مثلك. كما أنني أعطي بعض الأشياء المجانية من وقت لآخر :)