Το Console Logger καταγράφει όλη την έξοδο console (console.log, console.warn, console.error, console.info) και την εμφανίζει σε floating panel απευθείας στη σελίδα. Δείτε σφάλματα JavaScript, μηνύματα debug και προειδοποιήσεις σε πραγματικό χρόνο χωρίς άνοιγμα DevTools. Τα μηνύματα έχουν χρωματική κωδικοποίηση ανά τύπο και περιλαμβάνουν χρονικές σφραγίδες και stack traces για σφάλματα.
Το άνοιγμα DevTools απλά για έλεγχο εξόδου console καταλαμβάνει πολύτιμο χώρο οθόνης — ειδικά σε μικρότερες οθόνες ή όταν χρειάζεστε να βλέπετε την πλήρη σελίδα ενώ παρακολουθείτε logs. Το Console Logger παρέχει ελαφρύτερη εναλλακτική: floating panel που εμφανίζει όλη την έξοδο console καθώς συμβαίνει, επικαλυμμένη στη σελίδα. Το panel καταγράφει console.log, console.warn, console.error, console.info και uncaught exceptions με πλήρεις stack traces. Τα μηνύματα έχουν χρωματική κωδικοποίηση (σφάλματα με κόκκινο, προειδοποιήσεις με κίτρινο, info με μπλε, logs με λευκό/γκρι) και περιλαμβάνουν χρονικές σφραγίδες για παρακολούθηση πότε συμβαίνουν τα γεγονότα. Τα κουμπιά φιλτραρίσματος σάς επιτρέπουν να εμφανίζετε μόνο συγκεκριμένους τύπους μηνυμάτων. Το panel είναι draggable, resizable και ημιδιαφανές ώστε να μην αποκλείει πολύ περιεχόμενο σελίδας.
Τα μηνύματα console εμφανίζονται σε πραγματικό χρόνο καθώς καταγράφονται. Δείτε logs αρχικοποίησης σελίδας, χειρισμό απόκρισης API, γεγονότα αλληλεπίδρασης χρηστών και μηνύματα σφαλμάτων — όλα streaming ζωντανά στο floating panel.
Σφάλματα με κόκκινο, προειδοποιήσεις με κεχριμπαρένιο/κίτρινο, info με μπλε και τυπικά logs με λευκό/γκρι. Διακρίνετε αμέσως κρίσιμο σφάλμα από τυπικό μήνυμα log απλά με το χρώμα.
Τα σφάλματα JavaScript περιλαμβάνουν πλήρες stack trace με ονόματα αρχείων, ονόματα συναρτήσεων και αριθμούς γραμμών. Κάντε κλικ στην αναφορά αρχείου για εντοπισμό ακριβώς πού προέκυψε το σφάλμα χωρίς άνοιγμα DevTools.
Τα κουμπιά φιλτραρίσματος στην κορυφή σάς επιτρέπουν να εμφανίζετε/αποκρύπτετε συγκεκριμένους τύπους μηνυμάτων: Όλα, Μόνο Σφάλματα, Μόνο Προειδοποιήσεις, Μόνο Info, Μόνο Logs. Το σήμα αριθμού σε κάθε φίλτρο εμφανίζει πόσα μηνύματα αυτού του τύπου υπάρχουν.
Κάθε μήνυμα εμφανίζει την ώρα που καταγράφηκε (μορφή HH:MM:SS). Παρακολουθήστε τη σειρά γεγονότων, εντοπίστε προβλήματα απόδοσης (πόσο χρόνο μεταξύ κλήσης API και απόκρισης) και συσχετίστε μηνύματα με ενέργειες χρηστών.
Εκκαθαρίστε όλα τα μηνύματα για νέα αρχή ή συνεχίστε να συσσωρεύετε καθώς αλληλεπιδράτε με τη σελίδα. Το panel εμφανίζει τον συνολικό αριθμό μηνυμάτων και μπορεί να ελαχιστοποιηθεί όταν δεν χρειάζεται.
Χρειάζεστε να δείτε έξοδο console ενώ διατηρείτε την πλήρη σελίδα ορατή; Το Console Logger σάς επιτρέπει να παρακολουθείτε logs χωρίς να καταλαμβάνει χώρο οθόνης το DevTools. Τέλειο σε μικρότερες οθόνες ή κατά παρουσιάσεις.
Αν το JavaScript σας καταγράφει αποκρίσεις API, το Console Logger τις εμφανίζει σε πραγματικό χρόνο. Δείτε δεδομένα αίτησης/απόκρισης χωρίς εναλλαγή μεταξύ σελίδας και DevTools.
Μερικά σφάλματα JavaScript αποτυγχάνουν αθόρυβα — καμία ορατή αλλαγή UI, αλλά σφάλμα στο console. Το Console Logger τα κάνει ορατά στη σελίδα ώστε να τα προσέξετε κατά την κανονική περιήγηση.
Κατά τη διάρκεια ζωντανής παρουσίασης, κρατήστε το panel Console Logger ορατό σε μια γωνία. Αν κάτι πάει στραβά, μπορείτε να δείτε αμέσως το μήνυμα σφάλματος χωρίς να διακόψετε την παρουσίαση για να ανοίξετε DevTools.
Scripts τρίτων (analytics, chat widgets, ad networks) συχνά πετούν σφάλματα ή προειδοποιήσεις. Το Console Logger τα καταγράφει ώστε να μπορείτε να παρακολουθείτε την υγεία εξωτερικών εξαρτήσεων.
Ανοίξτε το floating dock του DevSuite Pro και κάντε κλικ στο εικονίδιο Console Logger. Εμφανίζεται floating panel και αρχίζει αμέσως την καταγραφή εξόδου console.
Χρησιμοποιήστε τη σελίδα κανονικά — κάντε κλικ σε κουμπιά, πλοηγηθείτε, υποβάλετε φόρμες. Τα μηνύματα console εμφανίζονται στο panel καθώς καταγράφονται από τη JavaScript της σελίδας.
Χρησιμοποιήστε τα κουμπιά φιλτραρίσματος για εμφάνιση μόνο σφαλμάτων, προειδοποιήσεων ή logs. Τα σήματα αριθμού εμφανίζουν πόσα μηνύματα υπάρχουν για κάθε τύπο.
Για μηνύματα σφαλμάτων, αναπτύξτε το stack trace για να δείτε το αρχείο και αριθμό γραμμής όπου συνέβη το σφάλμα. Χρησιμοποιήστε αυτό για εντοπισμό της πηγής του σφάλματος.
Κάντε κλικ στο «Εκκαθάριση» για επαναφορά του panel ή απενεργοποιήστε το εργαλείο για κλείσιμο. Δεν απομένει κανένα ίχνος στη σελίδα.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 39+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
