Παράδειγμα JavaScript Console.log () - Τρόπος εκτύπωσης στην κονσόλα στο JS

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

Γνωρίζατε όμως ότι υπάρχει κάτι περισσότερο consoleαπό απλώς log; Σε αυτό το άρθρο, θα σας δείξω πώς να εκτυπώσετε στην κονσόλα στο JS, καθώς και όλα τα πράγματα που δεν γνωρίζετε δεν consoleμπορούσαν να κάνουν.

Κονσόλα επεξεργαστή πολλαπλών γραμμών του Firefox

Εάν δεν έχετε χρησιμοποιήσει ποτέ τη λειτουργία επεξεργασίας πολλαπλών γραμμών στον Firefox, θα πρέπει να το δοκιμάσετε τώρα!

Απλώς ανοίξτε την κονσόλα Ctrl+Shift+Kή F12, και επάνω δεξιά θα δείτε ένα κουμπί που λέει "Μετάβαση σε λειτουργία επεξεργασίας πολλαπλών γραμμών". Εναλλακτικά, μπορείτε να πατήσετε Ctrl+B.

Αυτό σας δίνει έναν επεξεργαστή κώδικα πολλαπλών γραμμών μέσα στον Firefox.

console.log

Ας ξεκινήσουμε με ένα πολύ βασικό παράδειγμα καταγραφής.

let x = 1 console.log(x)

Πληκτρολογήστε αυτό στην κονσόλα Firefox και εκτελέστε τον κωδικό. Μπορείτε να κάνετε κλικ στο κουμπί "Εκτέλεση" ή να πατήσετε Ctrl+Enter.

Σε αυτό το παράδειγμα, θα πρέπει να δούμε "1" στην κονσόλα. Πολύ απλό, σωστά;

Πολλαπλές τιμές

Γνωρίζατε ότι μπορείτε να συμπεριλάβετε πολλές τιμές; Προσθέστε μια συμβολοσειρά στην αρχή για να αναγνωρίσετε εύκολα αυτό που καταγράφετε.

let x = 1 console.log("x:", x)

Τι γίνεται όμως αν έχουμε πολλές τιμές που θέλουμε να καταγράψουμε;

let x = 1 let y = 2 let z = 3

Αντί να πληκτρολογούμε console.log()τρεις φορές μπορούμε να τα συμπεριλάβουμε όλα. Και μπορούμε να προσθέσουμε μια συμβολοσειρά πριν από κάθε μία, αν θέλουμε επίσης.

let x = 1 let y = 2 let z = 3 console.log("x:", x, "y:", y, "z:", z)

Αλλά είναι πάρα πολύ δουλειά. Απλά τυλίξτε τα με σγουρά τιράντες! Τώρα λαμβάνετε ένα αντικείμενο με τις ονομαστικές τιμές.

let x = 1 let y = 2 let z = 3 console.log( {x, y, z} )
Έξοδος κονσόλας

Μπορείτε να κάνετε το ίδιο πράγμα με ένα αντικείμενο.

let user = { name: 'Jesse', contact: { email: '[email protected]' } } console.log(user) console.log({user})

Το πρώτο αρχείο καταγραφής θα εκτυπώσει τις ιδιότητες εντός του αντικειμένου χρήστη. Το δεύτερο θα προσδιορίσει το αντικείμενο ως "χρήστη" και θα εκτυπώσει τις ιδιότητες μέσα σε αυτό.

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

Μεταβλητές στο αρχείο καταγραφής

Γνωρίζατε ότι μπορείτε να χρησιμοποιήσετε τμήματα του ημερολογίου σας ως μεταβλητές;

console.log("%s is %d years old.", "John", 29)

Σε αυτό το παράδειγμα, %sαναφέρεται σε μια επιλογή συμβολοσειράς που περιλαμβάνεται μετά την αρχική τιμή. Αυτό θα αναφέρεται στο "John".

Το %dαναφέρεται σε μια επιλογή ψηφίων που περιλαμβάνεται μετά την αρχική τιμή. Αυτό θα αναφέρεται σε 29.

Το αποτέλεσμα αυτής της δήλωσης θα ήταν: "Ο John είναι 29 ετών."

Παραλλαγές αρχείων καταγραφής

Υπάρχουν μερικές παραλλαγές αρχείων καταγραφής. Υπάρχει η πιο ευρέως χρησιμοποιούμενη console.log(). Αλλά υπάρχει επίσης:

console.log('Console Log') console.info('Console Info') console.debug('Console Debug') console.warn('Console Warn') console.error('Console Error') 

Αυτές οι παραλλαγές προσθέτουν στυλ στα αρχεία καταγραφής μας στην κονσόλα. Για παράδειγμα, το warnχρώμα θα είναι κίτρινο και το errorκόκκινο χρώμα.

Σημείωση: Τα στυλ διαφέρουν από πρόγραμμα περιήγησης σε πρόγραμμα περιήγησης.

Προαιρετικά αρχεία καταγραφής

Μπορούμε να εκτυπώσουμε μηνύματα στην κονσόλα υπό όρους με console.assert().

let isItWorking = false console.assert(isItWorking, "this is the reason why")

Εάν το πρώτο όρισμα είναι ψευδές, τότε το μήνυμα θα καταγραφεί.

Αν ήταν να αλλάξει isItWorkingσε true, τότε το μήνυμα δεν θα καταγράφονται.

Αρίθμηση

Γνωρίζατε ότι μπορείτε να μετρήσετε με την κονσόλα;

for(i=0; i<10; i++){ console.count() }

Κάθε επανάληψη αυτού του βρόχου θα εκτυπώσει ένα πλήθος στην κονσόλα. Θα δείτε "προεπιλογή: 1, προεπιλογή: 2" και ούτω καθεξής μέχρι να φτάσει το 10.

Εάν εκτελέσετε ξανά τον ίδιο βρόχο, θα δείτε ότι ο υπολογισμός αυξάνεται από εκεί που σταμάτησε. 11 - 20.

Για επαναφορά του μετρητή μπορούμε να χρησιμοποιήσουμε console.countReset().

Και, αν θέλετε να ονομάσετε τον μετρητή σε κάτι διαφορετικό από το "προεπιλογή", μπορείτε!

for(i=0; i<10; i++){ console.count('Counter 1') } console.countReset('Counter 1')

Τώρα που έχουμε προσθέσει μια ετικέτα, θα δείτε "Μετρητής 1, Μετρητής 2" και ούτω καθεξής.

Και για να επαναφέρετε αυτόν τον μετρητή, πρέπει να δώσουμε το όνομα countReset. Με αυτόν τον τρόπο μπορείτε να έχετε πολλούς μετρητές σε λειτουργία ταυτόχρονα και να επαναφέρετε μόνο συγκεκριμένους.

Παρακολούθηση χρόνου

Εκτός από την καταμέτρηση, μπορείτε επίσης να κάνετε κάτι σαν ένα χρονόμετρο.

Για να ξεκινήσουμε ένα χρονόμετρο μπορούμε να χρησιμοποιήσουμε console.time(). Αυτό δεν θα κάνει τίποτα από μόνο του. Έτσι, σε αυτό το παράδειγμα, θα χρησιμοποιήσουμε setTimeout()για να μιμηθούμε τον κώδικα που εκτελείται. Στη συνέχεια, εντός του χρονικού ορίου, θα διακόψουμε τη χρήση του χρονοδιακόπτη console.timeEnd().

console.time() setTimeout(() => { console.timeEnd() }, 5000)

Όπως θα περίμενε κανείς, μετά από 5 δευτερόλεπτα, θα έχουμε ένα ημερολόγιο τελικού χρονοδιακόπτη 5 δευτερολέπτων.

Μπορούμε επίσης να καταγράψουμε την τρέχουσα ώρα του χρονοδιακόπτη ενώ λειτουργεί, χωρίς να το σταματήσουμε. Το κάνουμε αυτό χρησιμοποιώντας console.timeLog().

console.time() setTimeout(() => { console.timeEnd() }, 5000) setTimeout(() => { console.timeLog() }, 2000)

Σε αυτό το παράδειγμα, θα πάρουμε τα 2 δευτερόλεπτα timeLogπρώτα και μετά τα 5 δευτερόλεπτα timeEnd.

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

Ομάδες

Ένα άλλο πράγμα που μπορείτε να κάνετε logείναι να τα ομαδοποιήσετε. ;

Ξεκινάμε μια ομάδα χρησιμοποιώντας console.group(). Και τελειώνουμε μια ομάδα με console.groupEnd().

console.log('I am not in a group') console.group() console.log('I am in a group') console.log('I am also in a group') console.groupEnd() console.log('I am not in a group')

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

Από προεπιλογή, η ομάδα δεν έχει καταρρεύσει. Μπορείτε να το ρυθμίσετε σε σύμπτυξη χρησιμοποιώντας console.groupCollapsed()στη θέση του console.group().

Οι ετικέτες μπορούν επίσης να μεταφερθούν στο group()να ταυτοποιήσουν καλύτερα

Ίχνος στοίβας

You can also do a stack trace with console. Just add it into a function.

function one() { two() } function two() { three() } function three() { console.trace() } one() 

In this example, we have very simple functions that just call each other. Then, in the last function, we call console.trace().

Έξοδος κονσόλας

Tables

Here's one of the most mind-blowing uses for console: console.table().

So let's set up some data to log:

let devices = [ { name: 'iPhone', brand: 'Apple' }, { name: 'Galaxy', brand: 'Samsung' } ]

Now we'll log this data using console.table(devices).

Έξοδος κονσόλας

But wait – it gets better!

If we only want the brands, just console.table(devices, ['brand'])!

Έξοδος κονσόλας

How about a more complex example? In this example, we'll use jsonplaceholder.

async function getUsers() { let response = await fetch('//jsonplaceholder.typicode.com/users') let data = await response.json() console.table(data, ['name', 'email']) } getUsers()

Here we are just printing the "name" and "email". If you console.log all of the data, you will see that there are many more properties for each user.

Style ?

Did you know that you can use CSS properties to style your logs?

Για να το κάνουμε αυτό, χρησιμοποιούμε %cγια να καθορίσουμε ότι έχουμε στυλ για προσθήκη. Τα στυλ περνούν στο δεύτερο όρισμα του log.

console.log("%c This is yellow text on a blue background.", "color:yellow; background-color:blue")

Μπορείτε να το χρησιμοποιήσετε για να κάνετε τα αρχεία καταγραφής σας να ξεχωρίζουν.

Σαφή

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

Απλώς προσθέστε console.clear()στην κορυφή του κωδικού σας και θα έχετε μια νέα κονσόλα κάθε φορά που ανανεώνετε. ;

Απλά μην το προσθέσετε στο κάτω μέρος του κωδικού σας, lol.

Ευχαριστώ για την ανάγνωση!

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

Jesse Hall (codeSTACKr)

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

  • Εγγραφείτε στο YouTube μου
  • Πες γεια! Instagram | Κελάδημα
  • Εγγραφείτε στο Newsletter μου