Η Εξαγωγή Στοιχείου σάς επιτρέπει να κάνετε κλικ σε οποιοδήποτε στοιχείο μιας ιστοσελίδας και να εξάγετε την πλήρη δομή του σε τρεις μορφές: ακατέργαστη σήμανση HTML με όλα τα παιδιά και τα attributes, υπολογισμένα στυλ CSS ως καθαρό stylesheet, ή δομημένη αναπαράσταση JSON. Το τέλειο εργαλείο για εξαγωγή μοτίβων σχεδίασης, αποθήκευση snippets κώδικα και τεκμηρίωση UI components.
Κάθε προγραμματιστής έχει στιγμές που χρειάζεται να εξάγει κώδικα από υπάρχουσα σελίδα — ίσως ένα όμορφα διαμορφωμένο card component, μια καλά δομημένη γραμμή πλοήγησης, ή μια διάταξη φόρμας που θέλει να αναπαράγει. Κανονικά αυτό σημαίνει δεξί κλικ, Επιθεώρηση Στοιχείου, χειροκίνητη αντιγραφή HTML από τον πίνακα Elements, στη συνέχεια ξεχωριστή εξαγωγή CSS από τον πίνακα Styles. Η Εξαγωγή Στοιχείου ενοποιεί τα πάντα σε ένα κλικ. Επιλέξτε οποιοδήποτε στοιχείο και λάβετε το πλήρες HTML, πλήρες υπολογισμένο CSS, ή δομημένη αναπαράσταση JSON — το καθένα στη δική του καρτέλα, μορφοποιημένο και έτοιμο για χρήση. Η εξαγωγή HTML περιλαμβάνει το στοιχείο και όλα τα παιδιά του με σωστή εσοχή. Η εξαγωγή CSS δείχνει κάθε υπολογισμένο στυλ, ώστε να λαμβάνετε ακριβώς την εμφάνιση που αποδίδει ο browser.
<div class="pricing-card">
<div class="card-header">
<img src="icon.svg"/>
<h3>Pricing Card</h3>
</div>
<p>$29.99/month</p>
<button>Subscribe</button>
</div>
Λάβετε την πλήρη σήμανση HTML του επιλεγμένου στοιχείου συμπεριλαμβανομένων όλων των παιδιών, attributes και φωλιασμένης δομής. Η έξοδος έχει σωστή εσοχή και μορφοποίηση. Έτοιμο για επικόλληση σε νέο αρχείο HTML ή template component.
Εξάγετε κάθε υπολογισμένη ιδιότητα CSS για το στοιχείο ως καθαρό, μορφοποιημένο stylesheet. Περιλαμβάνει typography, χρώματα, spacing, borders, διάταξη και τοποθέτηση. Το CSS είναι αυτό που αποδίδει πραγματικά ο browser — λαμβάνοντας υπόψη κληρονομικότητα, specificity και cascading.
Λάβετε αντικείμενο JSON που περιέχει το όνομα ετικέτας του στοιχείου, χάρτη attributes, υπολογισμένα στυλ, εσωτερικό περιεχόμενο κειμένου και αναδρομικό πίνακα παιδιών. Χρήσιμο για προγραμματιστική ανάλυση, τεκμηρίωση, test fixtures ή κατασκευή custom εργαλείων.
Εναλλάξτε αμέσως μεταξύ καρτελών HTML, CSS και JSON. Κάθε μορφή δημιουργείται από το ίδιο επιλεγμένο στοιχείο, οπότε μπορείτε να πάρετε όποια αναπαράσταση χρειάζεστε. Και οι τρεις είναι πάντα διαθέσιμες χωρίς επαναεπιλογή του στοιχείου.
Κάθε μορφή εξαγωγής εμφανίζεται με syntax highlighting στον πίνακα προεπισκόπησης. Ετικέτες HTML σε κόκκινο, attributes σε κίτρινο, τιμές σε πράσινο. Ιδιότητες CSS σε μωβ, τιμές σε πράσινο. Κλειδιά και τιμές JSON έγχρωμα. Εύκολο στην ανάγνωση πριν την αντιγραφή.
Κάντε κλικ στο κουμπί Αντιγραφή για να πάρετε το περιεχόμενο της τρέχουσας καρτέλας. Μια γραμμή κατάστασης δείχνει τον αριθμό γραμμών και το μέγεθος σε bytes της εξαγωγής, ώστε να ξέρετε πόσο περιεχόμενο αντιγράφετε.
Βρήκατε κάρτα, ενότητα hero ή γραμμή πλοήγησης που θέλετε να αναπαράγετε; Κάντε κλικ, εξάγετε το HTML για τη δομή και το CSS για τη διαμόρφωση. Έχετε ένα πλήρες σημείο εκκίνησης για το δικό σας component.
Εξάγετε στοιχεία ως JSON για τεκμηρίωση ή αρχεία design system. Η δομημένη αναπαράσταση περιλαμβάνει ονόματα ετικετών, attributes και στυλ — ιδανικό για διατήρηση αποθέματος components ή τροφοδότηση σε εργαλεία τεκμηρίωσης.
Χρειάζεστε HTML fixtures για unit tests; Εξάγετε το HTML του στοιχείου και επικολλήστε το στο αρχείο test σας. Η έξοδος είναι καθαρή και μορφοποιημένη, έτοιμη για χρήση ως DOM snapshot για δοκιμή components.
Η εξαγωγή CSS δείχνει υπολογισμένα στυλ — αυτό που αποδίδει πραγματικά ο browser μετά εφαρμογή όλων των κανόνων CSS. Συγκρίνετε την υπολογισμένη έξοδο με το CSS που έχετε γράψει για εντοπισμό συγκρούσεων specificity, παρακάμψεων κληρονομικότητας ή απροσδόκητων προεπιλεγμένων τιμών.
Αντιγράψτε κομψές υλοποιήσεις από ιστότοπους παραγωγής σε προσωπική βιβλιοθήκη snippets. Εξάγετε τόσο HTML όσο και CSS μαζί για διατήρηση του πλήρους component — δομή και διαμόρφωση — για μελλοντική αναφορά.
Ανοίξτε το floating dock του DevSuite Pro και κάντε κλικ στο εικονίδιο Εξαγωγής Στοιχείου. Ο κέρσορας αλλάζει σε selector crosshair και ανοίγει ένας πίνακας εξαγωγής με καρτέλες.
Κάντε κλικ σε οποιοδήποτε στοιχείο στη σελίδα. Επισημαίνεται με μωβ περίγραμμα και ο πίνακας εξαγωγής γεμίζει με τις αναπαραστάσεις HTML, CSS και JSON του στοιχείου σε τρεις καρτέλες.
Κάντε κλικ στην καρτέλα HTML, CSS ή JSON για προβολή του στοιχείου σε διαφορετικές μορφές. Κάθε καρτέλα δείχνει μορφοποιημένη προεπισκόπηση με syntax highlighting του περιεχομένου εξαγωγής.
Σαρώστε την προεπισκόπηση για να βεβαιωθείτε ότι περιέχει αυτό που χρειάζεστε. Κάντε κλικ στο κουμπί Αντιγραφή για να τοποθετηθεί το περιεχόμενο της τρέχουσας καρτέλας στο πρόχειρο. Η γραμμή κατάστασης δείχνει αριθμό γραμμών και μέγεθος.
Κάντε κλικ σε διαφορετικό στοιχείο στη σελίδα για ενημέρωση του πίνακα εξαγωγής με νέο περιεχόμενο. Δεν χρειάζεται απενεργοποίηση — συνεχίστε να κάνετε κλικ για εξαγωγή πολλαπλών στοιχείων.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 39+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.