Ο Ανιχνευτής Components αναγνωρίζει αυτόματα ποιο frontend framework χρησιμοποιεί ένας ιστότοπος και αποκαλύπτει το πλήρες δέντρο components. Δείτε ονόματα components React, Vue, Angular και Svelte, τιμές props/state τους και την ιεραρχία φωλιάσματος — όλα από έναν πίνακα επιθεώρησης.
Αναρωτηθήκατε ποτέ με ποιο framework είναι κατασκευασμένος ένας ιστότοπος; Ή θελήσατε να δείτε πώς ένα σύνθετο UI αποσυντίθεται σε components; Ο Ανιχνευτής Components απαντά αμέσως και στις δύο ερωτήσεις. Σαρώνει τη σελίδα για υπογραφές ειδικές για framework (React fiber nodes, Vue component instances, Angular zone markers, Svelte component metadata) και αναγνωρίζει το framework, την έκδοσή του και το πλήρες δέντρο components. Για React και Vue, πηγαίνει ακόμα παραπέρα — εμφανίζοντας τιμές props και state components ώστε να καταλαβαίνετε ποια δεδομένα οδηγούν κάθε κομμάτι του UI. Κάντε κλικ σε οποιοδήποτε component στο δέντρο για επισήμανση του αντίστοιχου στοιχείου DOM, ή κάντε κλικ σε στοιχείο στη σελίδα για εντοπισμό του component στο δέντρο.
Ανιχνεύει React (συμπεριλαμβανομένων Next.js, Gatsby, Remix), Vue (συμπεριλαμβανομένου Nuxt), Angular, Svelte (συμπεριλαμβανομένου SvelteKit), Preact, Solid και άλλα frameworks αυτόματα. Εμφανίζει το όνομα framework, τον ακριβή αριθμό έκδοσης και τη λειτουργία απόδοσης (client-side, SSR ή hybrid).
Αποδίδει την πλήρη ιεραρχία components σε συμπτυσσόμενη προβολή δέντρου. Δείτε πώς το κορυφαίο component App περιέχει ένα Navbar, που περιέχει NavLinks, που περιέχουν μεμονωμένα Link components. Το βάθος φωλιάσματος και οι σχέσεις γονέα-παιδιού είναι απολύτως σαφείς.
Για components React και Vue, δείτε τις τρέχουσες τιμές props και state που περνούν σε κάθε component. Δείτε ότι το component Dashboard λαμβάνει title, loading και columns. Ανεκτίμητο για κατανόηση ροής δεδομένων.
Κάντε κλικ σε οποιοδήποτε component στον πίνακα δέντρου για επισήμανση του αντίστοιχου στοιχείου DOM με έγχρωμη επικάλυψη. Ή κάντε κλικ σε οποιοδήποτε στοιχείο στη σελίδα για εύρεση και επιλογή του γονικού του component στο δέντρο.
Δείτε το συνολικό αριθμό components που αποδίδονται στη σελίδα, πόσα είναι μοναδικά έναντι επαναλαμβανόμενων instances, και ποια components εμφανίζονται συχνότερα. Χρήσιμο για κατανόηση πολυπλοκότητας σελίδας και εντοπισμό μοτίβων επαναχρησιμοποίησης.
Ανιχνεύει frameworks ακόμα και σε minified builds παραγωγής. Το fiber tree του React, οι __vue__ δείκτες του Vue και τα ng attributes του Angular παραμένουν στη λειτουργία παραγωγής — ο Ανιχνευτής Components τα διαβάζει ανεξάρτητα από τη διαμόρφωση build.
Επισκεφτείτε οποιοδήποτε ιστότοπο και μάθετε αμέσως αν είναι κατασκευασμένος με React, Vue, Angular ή Svelte — συμπεριλαμβανομένης της ακριβούς έκδοσης. Συνδυάστε με το Site Stack για πλήρη τεχνολογικό έλεγχο που περιλαμβάνει CDN, analytics και CMS.
Μελετήστε πώς οι εφαρμογές παραγωγής αποσυνθέτουν το UI σε components. Δείτε πώς δομεί η Stripe τη σελίδα τιμολόγησής της, πώς οργανώνει το Linear το dashboard του, ή πώς οποιαδήποτε καλοκατασκευασμένη εφαρμογή διαχωρίζει διάταξη, πλοήγηση και περιεχόμενο σε components.
Ένα component δεν αποδίδεται σωστά; Επιθεωρήστε τα props και state του για να δείτε ποια δεδομένα λαμβάνει πραγματικά. Συγκρίνετε αναμενόμενες τιμές με πραγματικές για εντοπισμό σπασίματος ροής δεδομένων — χωρίς console.log.
Προετοιμάζεστε για frontend συνέντευξη; Περιηγηθείτε σε ιστότοπους παραγωγής για να δείτε πραγματικά μοτίβα components — container/presentational splits, render prop usage, context providers και HOC wrappers είναι ορατά στο δέντρο components.
Επισκεφτείτε παρόμοια προϊόντα κατασκευασμένα με διαφορετικά frameworks και συγκρίνετε τις δομές components. Δείτε πώς μια εφαρμογή React έναντι μιας Vue προσεγγίζει το ίδιο μοτίβο UI — πλοήγηση, φόρμες, πίνακες δεδομένων, modals — και κατανοήστε τις αρχιτεκτονικές διαφορές.
Ανοίξτε το floating dock του DevSuite Pro και κάντε κλικ στο εικονίδιο Ανιχνευτή Components. Το εργαλείο σαρώνει το DOM της σελίδας για δείκτες ειδικούς για framework και κατασκευάζει το δέντρο components.
Η κεφαλίδα του πίνακα εμφανίζει το ανιχνευμένο framework (React, Vue, Angular, Svelte), την έκδοσή του και τη λειτουργία απόδοσης. Αν δεν ανιχνευτεί framework, αναφέρει τη σελίδα ως vanilla HTML/CSS/JS.
Αναπτύξτε και συμπτύξτε components στο δέντρο για εξερεύνηση της ιεραρχίας. Τα ονόματα components εμφανίζονται με εσοχή που δείχνει το βάθος φωλιάσματος. Τα επαναλαμβανόμενα components δείχνουν αριθμό instances.
Κάντε κλικ σε οποιοδήποτε component στο δέντρο για να δείτε τις τρέχουσες τιμές props και state στην ενότητα λεπτομερειών από κάτω. Για React: props, state και hooks. Για Vue: props, data και computed properties.
Κάντε κλικ σε οποιοδήποτε component για επισήμανση του αντίστοιχου στοιχείου DOM με έγχρωμο περίγραμμα και ημιδιαφανή επικάλυψη. Κάντε κλικ σε στοιχείο στη σελίδα για εντοπισμό του στο δέντρο.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 39+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
