Event Listeners περιγράφει κάθε στοιχείο που έχει ένα event listener, χρωματισμένο ανά είδος — κλικ, τοποθετήστε το δείκτη του ποντικιού, κύλιση, αφή, πληκτρολόγιο και φόρμα — δείχνει από πού προήλθε κάθε πρόγραμμα χειρισμού και αναβοσβήνει στοιχεία καθώς αλλάζει το DOM.
Το να μάθετε γιατί κάτι αντιδρά — ή όχι — ξεκινά συνήθως με μια ερώτηση στην οποία η σελίδα δεν θα απαντήσει: υπάρχει καθόλου πρόγραμμα χειρισμού κλικ σε αυτό το στοιχείο; Σε ποιο στοιχείο ανήκει στην πραγματικότητα η συμπεριφορά αιώρησης; Τι είναι να ακούς κύλιση και να κάνει τη σελίδα να τραυλίζει; DevTools προγράμματος περιήγησης μπορούν να απαριθμήσουν τους listeners ενός στοιχείου τη φορά, εάν γνωρίζετε ήδη ποιο στοιχείο να επιλέξετε.
Αυτό το εργαλείο απαντά στην ερώτηση για ολόκληρη τη σελίδα ταυτόχρονα. Κάθε στοιχείο με listener λαμβάνει ένα περίγραμμα στο χρώμα του είδους του — κλικ, τοποθετήστε το δείκτη του ποντικιού, κύλιση, αγγίξτε και σύρετε, πληκτρολόγιο ή φόρμα και εστίαση — και η τοποθέτηση του δείκτη δείχνει τα ακριβή συμβάντα και από πού προήλθε το καθένα: ένα ενσωματωμένο χαρακτηριστικό, μια ιδιότητα, έναν χειριστή React ή Vue, jQuery ή addEventListener. Τα πλακίδια κατηγορίας ενεργοποιούν και απενεργοποιούν κάθε είδος και η λίστα κάτω από το όνομα κάθε στοιχείου, έτσι ένα κλικ σας μεταφέρει σε αυτό.
Ο χειρισμός των πλαισίων γίνεται σωστά. React συνδέει listeners του στο root και αποστέλλει συμβάντα εσωτερικά, κάτι που θα έκανε ολόκληρη την εφαρμογή να φαίνεται με δυνατότητα κλικ. το εργαλείο παραμερίζει αυτές τις καταχωρίσεις ρίζας και εμφανίζει τους χειριστές React στα στοιχεία που τους δηλώνουν. Η γρήγορη σάρωση δεν χρειάζεται επαναφόρτωση και καλύπτει ενσωματωμένους χειριστές, React, Vue και jQuery. Listeners που προστέθηκαν με το απλό addEventListener πριν ανοίξει το εργαλείο μπορούν να φαίνονται μόνο από την αρχή της φόρτωσης μιας σελίδας, επομένως Reload & record επαναφορτώνει τη σελίδα μία φορά με την εγγραφή — το εργαλείο στη συνέχεια ανοίγει ξανά από μόνο του με κάθε listener που περιλαμβάνεται, σε επίπεδο σελίδας στο window και document επίσης.
Η δεύτερη καρτέλα παρακολουθεί το ίδιο το DOM. Κάθε προστιθέμενος ή αφαιρούμενος κόμβος, αλλαγή χαρακτηριστικού και αλλαγή κειμένου αναβοσβήνει στη σελίδα, οι μετρητές εμφανίζουν μεταλλάξεις ανά δευτερόλεπτο και μια λίστα κατατάσσει τα στοιχεία που αλλάζουν περισσότερο, με τα χαρακτηριστικά που εμπλέκονται. Μια σταθερή ροή ενώ κανείς δεν αγγίζει τη σελίδα σημαίνει συνήθως ένα χρονόμετρο, μια κινούμενη εικόνα που βασίζεται σε JavaScript ή ένα πλαίσιο που αποδίδει εκ νέου περισσότερα από όσα θα έπρεπε — ακριβώς αυτά που εξαντλούν τις μπαταρίες και κάνουν τις σελίδες να τραυλίζουν.
Στοιχεία με κλικ, αιώρηση, κύλιση, αφή, πληκτρολόγιο και listeners φόρμας περιγράφονται στο δικό τους χρώμα, με πλακίδια για εμφάνιση ή απόκρυψη κάθε είδους.
Ενσωματωμένα χαρακτηριστικά, on-properties, React και Vue handlers, συμβάντα jQuery και κλήσεις addEventListener, με ετικέτα σε κάθε στοιχείο.
listeners σε επίπεδο ρίζας του React παραμερίζονται και οι χειριστές του εμφανίζονται στα στοιχεία που τα δηλώνουν και όχι σε ολόκληρη την εφαρμογή.
Reload & record καταγράφει κάθε κλήση addEventListener από την αρχή μιας φόρτωσης σελίδας, συμπεριλαμβανομένων listeners window και document, μόνο για τη συγκεκριμένη φόρτωση.
Προστέθηκαν και αφαιρέθηκαν κόμβοι, αλλαγές χαρακτηριστικών και αλλαγές κειμένου αναβοσβήνουν στη σελίδα, με μετρητή μεταλλάξεων ανά δευτερόλεπτο.
Μια ταξινομημένη λίστα με τα στοιχεία που αλλάζουν περισσότερο, με τα χαρακτηριστικά που εμπλέκονται, δείχνει κατευθείαν σε δραπέτες εκ νέου απόδοση.
Δείτε με μια ματιά εάν ένα κουμπί έχει πραγματικά έναν listener ή εάν ο χειριστής κάθεται σε ένα στοιχείο περιτυλίγματος.
Βρείτε κάθε στοιχείο που ακούει κύλιση, τροχό ή κίνηση αφής, συμπεριλαμβανομένων listeners στο window και document.
Ελέγξτε ποια στοιχεία ελέγχου ανταποκρίνονται σε συμβάντα πληκτρολογίου και ποια ανταποκρίνονται μόνο στο ποντίκι.
Παρακολουθήστε τον μετρητή μεταλλάξεων ενώ η σελίδα είναι αδρανής. στοιχεία που αλλάζουν συνεχώς δείχνουν σε ένα χρονόμετρο ή ένα πλαίσιο που κάνει επιπλέον δουλειά.
Τοποθετήστε το δείκτη του ποντικιού γύρω από έναν άγνωστο ιστότοπο για να δείτε ποια μέρη είναι αλληλεπιδραστικά και ποιο πλαίσιο τα έχει καλωδιώσει.
Κάντε κλικ στο εικονίδιο Event Listeners στο dock του DevSuite Pro. Μια γρήγορη σάρωση εκτελείται αμέσως και περιγράφει κάθε στοιχείο που βρίσκει.
Τοποθετήστε το δείκτη του ποντικιού σε οποιοδήποτε περιγραφόμενο στοιχείο για να δείτε τα συμβάντα του και τις πηγές τους. Χρησιμοποιήστε τα πλακίδια κατηγορίας για να εμφανίσετε μόνο listeners με κλικ, τοποθέτηση του ποντικιού ή κύλιση.
Πατήστε Reload & record για να φορτώσετε ξανά τη σελίδα μία φορά με ενεργοποιημένη την εγγραφή. Το εργαλείο ανοίγει ξανά μόνο του και τώρα περιλαμβάνει κάθε κλήση addEventListener.
Κάντε κλικ σε μια σειρά στη λίστα για κύλιση της σελίδας σε αυτό το στοιχείο και αναβοσβήνει. Copy report σάς δίνει την πλήρη λίστα ως κείμενο.
Ανοίξτε την καρτέλα DOM mutations και χρησιμοποιήστε τη σελίδα. Τα στοιχεία αλλαγής αναβοσβήνουν και τα πιο πολυσύχναστα ανεβαίνουν στην κορυφή της λίστας.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 74+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
