Πώς να εμφανίσετε δεδομένα ως πίνακα στο Browser Console

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

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

Access Console στο πρόγραμμα περιήγησης

Στο Chrome, μπορείτε να επιλέξετε Προβολή > Προγραμματιστής > Κονσόλα JavaScript για να εμφανίσετε την Κονσόλα. Επιπλέον, μπορείτε επίσης να χρησιμοποιήσετε τη συντόμευση πληκτρολογίου: Cmd+ Option+ Jστο OS X και Ctrl+ Shift+ Jστα Windows.

Ακολουθεί μια Κονσόλα Chrome χωρίς σφάλματα.

Από εδώ, μπορείτε να αρχίσετε να χρησιμοποιείτε τις εντολές που παρέχονται στο API της Κονσόλας.

Αλληλεπίδραση με την Κονσόλα

Μπορείτε να αλληλεπιδράσετε με την Κονσόλα του προγράμματος περιήγησής σας μέσω της ίδιας της Κονσόλας και προσθέτοντας JavaScript. Για παράδειγμα, εδώ ζητάμε από την Κονσόλα να βγάλει το αποτέλεσμα "Καλημέρα!" πληκτρολογώντας την εντολή console.log() απευθείας στην Κονσόλα:

Όπως αναφέρθηκε, μπορείτε επίσης να εφαρμόσετε το console.log(). Η Console.log() μπορεί να χρησιμοποιηθεί για τον έλεγχο μιας πρότασης υπό όρους JavaScript. Μπορείτε να δείτε πιο καθαρά πότε το αποτέλεσμα επιστρέφει true ή false (true ή false) με τη βοήθεια του console.log().

Εδώ είναι ένα παράδειγμα:

var a = 1;

if(a == 1) {

console.log('true');

} else {

console.log('false');

}

Ο παραπάνω κώδικας θα επιστρέψει true, επειδή μια μεταβλητή περιέχει τον αριθμό 1 . Στην Κονσόλα, θα δείτε το πρόγραμμα περιήγησης να εξάγει το κείμενο με το περιεχόμενο "true".

Εξαγωγή δεδομένων σε μορφή πίνακα

Μερικές φορές, θα πρέπει να επεξεργαστείτε μια σειρά δεδομένων ή μια λίστα Αντικειμένων, όπως φαίνεται παρακάτω:

var data = [

{ name: "Andi", age: "21", city: "Tuban" },

{ name: "Ani", age: "25", city: "Trenggalek" },

{ name: "Adi", age: "30", city: "Kediri" }

];

console.table(data);

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

Όταν πρέπει να αντιμετωπίσετε έναν τέτοιο πίνακα, η χρήση της console.table() είναι ένας καλύτερος τρόπος για την έξοδο δεδομένων. Αυτή η μέθοδος εμφανίζει τα δεδομένα σε μορφή πίνακα. Λαμβάνοντας τα ίδια δεδομένα όπως παραπάνω, το αποτέλεσμα θα εμφανιστεί ως εξής:

Η κονσόλα προγράμματος περιήγησης βοηθά τους προγραμματιστές ιστού να χειρίζονται σφάλματα σε ιστότοπους. Οι χρήστες μπορούν επίσης να το χρησιμοποιήσουν για να εξετάσουν την έξοδο δεδομένων, όπως με τη μέθοδο console.log(). Όταν έχετε έναν πίνακα δεδομένων, η εντολή console.table() είναι πιο χρήσιμη, επειδή εμφανίζει τον πίνακα σε μια ευανάγνωστη μορφή πίνακα. Λάβετε υπόψη ότι το console.table() ισχύει μόνο σε προγράμματα περιήγησης που βασίζονται σε Webkit όπως το Chrome, το Safari και την πιο πρόσφατη έκδοση του Opera.

Ελπίζω να είστε επιτυχημένοι.