Ο Ανιχνευτής Components αναγνωρίζει αυτόματα ποιο frontend framework χρησιμοποιεί ένας ιστότοπος και αποκαλύπτει το πλήρες δέντρο components. Δείτε ονόματα components React, Vue, Angular και Svelte, τιμές props/state τους και την ιεραρχία φωλιάσματος — όλα από έναν πίνακα επιθεώρησης.
Αναρωτηθήκατε ποτέ με ποιο framework είναι φτιαγμένος ένας ιστότοπος; Ή θελήσατε να δείτε πώς ένα πολύπλοκο UI αναλύεται σε components; Το Component Detector απαντά και στα δύο ερωτήματα ακαριαία. Σαρώνει τη σελίδα για signatures συγκεκριμένα για κάθε 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 DevTools ή τα Vue DevTools, αλλά ενσωματωμένο απευθείας στη σελίδα σας ως ένα ελαφρύ floating panel που λειτουργεί χωρίς να χρειάζεται να εγκαταστήσετε ξεχωριστή επέκταση για κάθε framework σε κάθε project που εξετάζετε.
Η ανίχνευση λειτουργεί ακόμα και σε minified sites με production bundling, όπου τα ονόματα των components και των μεταβλητών έχουν αλλοιωθεί (mangled) — το εργαλείο αναζητά δομικά signatures αντί να βασίζεται σε αναγνώσιμο source code, γι' αυτό και συνεχίζει να λειτουργεί σε ιστότοπους που δεν διέθεσαν ποτέ source map. Πέρα από τα τέσσερα μεγάλα frameworks, αναγνωρίζει επίσης meta-frameworks που είναι χτισμένα από πάνω τους, όπως τα Next.js και Nuxt, και τα αναφέρει ως ξεχωριστό layer από το υποκείμενο React ή Vue runtime. Αυτό το καθιστά ένα γρήγορο πρώτο βήμα κάθε φορά που βρίσκεστε μπροστά σε μια άγνωστη codebase ή στον ιστότοπο ενός ανταγωνιστή και χρειάζεται να καταλάβετε τι ακριβώς βλέπετε πριν εμβαθύνετε περισσότερο.
Ανιχνεύει 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 δωρεάν και ξεκλειδώστε 64+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
