Τρόπος εντοπισμού σφαλμάτων σε εφαρμογές Node.js στον κώδικα του Visual Studio

Ο εντοπισμός σφαλμάτων της εφαρμογής Node.js στον ίδιο τον κώδικα του Visual Studio είναι δυνατός και απλός. Το πρόγραμμα επεξεργασίας κώδικα VS συνοδεύεται από ένα ενσωματωμένο πρόγραμμα εντοπισμού σφαλμάτων με δυνατότητα εντοπισμού σφαλμάτων σε οποιαδήποτε εφαρμογή που στοχεύει το χρόνο εκτέλεσης του Node.js. Αυτό σημαίνει ότι μπορείτε να διορθώσετε τη JavaScript ή οποιαδήποτε άλλη γλώσσα που μεταγλωττίζεται σε αυτήν (π.χ. TypeScript).

Αυτό το άρθρο θα σας καθοδηγήσει στα βήματα για τον εντοπισμό σφαλμάτων της εφαρμογής Node.js στο VS Code. Θα μάθετε πώς να ξεκινήσετε μια περίοδο λειτουργίας εντοπισμού σφαλμάτων, να εισαγάγετε σημεία διακοπής, να επισυνάψετε μια εξωτερική διαδικασία και να διορθώσετε τον κώδικα TypeScript χρησιμοποιώντας χάρτες προέλευσης.

Τι χρειάζεστε για να ξεκινήσετε

Πριν ξεκινήσετε, εγκαταστήστε το Node.js και το VS Code στον τοπικό σας υπολογιστή. Η πιο πρόσφατη έκδοση του Node.js είναι διαθέσιμη στο Node.js επίσημη ιστοσελίδα. Ομοίως, για τον κώδικα του Visual Studio, πραγματοποιήστε λήψη της πιο πρόσφατης έκδοσης από το VS Code δικτυακός τόπος. Για οδηγίες σχετικά με πώς να ρυθμίσετε τον κώδικα VS στα Windows, διαβάστε τον οδηγό εγκατάστασης.

Χρειάζεστε επίσης ένα έργο Node.js. Μπορείτε να δημιουργήσετε μια απλή εφαρμογή Node.js από την αρχή ή χρησιμοποιήστε μια υπάρχουσα εφαρμογή.

Η διαδικασία εντοπισμού σφαλμάτων στον κώδικα VS

Η έναρξη μιας περιόδου λειτουργίας εντοπισμού σφαλμάτων στο πρόγραμμα επεξεργασίας κώδικα VS είναι αρκετά απλή. Ανοίξτε το αρχείο με VS Code και κάντε κλικ στο Εκτέλεση και εντοπισμός σφαλμάτων εικονίδιο στην πλαϊνή γραμμή (ή πατήστε Ctrl + Shift + D στο πληκτρολόγιό σας). Στη συνέχεια, κάντε κλικ στο Εκτέλεση και εντοπισμός σφαλμάτων κουμπί για να ξεκινήσει η διαδικασία.

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

Αφού επιλέξετε το περιβάλλον, το VS Code ενεργοποιεί το πρόγραμμα εντοπισμού σφαλμάτων και το επισυνάπτει στη διαδικασία. Μπορείτε να δείτε την έξοδο σας στο ΕΝΤΟΠΙΣΜΟΣ ΣΦΑΛΜΑΤΩΝ ΚΟΝΣΟΛΑ. Χρησιμοποιώντας τη γραμμή εργαλείων εντοπισμού σφαλμάτων στο επάνω μέρος, μπορείτε να επαναλάβετε τον κώδικα, να διακόψετε την εκτέλεση ή να τερματίσετε τη συνεδρία.

Έχετε επίσης την επιλογή να δημιουργήσετε ένα αρχείο ρυθμίσεων. ο εκκίνηση.json αρχείο σάς επιτρέπει να ρυθμίσετε και να ρυθμίσετε τις λεπτομέρειες εντοπισμού σφαλμάτων. Εάν το σενάριό σας απαιτεί όρισμα, δώστε αυτά τα ορίσματα στο εκκίνηση.json αρχείο. Μπορούν να οριστούν πολλές επιλογές σε κάθε διαμόρφωση:

{ 
"εκδοχή": "0.2.0", 
"διαμορφώσεις": [ 
 { "τύπος": "κόμβος", 
"αίτηση": "εκτόξευση", 
"όνομα": "Εκκίνηση προγράμματος", 
"skipFiles": [ "/**" ], 
"πρόγραμμα": "${workspaceFolder}\\index.js"
 } 
 ]
}

Θα παρατηρήσετε επίσης πέντε πίνακες στην αριστερή πλευρά του προγράμματος επεξεργασίας. Αυτά τα πάνελ είναι ΜΕΤΑΒΛΗΤΕΣ, ΠΑΡΑΚΟΛΟΥΘΩ, ΣΤΟΙΒΑ ΚΛΗΣΕΩΝ, ΦΟΡΤΩΜΕΝΑ ΣΕΝΑΡΙΑ, και ΟΡΙΑ ΑΝΤΟΧΗΣ:

Όταν ολοκληρώσετε τη ρύθμιση της διαμόρφωσης, επιλέξτε και εκτελέστε το πρόγραμμα από το μενού διαμόρφωσης.

Επισυνάψτε μια εξωτερική διαδικασία

Μια άλλη μέθοδος για τη ρύθμιση μιας περιόδου λειτουργίας εντοπισμού σφαλμάτων Node.js είναι η επισύναψη μιας εξωτερικής διεργασίας. Ξεκινήστε το πρόγραμμα με την ακόλουθη εντολή:

κόμβος --επιθεώρηση index.js

Εισαγάγετε το -brk σημαία μετά --ελέγχω εάν θέλετε να το επισυνάψετε πριν ξεκινήσει η εκτέλεση του προγράμματος.

Στη συνέχεια, ανοίξτε το εργαλείο επιλογής διεργασιών στο VS Code. Αυτό παραθέτει όλες τις διαδικασίες που είναι διαθέσιμες στο περιβάλλον Node.js. Για να ανοίξετε το εργαλείο επιλογής, πατήστε Ctrl + Shift + P και βρείτε το Εντοπισμός σφαλμάτων: Επισύναψη στην εντολή Node.js.

Κάντε κλικ στην εντολή και επιλέξτε τη σωστή επιλογή για να ξεκινήσει η διαδικασία εντοπισμού σφαλμάτων.

Δημιουργία σημείου διακοπής

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

Η δημιουργία ενός σημείου διακοπής είναι αρκετά απλή. Καθώς μετακινείτε το ποντίκι σας στην αριστερή πλευρά των αριθμών γραμμής, εμφανίζεται ένας κόκκινος κύκλος σε κάθε γραμμή. Προσδιορίστε τον αριθμό γραμμής στον κώδικά σας όπου θέλετε να εισαγάγετε το σημείο διακοπής. Στη συνέχεια, κάντε κλικ σε αυτή τη γραμμή για να προσθέσετε το σημείο διακοπής:

Στο ΟΡΙΑ ΑΝΤΟΧΗΣ στο παράθυρο, θα βρείτε όλα τα σημεία διακοπής ενεργοποιημένα στο έργο σας. Εδώ θα διαχειρίζεστε, θα επεξεργάζεστε και θα απενεργοποιείτε τα σημεία διακοπής. Μπορείτε επίσης να διακόψετε τον κωδικό όταν εμφανίζεται μια εξαίρεση ή σε περιπτώσεις μη καταγεγραμμένων εξαιρέσεων. Αυτό σας επιτρέπει να επιθεωρήσετε το πρόβλημα πριν από την έξοδο της διαδικασίας.

Ας δούμε τα σημεία διακοπής στη δράση. Κάντε κλικ στο Εκτόξευση εικονίδιο για να ξεκινήσει η περίοδος διόρθωσης σφαλμάτων. Το πρόγραμμα θα σταματήσει στο πρώτο σημείο διακοπής και θα δώσει την τιμή για επιθεώρηση:

Μπορείτε να κάνετε κλικ στο Να συνεχίσει εικονίδιο (ή πατήστε F5) για να μετακινήσετε το πρόγραμμα στο επόμενο σημείο διακοπής. Αυτό θα συνεχιστεί μέχρι να φτάσετε στο τέλος του προγράμματος.

Εντοπισμός σφαλμάτων TypeScript με χάρτες προέλευσης

Καθώς το Typescript συνεχίζει να γίνεται πιο δημοφιλές, ο αριθμός των έργων Node.js που είναι γραμμένοι στο TypeScript είναι βέβαιο ότι θα αυξηθεί. Ευτυχώς, μπορείτε επίσης να διορθώσετε τα έργα που βασίζονται σε TypeScript με VS Code.

Πρώτα, δημιουργήστε ένα tsconfig.json αρχείο στον ριζικό κατάλογο του έργου σας (αν δεν έχει ήδη δημιουργηθεί) και ενεργοποιήστε τους χάρτες προέλευσης:

{ "Επιλογές μεταγλωττιστή": { "sourceMaps": αληθής }}

Στη συνέχεια, επισυνάψτε τη διαδικασία που εκτελείται και ορίστε τα σημεία διακοπής στο αρχείο TypeScript. Το Visual Studio Code θα βρει τους χάρτες προέλευσης και θα τους χρησιμοποιήσει.

Μπορείτε να πείτε ρητά στον κώδικα VS πού να βρείτε τους χάρτες προέλευσης. Για να το κάνετε αυτό, προσθέστε ένα outFiles χαρακτηριστικό στο αρχείο διαμόρφωσης εκκίνησης και τοποθετήστε το στην ακριβή τοποθεσία των χαρτών προέλευσης:

{ 
"εκδοχή": "0.2.0", 
"διαμορφώσεις": [ { 
"τύπος": "κόμβος", 
"αίτηση": "εκτόξευση", 
"όνομα": "Εκκίνηση προγράμματος", 
"skipFiles": [ "/**" ], 
"πρόγραμμα": "${workspaceFolder}\\index.js", 
"outFiles": "${workspaceFolder}\\index.js", 
 } 
 ]
}

Εάν χρησιμοποιείτε ts-κόμβος για να εκτελέσετε το έργο σας χωρίς βήμα κατασκευής, χρησιμοποιήστε αυτό αντί για την παραπάνω διαμόρφωση:

{ 
"εκδοχή": "0.2.0", 
"διαμορφώσεις": [ { 
"τύπος": "pwa-node", 
"αίτηση": "εκτόξευση", 
"όνομα": "Εκκίνηση διακομιστή", 
"skipFiles": [ "/**" ], 
"runtimeArgs": [ "-r", "ts-node/register" ], 
"άργους": [ "${workspaceFolder}/src/server.ts" ] 
 }]
}

Δεδομένου ότι δεν υπάρχει χαρακτηριστικό προγράμματος, χρόνος εκτέλεσης args μητρώα ts-κόμβος ως χειριστής για αρχεία TypeScript. Το πρώτο επιχείρημα για args είναι το αρχείο καταχώρισης για το πρόγραμμα. Τώρα μπορείτε να ξεκινήσετε τη συνεδρία εντοπισμού σφαλμάτων. Εάν αναπτύσσετε με vanilla JavaScript ή ένα πλαίσιο front-end, μπορείτε επίσης αποσφαλμάτωση του κώδικα JavaScript στο πρόγραμμα περιήγησης.

Άλλες δυνατότητες του Visual Studio Code

Το Visual Studio Code είναι ένα ισχυρό πρόγραμμα επεξεργασίας πηγαίου κώδικα γεμάτο με εκπληκτικές δυνατότητες. Καλύψαμε το ενσωματωμένο εργαλείο εντοπισμού σφαλμάτων του VS Code. Επίσης, δείξαμε πώς μπορείτε να το χρησιμοποιήσετε για τον εντοπισμό σφαλμάτων της εφαρμογής Node.js.

Υπάρχουν όμως πολλά άλλα χρήσιμα χαρακτηριστικά στο VS Code. Ενώ μπορεί να είστε εξοικειωμένοι με μερικά από αυτά, μερικά μπορεί να είναι εντελώς νέα για εσάς. Σε αυτήν την περίπτωση, μπορεί να σας ενδιαφέρει να μάθετε για αυτές τις δυνατότητες και τον τρόπο χρήσης τους.