Πώς μπορείτε να βελτιώσετε τη ροή εργασίας σας χρησιμοποιώντας την κονσόλα JavaScript

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

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

Τι είναι η Κονσόλα;

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

  • Δείτε ένα αρχείο καταγραφής σφαλμάτων και προειδοποιήσεων που εμφανίζονται σε μια ιστοσελίδα.
  • Αλληλεπιδράστε με την ιστοσελίδα χρησιμοποιώντας εντολές JavaScript.
  • Αποσφαλμάτωση εφαρμογών και διασχίστε το DOM απευθείας στο πρόγραμμα περιήγησης.
  • Επιθεωρήστε και αναλύστε τη δραστηριότητα του δικτύου

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

Console.log, Console.error, Console.warn και Console.info

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

Console.group

Αυτή η μέθοδος σάς επιτρέπει να ομαδοποιήσετε μια σειρά από console.logs (αλλά και πληροφορίες σφάλματος και ούτω καθεξής) κάτω από μια ομάδα που μπορεί να συμπτυχθεί. Η σύνταξη είναι πραγματικά πολύ απλή: απλώς εισαγάγετε όλα console.logόσα θέλουμε να ομαδοποιήσουμε πριν από ένα console.group()console.groupCollapsed()αν θέλουμε να κλείσει από προεπιλογή). Στη συνέχεια, προσθέστε ένα console.groupEnd()στο τέλος για να κλείσετε την ομάδα.

Τα αποτελέσματα θα μοιάζουν με αυτό:

Κονσόλα. Τραπέζι

Από τότε που ανακάλυψα ότι console.tableη ζωή μου έχει αλλάξει. Η εμφάνιση JSON ή πολύ μεγάλων συστοιχιών JSON μέσα σε ένα console.logείναι μια τρομακτική εμπειρία. Αυτό console.tableμας επιτρέπει να απεικονίσουμε αυτές τις δομές μέσα σε έναν όμορφο πίνακα όπου μπορούμε να ονομάσουμε τις στήλες και να τις περάσουμε ως παραμέτρους.

Το αποτέλεσμα είναι υπέροχο και πολύ χρήσιμο για τον εντοπισμό σφαλμάτων:

Console.count, Console.time και Console.timeEnd

Αυτές οι τρεις μέθοδοι είναι το μαχαίρι του ελβετικού στρατού για κάθε προγραμματιστή που πρέπει να εντοπίσει σφάλματα. Οι console.countμετρήσεις και οι έξοδοι ο αριθμός των φορών που count()έχει χρησιμοποιηθεί στην ίδια γραμμή και με την ίδια ετικέτα. Η console.timeξεκινά ένα χρονόμετρο με ένα όνομα που ορίζεται ως παράμετρο εισόδου, και μπορεί να τρέξει μέχρι 10.000 ταυτόχρονες χρονόμετρα σε μια δεδομένη σελίδα. Μόλις ξεκινήσει, χρησιμοποιούμε μια κλήση για console.timeEndνα σταματήσουμε το χρονόμετρο και να εκτυπώσουμε τον χρόνο που πέρασε στην Κονσόλα.

Η έξοδος θα έχει την εξής μορφή:

Console.trace και Console.assert

Αυτές οι μέθοδοι απλώς εκτυπώνουν ένα ίχνος στοίβας από το σημείο που κλήθηκε. Φανταστείτε ότι δημιουργείτε μια βιβλιοθήκη JS και θέλετε να ενημερώσετε τον χρήστη πού δημιουργήθηκε το σφάλμα. Σε αυτήν την περίπτωση, αυτές οι μέθοδοι μπορεί να είναι πολύ χρήσιμες. Το console.assertείναι σαν το console.trace, αλλά θα εκτυπωθεί μόνο αν η κατάσταση πέρασε δεν πέρασε.

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

Διαγραφή όλων των κονσολών;

Η χρήση κονσολών συχνά μας αναγκάζει να τις εξαλείψουμε. Ή μερικές φορές ξεχνάμε την παραγωγή παραγωγής (και τις παρατηρούμε μόνο κατά λάθος ημέρες και ημέρες αργότερα). Φυσικά, δεν συμβουλεύω κανέναν να κάνει κατάχρηση κονσόλας όπου δεν είναι απαραίτητες (η κονσόλα στη λαβή εισόδου αλλαγής μπορεί να διαγραφεί αφού δείτε ότι λειτουργεί). Θα πρέπει να αφήσετε αρχεία καταγραφής σφαλμάτων ή ίχνη καταγραφής σε λειτουργία ανάπτυξης για να σας βοηθήσουμε να εντοπίσετε σφάλματα. Χρησιμοποιώ το Webpack πολύ, τόσο στη δουλειά όσο και στα δικά μου έργα. Αυτό το εργαλείο σάς επιτρέπει να διαγράψετε όλες τις κονσόλες που δεν θέλετε να παραμείνετε (κατά τύπο) από την έκδοση παραγωγής χρησιμοποιώντας το uglifyjs-webpack-plugin;

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')var debug = process.env.NODE_ENV !== "production";.....optimization: { minimizer: !debug ? [ new UglifyJsPlugin({ // Compression specific options uglifyOptions: { // Eliminate comments comments: false, compress: { // remove warnings warnings: false, // Drop console statements drop_console: true }, } })] : []}

Η διαμόρφωση είναι πραγματικά ασήμαντη και απλοποιεί την εργασία, οπότε διασκεδάστε με την κονσόλα (αλλά μην την κακοποιείτε!)

Αν σας άρεσε το άρθρο παρακαλώ χειροκρότημα και ακολουθήστε με :)

Thx και μείνετε συντονισμένοι;

Ακολουθήστε τις τελευταίες ειδήσεις και συμβουλές μου στο Facebook