Ο οδηγός για αρχάριους για τη σκουριά σφαλμάτων: Πώς να χρησιμοποιήσετε το πρόγραμμα εντοπισμού σφαλμάτων και άλλα εργαλεία για να βρείτε και να διορθώσετε σφάλματα

Ως προγραμματιστές ιστού, αισθάνεται συχνά ότι ξοδεύουμε περισσότερο χρόνο για να διορθώσουμε σφάλματα και προσπαθώντας να λύσουμε προβλήματα από ό, τι γράφουμε κώδικα. Σε αυτόν τον οδηγό θα δούμε μερικές κοινές τεχνικές εντοπισμού σφαλμάτων, οπότε ας κολλήσουμε.

"Αποτυχία προετοιμασίας, προετοιμασία για αποτυχία"

Τι καλύτερος τρόπος για να ξεκινήσετε ένα άρθρο παρά με ένα παλιό κλισέ! Εμφανίζονται σφάλματα και προβλήματα. Απλώς δεν υπάρχει τρόπος να ξεφύγεις από αυτό (συγγνώμη). Με κάποιο απλό σχεδιασμό, υπάρχουν τρόποι με τους οποίους μπορούμε να ελαχιστοποιήσουμε την πολυπλοκότητα και τον αριθμό των προβλημάτων που αντιμετωπίζουμε.

Χωρίστε την εργασία σε μικρότερες εργασίες

Τώρα, το καταλαβαίνω, όλοι μας αρέσει να ενθουσιάζουμε και να βουτάμε κατευθείαν στα προγράμματα κωδικοποίησης. Το θέμα είναι ότι, χωρίς κάποιο σχέδιο, δημιουργούμε προβλήματα για τον εαυτό μας πριν καν ξεκινήσουμε!

Αν σας είπα, "πρέπει να δημιουργήσετε μια εφαρμογή λίστας αγορών" και ξεκινήσατε να κωδικοποιείτε αμέσως, τι θα συνέβαινε; Θα καταλήγατε να κοιτάζετε έναν δρομέα που αναβοσβήνει αναρωτιέστε πώς ή τι να κάνετε πρώτα, κατάρα το όνομά μου κάτω από την ανάσα σας για να σας ζητήσει να κάνετε μια τέτοια εργασία.

Είναι πάντα ευκολότερο να παίρνεις ένα μεγάλο πρόβλημα και να το χωρίζεις σε πολλά μικρότερα προβλήματα. Για παράδειγμα, μπορούμε να χωρίσουμε το έργο λίστας αγορών σε μικρότερες εργασίες:

  • Δημιουργήστε μια φόρμα για να προσθέσετε ένα στοιχείο στη λίστα
  • Επιτρέψτε σε έναν χρήστη να καταργήσει ένα στοιχείο από τη λίστα
  • Εμφάνιση συνολικού αριθμού στοιχείων στη λίστα

Μπορείτε ακόμη και να χωρίσετε αυτές τις εργασίες σε πιο λεπτομερείς εργασίες. Για παράδειγμα, για την πρώτη εργασία στη λίστα μας, η πρώτη μας "μικρή μίνι εργασία" (θα έπρεπε να ορίσω εμπορικό σήμα αυτόν τον όρο;) θα μπορούσε να είναι:

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();

Το σφάλμα που εμφανίζεται στο πρόγραμμα περιήγησης θα σας δείξει το πρόβλημα πιο γρήγορα, αλλά δεν θα διαμορφωθούν όλα τα έργα frontend για να το κάνουν αυτό και οι προγραμματιστές backend δεν έχουν αυτήν την πολυτέλεια. Γι 'αυτό προτείνω να μάθετε να διαβάζετε το ίχνος στοίβας.

Για να νικήσετε το σφάλμα, πρέπει να σκεφτείτε σαν το σφάλμα

Το ίχνος στοίβας σας δίνει μια ιδέα για το τι είναι το σφάλμα. Λοιπόν, μερικές φορές το κάνει και άλλοτε όχι. Τι θα συμβεί αν δείτε ένα μήνυμα σφάλματος που μοιάζει περισσότερο με σπηλιές γλύφους από τα αγγλικά; Ή τι γίνεται αν δεν υπάρχει σφάλμα, αλλά ο κώδικάς σας απλώς δεν λειτουργεί όπως νομίζατε;

Ήρθε η ώρα να βγάλεις το πρόγραμμα εντοπισμού σφαλμάτων. Ας δούμε ένα άλλο παράδειγμα. Αλλά πρώτα κάποιο πλαίσιο!

Ο κύριος διευθύνων σύμβουλος του Bob (ποιος είναι διευθύνων σύμβουλος, ποιος θα είχε σκεφτεί ;!) σας πλησιάζει και λέει,

"Έι, έχω μια καταπληκτική ιδέα για ένα προϊόν.

  • Θέλω μια εφαρμογή ιστού που επιτρέπει στον χρήστη να εισάγει έναν αριθμό.
  • Εάν ο αριθμός είναι μικρότερος από 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 πράγματα που πιστεύω ότι αξίζουν να μοιραστώ - τα τελευταία μου άρθρα, σεμινάρια, συμβουλές και ενδιαφέροντες συνδέσμους για επερχόμενους προγραμματιστές όπως εσείς. Δίνω επίσης κάποια δωρεάν πράγματα από καιρό σε καιρό :)