Η αποσφαλμάτωση μπορεί να είναι κουραστική και ακόμη πιο απογοητευτική όταν δεν μπορείτε να εντοπίσετε εύκολα το σφάλμα. Τα εργαλεία προγραμματιστή του Chrome 106 (devtools) έχουν ρυθμιστεί να απλοποιούν τη διαδικασία εντοπισμού σφαλμάτων, καθιστώντας την ευκολότερη και γρήγορη.
Τώρα μπορείτε εύκολα να ταξινομήσετε αρχεία, να βελτιστοποιήσετε την αναζήτησή σας, να αποκρύψετε σενάρια τρίτων, να αποκτήσετε πρόσβαση σε εις βάθος αναφορές απόδοσης και πολλά άλλα που συζητούνται σε αυτό το άρθρο. Αυτά τα εργαλεία ανάπτυξης είναι απαραίτητα, ειδικά για προγραμματιστές που εργάζονται με πλαίσια JavaScript όπως π.χ Angular, React και Vue.js, οι οποίοι διαθέτουν πλέον μια διαδραστική και απλοποιημένη κονσόλα για οπτικοποίηση και εντοπισμό σφαλμάτων τον κωδικό τους.
Ας ρίξουμε μια πιο προσεκτική ματιά σε μερικά από αυτά τα νέα χαρακτηριστικά:
Για να επωφεληθείτε πλήρως από τις νέες ενημερώσεις στο Chrome 106, κατεβάστε το Chrome Καναρίνι, Dev, ή Βήτα εκδόσεις ως προεπιλεγμένο πρόγραμμα περιήγησης ανάπτυξης. Θα έχετε πρόσβαση στα πιο πρόσφατα εργαλεία προγραμματιστή που επιτρέπουν τη δοκιμή των API της πλατφόρμας ιστού και τον γρήγορο εντοπισμό προβλημάτων ή σφαλμάτων στον ιστότοπό σας για να διασφαλίσετε ότι οι χρήστες σας έχουν την καλύτερη εμπειρία πελάτη.
1. Αρχεία Ομαδοποιημένα κατά Συγγραφέα/Ανάπτυξη
Τώρα μπορείτε να πλοηγηθείτε απευθείας στα στοιχεία της εφαρμογής σας ομαδοποιώντας αρχεία στο συντάχθηκε/αναπτύχθηκε στο πηγή πίνακας. Παω σε Πηγή > Μενού 3 κουκκίδων > Ομαδοποίηση κατά Συγγραφή/Ανάπτυξη. Τώρα, όταν ανοίγετε τα αρχεία, μπορείτε να δείτε μόνο τα αρχεία που έχουν αναπτυχθεί στον πίνακα.
Σε προηγούμενες εκδόσεις του Chrome, όλα τα αρχεία πηγαίου κώδικα ήταν ορατά στο πλοήγηση πίνακα, καθιστώντας δύσκολη την εύρεση ενός μεμονωμένου αρχείου.
2. Απλοποιημένη αναζήτηση αρχείων
Μπορείτε να περιορίσετε την αναζήτησή σας στον πίνακα προέλευσης μόνο σε σχετικά αρχεία. Σε προηγούμενες εκδόσεις του Chrome, τα αρχεία που δημιουργούνται από το πλαίσιο και άλλα τρίτα μέρη θα εμφανίζονταν στα αποτελέσματα αναζήτησης, καθιστώντας δύσκολη την αναγνώριση του στοιχείου αναζήτησης.
Αυτή η ενημέρωση είναι η έκδοση devtools για τη βελτιστοποίηση της αναζήτησής σας σε προγράμματα περιήγησης ιστού με Φύλλα εξαπάτησης αναζήτησης Google. Για να διαμορφώσετε αυτήν τη ρύθμιση, μεταβείτε στο Μενού 3 κουκκίδων > Απόκρυψη πηγών λίστας παράβλεψης.
Σενάρια τρίτων που γεμίζουν την κονσόλα σας; Το Chrome 106 πρόσθεσε μια επέκταση λίστας παράβλεψης στον χάρτη προέλευσης για να σας επιτρέψει να αποκρύψετε σενάρια που δημιουργούνται αυτόματα από πλαίσια και άλλα τρίτα μέρη.
Για να ενεργοποιήσετε αυτήν τη δυνατότητα, μεταβείτε στο Ρυθμίσεις > Λίστα παράβλεψης > Αυτόματη προσθήκη γνωστών σεναρίων τρίτων στη λίστα αγνοήσεων. Όταν ανοίξετε ξανά τα αρχεία, η κονσόλα θα εμφανίσει μόνο σχετικά αρχεία που σχετίζονται με την εφαρμογή σας. Τώρα μπορείτε να δείτε τον κωδικό σας χωρίς περισπασμούς.
4. Λεπτομερή ίχνη στοίβας
Θα χρειαστείτε λιγότερο χρόνο για να εντοπίσετε ένα σφάλμα στην κονσόλα, χάρη σε μια νέα δυνατότητα στο Chrome 106. Τα εργαλεία προγραμματιστή του Chrome σάς παρέχουν μια λεπτομερή προβολή των ασύγχρονων λειτουργιών και των βασικών αιτιών τους. Σε προηγούμενες εκδόσεις ήταν ορατά μόνο τα συμβάντα που οδήγησαν στην επέμβαση. Τα πιο πρόσφατα devTools δείχνουν ολόκληρη την αλυσίδα λειτουργιών και τις βασικές αιτίες τους.
Η Google έχει διαμορφώσει ένα console.createTask() μέθοδος στο Chrome 106. Αυτή η μέθοδος επιτρέπει στα πλαίσια να εκτελούν ίχνη στοίβας στην κονσόλα. Ο εντοπισμός σφαλμάτων JavaScript με χρήση εργαλείων προγραμματισμού είναι εξίσου εύκολος εντοπισμός σφαλμάτων CSS με χρήση του chrome.
5. Παρακολουθήστε τις αλληλεπιδράσεις στον πίνακα επιδόσεων
Παρακολούθηση νέων αλληλεπιδράσεων στο Εκτέλεση πίνακα για τον εντοπισμό πιθανών προβλημάτων ανταπόκρισης στην αίτησή σας. Στο Chrome 106, όλες οι αλληλεπιδράσεις εμφανίζονται στο κομμάτι Αλληλεπιδράσεις μετά από μια λειτουργία. Το κομμάτι δείχνει την πηγή των αλληλεπιδράσεων και τα αναγνωριστικά τους. Η παρακολούθηση βοηθά στον εντοπισμό της πηγής και την αναχαίτισή της ανάλογα.
6. LCP Timing Insights στον πίνακα απόδοσης
ο Μεγαλύτερη περιεχόμενη βαφή Οι λεπτομέρειες χρονισμού (LCP) είναι πλέον διαθέσιμες στο πίνακα πληροφοριών απόδοσης. LCP είναι μια ζωτικής σημασίας μέτρηση απόδοσης ιστού που αναφέρει τον χρόνο απόδοσης εικόνων ή μπλοκ κειμένου για να φορτωθούν στην ιστοσελίδα. Ένα 2,5 δευτερόλεπτα ή λιγότερο είναι μια καλή βαθμολογία απόδοσης.
Για να δείτε τις πληροφορίες, μεταβείτε στο πίνακας επιδόσεων>μενού 3 κουκκίδων-περισσότερα διόδια>πληροφορίες απόδοσης. Όταν αναπαράγετε ξανά μια εγγραφή, το Λεπτομέριες ο πίνακας θα εμφανίσει τους χρόνους φόρτωσης.
Πρόσθετες ενημερώσεις στο Chrome 106
Άλλες βελτιώσεις στο Chrome 106 περιλαμβάνουν:
- Μπορείτε να εξαγάγετε τις εγγραφές του σεναρίου σας χωρίς προβλήματα από το Μηχάνημα εγγραφής πίνακας. Το κουμπί εξαγωγής είχε πρόβλημα σε προηγούμενες εκδόσεις.
- Τώρα έχετε έναν επιλογέα χρώματος στο Στυλ στοιχεία SVG παραθύρου.
- Μπορείτε να αναγνωρίσετε σενάρια που παραμορφώνουν τη διάταξή σας στο Performance Insights πίνακας.
- Μπορείτε να εμφανίσετε διαδρομές για γραμματοσειρές ιστού LCP στο Performance Insights πίνακας.
Αυτές οι λειτουργίες ενδέχεται να βελτιώσουν τον τρόπο με τον οποίο χρησιμοποιείτε τα εργαλεία ανάπτυξης του προγράμματος περιήγησης.
Τι λαμβάνετε από το Chrome 106
Οι τελευταίες βελτιώσεις στα αναπτυξιακά εργαλεία στο Chrome 106 κάνουν τη διαδικασία εντοπισμού σφαλμάτων πιο γρήγορη. Οι νέες ενημερώσεις διευκολύνουν την οπτικοποίηση των λειτουργιών μέσω μιας απλοποιημένης και δυναμικής κονσόλας που σας επιτρέπει να αποκρύψετε αρχεία, να απενεργοποιήσετε σενάρια, να εγγράψετε και να έχετε μια εις βάθος προβολή της εφαρμογής σας όταν αποσφαλμάτωση.
Οι προσθήκες του Chrome 106 θα σας επιτρέψουν να διαχειριστείτε την εφαρμογή σας και να βελτιστοποιήσετε την απόδοσή της. Προχωρήστε και απολαύστε αυτά τα πλεονεκτήματα με την ενημέρωση στην πιο πρόσφατη έκδοση του Chrome 106.
