Κάντε τον κώδικά σας ευανάγνωστο online

Επικολλήστε ελαχιστοποιημένο JavaScript, CSS, HTML, XML ή JSON και αποκτήστε ευανάγνωστο κώδικα με σωστές εσοχές. Δωρεάν, άμεσα και μέσα στο πρόγραμμα περιήγησής σας.

Είσοδος, ελαχιστοποιημένος κώδικας

Έξοδος, μορφοποιημένος κώδικαςΑριθμοί γραμμών

Ο ευανάγνωστος, μορφοποιημένος κώδικάς σας θα εμφανιστεί εδώ

Μορφοποίηση συγκεκριμένης μορφής

Κάθε μορφή έχει τη δική της σελίδα, με τις λεπτομέρειες που έχουν σημασία για τη συγκεκριμένη γλώσσα:

Τι είναι η ελαχιστοποίηση κώδικα;

Οι προγραμματιστές γράφουν κώδικα για να τον διαβάζουν και άλλοι προγραμματιστές. Γι' αυτό προσθέτουν σχόλια, εσοχές, κενές γραμμές ανάμεσα στα μπλοκ και ονόματα μεταβλητών που περιγράφουν το περιεχόμενό τους. Όλα αυτά βοηθούν τον άνθρωπο, αλλά δεν είναι απαραίτητα στο πρόγραμμα περιήγησης. Η ελαχιστοποίηση είναι το στάδιο της διαδικασίας παραγωγής που αφαιρεί όσα δεν χρειάζεται ο υπολογιστής: κενά, αλλαγές γραμμής, σχόλια και, πολύ συχνά, τα αρχικά ονόματα μεταβλητών και συναρτήσεων, τα οποία αντικαθίστανται με μεμονωμένα γράμματα. Η συμπεριφορά του προγράμματος παραμένει ίδια, αλλά η εμφάνισή του αλλάζει εντελώς.

Το όφελος είναι ουσιαστικό. Ένα ελαχιστοποιημένο πακέτο JavaScript είναι συνήθως κατά 30 έως 70 τοις εκατό μικρότερο από τον αρχικό κώδικα. Αυτό σημαίνει λιγότερα δεδομένα στο δίκτυο, ταχύτερη πρώτη εμφάνιση της σελίδας και καλύτερα Core Web Vitals. Γι' αυτό σχεδόν κάθε ιστότοπος σε περιβάλλον παραγωγής στέλνει ελαχιστοποιημένα JS, CSS και HTML. Το τίμημα είναι ότι το αρχείο που κατεβάζετε από έναν ιστότοπο καταλήγει συχνά μία πυκνή, δυσανάγνωστη γραμμή. Για να το κατανοήσετε, να εντοπίσετε σφάλματα ή να ελέγξετε τι πραγματικά κάνει, πρέπει πρώτα να επαναφέρετε τη μορφοποίησή του.

Τι κάνει αυτό το εργαλείο μορφοποίησης;

Το LFUnminify παίρνει ελαχιστοποιημένο κώδικα και του δίνει ξανά ευανάγνωστη δομή. Επαναφέρει τις εσοχές, τοποθετεί κάθε εντολή σε ξεχωριστή γραμμή, προσθέτει διαστήματα στα μπλοκ και στους τελεστές και εφαρμόζει συνεπείς κανόνες μορφοποίησης για τη γλώσσα που αναγνωρίζει. Ένα πακέτο τεσσάρων χιλιάδων χαρακτήρων σε μία γραμμή μετατρέπεται σε μερικές εκατοντάδες σωστά φωλιασμένες γραμμές, τις οποίες μπορείτε να διαβάσετε, να αναζητήσετε και να κατανοήσετε.

Στο παρασκήνιο εκτελεί το Prettier, τον μορφοποιητή που χρησιμοποιούν ήδη πολλές ομάδες JavaScript, απευθείας μέσα στο πρόγραμμα περιήγησής σας. Έτσι το αποτέλεσμα ακολουθεί τις συμβάσεις που θα εφάρμοζε και ο επεξεργαστής σας σε ένα συνηθισμένο αρχείο πηγαίου κώδικα. Η αναγνώριση είναι αυτόματη: επικολλήστε το περιεχόμενο και το εργαλείο θα διαπιστώσει αν πρόκειται για JavaScript, CSS, HTML, XML ή JSON, πριν το μορφοποιήσει κατάλληλα.

Υπάρχει ένας βασικός περιορισμός που πρέπει να γνωρίζετε. Η αποελαχιστοποίηση δεν είναι απομεταγλώττιση. Τα σχόλια, τα αρχικά ονόματα μεταβλητών και οι σημειώσεις των προγραμματιστών διαγράφηκαν κατά την παραγωγή του αρχείου και κανένα εργαλείο δεν μπορεί να τα ανακτήσει. Αυτό που παίρνετε είναι καλά δομημένος, ευανάγνωστος κώδικας, με τα σύντομα ονόματα του ελαχιστοποιητή στη θέση τους. Στην πράξη, αυτό αρκεί συνήθως για να ακολουθήσετε τη λογική, να εντοπίσετε μια συνάρτηση ή να δείτε ποια δεδομένα στέλνει ένα script και πού.

Υποστηριζόμενες μορφές κώδικα

Ένας επεξεργαστής, πέντε γλώσσες. Το LFUnminify διαβάζει ό,τι επικολλάτε, αναγνωρίζει τη γλώσσα και το παραδίδει στον αναλυτή που είναι κατάλληλος για τη συγκεκριμένη σύνταξη. Δεν χρειάζεται να επιλέξετε μορφή από μενού, ενώ ακόμη και ένα αρχείο με λανθασμένη επέκταση αντιμετωπίζεται σωστά:

JavaScript, με σύνταξη ES6 και νεότερη, modules, ασύγχρονο κώδικα και JSX. Η συνηθέστερη περίπτωση είναι ένα πακέτο που δημιουργήθηκε με webpack, Vite, esbuild ή Terser.
CSS, με σύγχρονη σύνταξη, προσαρμοσμένες ιδιότητες, media queries και ένθετους κανόνες. Ιδανικό για φύλλα στυλ που παράγονται με Tailwind, Sass ή PostCSS.
HTML, μαζί με ενσωματωμένα μπλοκ script και style, τα οποία μορφοποιούνται μαζί με τη σήμανση αντί να παραμένουν μία μακρόστενη γραμμή.
XML, όπως χάρτες ιστοτόπων, ροές RSS, αρχεία SVG, φάκελοι SOAP και αρχεία ρυθμίσεων που παραλήφθηκαν χωρίς καμία αλλαγή γραμμής.
JSON, όπως βαθιά φωλιασμένες απαντήσεις API, αρχεία περιγραφής πακέτων, αρχεία ρυθμίσεων και δεδομένα καταγραφής.

Πότε χρειάζεστε έναν μορφοποιητή κώδικα

Η αποελαχιστοποίηση σπάνια γίνεται μόνο από περιέργεια. Συνήθως είναι ο γρηγορότερος τρόπος να απαντήσετε σε ένα συγκεκριμένο ερώτημα για κώδικα που δεν γράψατε εσείς, ή για δικό σας κώδικα που δεν διαβάζεται πλέον:

Εντοπισμός σφάλματος σε παραγωγή. Το ίχνος στοίβας δείχνει τη γραμμή 1, στήλη 24815 ενός πακέτου. Η μορφοποίηση δίνει πραγματικούς αριθμούς γραμμών και σας επιτρέπει να βρείτε τη συνάρτηση που προκάλεσε την εξαίρεση.
Έλεγχος script τρίτου μέρους. Πριν προσθέσετε στον ιστότοπό σας μια ετικέτα αναλυτικών στοιχείων, ένα widget συνομιλίας ή ένα script συνεργατών, μορφοποιήστε το και διαβάστε τι συλλέγει, με ποιους τομείς επικοινωνεί και τι αποθηκεύει.
Ανάγνωση μεταγλωττισμένου φύλλου στυλ. Τα utility frameworks παράγουν τεράστια αρχεία CSS σε μία γραμμή. Η μορφοποίηση αποκαλύπτει την αλληλουχία προτεραιότητας, τον κανόνα που υπερισχύει και τον λόγο που αγνοείται η δική σας τροποποίηση.
Εξέταση απάντησης API. Τα δεδομένα JSON που αντιγράφετε από την καρτέλα δικτύου είναι δυσανάγνωστα μέχρι να μορφοποιηθούν. Έπειτα η δομή, η ένθεση και το πεδίο που λείπει γίνονται εμφανή μέσα σε δευτερόλεπτα.
Μάθηση μέσα από πραγματικό κώδικα. Η ανάγνωση του τρόπου με τον οποίο μια καλοφτιαγμένη βιβλιοθήκη λύνει ένα πρόβλημα βοηθά να βελτιωθείτε γρήγορα. Ένα μορφοποιημένο αρχείο είναι απαραίτητο για να το κάνετε με άνεση.

Πώς να χρησιμοποιήσετε το LFUnminify

Υπάρχουν τρεις τρόποι να εισαγάγετε κώδικα στον επεξεργαστή. Επικολλήστε τον απευθείας στο αριστερό πλαίσιο, πατήστε Επιλογή αρχείου για να ανοίξετε ένα τοπικό αρχείο ή σύρετε και αποθέστε ένα αρχείο στην περιοχή εισόδου. Για να εξετάσετε ένα αρχείο που παρέχει κάποιος ιστότοπος, ανοίξτε το από την προβολή πηγαίου κώδικα ή τα DevTools του προγράμματος περιήγησης, αντιγράψτε το και επικολλήστε το εδώ. Εναλλακτικά, αποθηκεύστε το αρχείο .js, .css, .html, .xml ή .json και ανοίξτε το με την Επιλογή αρχείου.

Η μορφοποίηση ξεκινά αυτόματα, χωρίς να χρειάζεται να αναζητήσετε κάποιο κουμπί. Το εργαλείο περιμένει να σταματήσετε την πληκτρολόγηση, αναγνωρίζει τη γλώσσα και εμφανίζει το μορφοποιημένο αποτέλεσμα στο δεξί πλαίσιο με επισήμανση σύνταξης. Από εκεί μπορείτε να αντιγράψετε ολόκληρο το αποτέλεσμα στο πρόχειρο με ένα κλικ ή να το κατεβάσετε ως αρχείο με κατάλληλο όνομα, ώστε να το ανοίξετε στον δικό σας επεξεργαστή.

Δύο μικρές δυνατότητες βοηθούν στα μεγάλα αρχεία. Ενεργοποιήστε τους αριθμούς γραμμών όταν θέλετε να αναφερθείτε σε συγκεκριμένη θέση ή να συγκρίνετε δύο εκδόσεις δίπλα δίπλα. Η προτίμησή σας διατηρείται για την επόμενη επίσκεψη. Αν η μορφή που αναγνωρίστηκε δεν είναι η αναμενόμενη, αυτό συχνά αποτελεί χρήσιμη ένδειξη: ένα αρχείο που θεωρούσατε JSON αλλά αναγνωρίζεται ως JavaScript μπορεί να είναι απάντηση JSONP ή ρύθμιση ενσωματωμένη σε μια ανάθεση τιμής.

Ο κώδικάς σας δεν φεύγει από τον υπολογιστή σας

Αυτό χρειάζεται να ειπωθεί ξεκάθαρα. Η μορφοποίηση γίνεται τοπικά, μέσα στο πρόγραμμα περιήγησής σας, με JavaScript που φορτώνεται μία φορά μαζί με τη σελίδα. Ο κώδικάς σας δεν μεταφορτώνεται, δεν μπαίνει σε ουρά διακομιστή, δεν γράφεται σε βάση δεδομένων και δεν καταγράφεται πουθενά. Μπορείτε να αποσυνδεθείτε από το δίκτυο αφού φορτωθεί η σελίδα και το εργαλείο θα συνεχίσει να λειτουργεί. Είναι ο απλούστερος τρόπος να επιβεβαιώσετε ότι δεν αποστέλλεται τίποτα.

Έτσι μπορείτε να επικολλήσετε ιδιόκτητο κώδικα, ένα εσωτερικό πακέτο εφαρμογής, ένα έργο πελάτη ή ένα αρχείο ρυθμίσεων του οποίου τη δομή δεν θέλετε να κοινοποιήσετε. Τίποτα από όσα επικολλάτε ή ανοίγετε δεν φεύγει από το πρόγραμμα περιήγησής σας. Το εργαλείο επίσης δεν ανακτά αρχεία για λογαριασμό σας, οπότε ο διακομιστής μας δεν μαθαίνει ποιον κώδικα ή ποιους ιστοτόπους εξετάζετε. Δεν χρειάζεται λογαριασμός και δεν παρακολουθείται το περιεχόμενο που επικολλάτε.

Γιατί το LFUnminify είναι δωρεάν;

Το LFUnminify ανήκει σε μια οικογένεια δωρεάν εργαλείων του Ludovic Frank, μαζί με μια γεννήτρια κωδικών πρόσβασης, μια γεννήτρια favicon, ένα εργαλείο δημιουργίας χρωματικών παλετών και άλλες εφαρμογές. Η λογική είναι απλή: τα μικρά βοηθήματα που χρειάζονται οι προγραμματιστές πολλές φορές την εβδομάδα δεν πρέπει να κρύβονται πίσω από φόρμες εγγραφής, διαφημιστικά εμπόδια ή περιορισμένες πιστώσεις. Εδώ δεν υπάρχουν λογαριασμοί, ποσοστώσεις ή προτροπές αγοράς μέσα στο προϊόν.

Είναι επίσης μια πρακτική παρουσίαση της δουλειάς μας. Κάθε εργαλείο αυτής της οικογένειας είναι πραγματική εφαρμογή, φτιαγμένη και συντηρημένη με την ίδια φροντίδα όπως τα έργα των πελατών μας. Αυτό δείχνει περισσότερα για τον τρόπο που εργαζόμαστε από μια απλή σελίδα παρουσίασης έργων. Αν χρειάζεστε εξατομικευμένη ανάπτυξη ιστοσελίδων, μια ολοκληρωμένη εφαρμογή αντί για έτοιμο πρότυπο ή τεχνικές συμβουλές, θα μας βρείτε από τον σύνδεσμο στο υποσέλιδο.

Συχνές ερωτήσεις

Μπορώ να ανακτήσω τον αρχικό πηγαίο κώδικα από ένα ελαχιστοποιημένο αρχείο;

Όχι πλήρως, και να είστε επιφυλακτικοί με οποιοδήποτε εργαλείο υπόσχεται το αντίθετο. Η ελαχιστοποίηση διαγράφει οριστικά τα σχόλια και συνήθως μετονομάζει τις μεταβλητές σε μεμονωμένα γράμματα, οπότε αυτές οι πληροφορίες δεν υπάρχουν πλέον στο αρχείο. Το LFUnminify επαναφέρει τη δομή, τις εσοχές και τις αλλαγές γραμμής ώστε ο κώδικας να διαβάζεται ξανά, αλλά δεν μπορεί να αναδημιουργήσει ονόματα ή σχόλια που απορρίφθηκαν κατά την παραγωγή. Αν έχει δημοσιευτεί source map μαζί με το πακέτο, αυτός είναι ο μόνος τρόπος να ανακτήσετε τον πραγματικό αρχικό κώδικα.

Στέλνεται ο κώδικάς μου σε διακομιστή;

Όχι. Η μορφοποίηση εκτελείται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας με JavaScript που φορτώθηκε μαζί με τη σελίδα. Τίποτα δεν μεταφορτώνεται, δεν αποθηκεύεται ούτε καταγράφεται. Ο διακομιστής μας επίσης δεν ανακτά αρχεία για εσάς. Αν θέλετε να εξετάσετε ένα αρχείο από κάποιον ιστότοπο, το αντιγράφετε ή το αποθηκεύετε μόνοι σας και το ανοίγετε εδώ, οπότε όλη η επεξεργασία παραμένει ανάμεσα σε εσάς και το πρόγραμμα περιήγησής σας.

Ποιες μορφές υποστηρίζονται;

JavaScript, CSS, HTML, XML και JSON. Η μορφή αναγνωρίζεται αυτόματα από το περιεχόμενο, χωρίς να χρειάζεται επιλογή, και κάθε γλώσσα επεξεργάζεται από τον κατάλληλο αναλυτή. Η JavaScript καλύπτει σύγχρονη σύνταξη, όπως ES modules και JSX, η CSS περιλαμβάνει προσαρμοσμένες ιδιότητες και ένθετους κανόνες, ενώ η XML καλύπτει από χάρτες ιστοτόπων και ροές RSS έως αρχεία SVG.

Υπάρχει όριο μεγέθους;

Δεν υπάρχει αυστηρό όριο στο περιεχόμενο που επικολλάτε, αν και τα πολύ μεγάλα αρχεία απαιτούν περισσότερο χρόνο, επειδή η εργασία γίνεται στον δικό σας επεξεργαστή και όχι σε διακομιστή. Πακέτα μερικών megabyte μορφοποιούνται άνετα σε έναν συνηθισμένο φορητό υπολογιστή. Ο ίδιος κανόνας ισχύει για αρχεία που ανοίγετε με την Επιλογή αρχείου ή σύρετε στην περιοχή εισόδου, καθώς διαβάζονται τοπικά και δεν μεταφορτώνονται.

Ποια είναι η διαφορά ανάμεσα στο unminify και στο beautify;

Στην πράξη οι δύο όροι περιγράφουν την ίδια ενέργεια και αυτό το εργαλείο την εκτελεί ενιαία. Το unminify συνήθως σημαίνει αναίρεση της συμπύκνωσης που έγινε κατά την παραγωγή ενός αρχείου, ενώ το beautify αναφέρεται στη μορφοποίηση οποιουδήποτε κώδικα, ελαχιστοποιημένου ή όχι, με συνεπείς κανόνες εμφάνισης. Επειδή το LFUnminify εφαρμόζει το Prettier στο περιεχόμενο εισόδου, μπορείτε να το χρησιμοποιήσετε και για να διορθώσετε πρόχειρες εσοχές σε κώδικα που δεν ελαχιστοποιήθηκε ποτέ.

Μπορώ να το χρησιμοποιήσω σε σκόπιμα δυσνόητη JavaScript;

Μπορείτε να τη μορφοποιήσετε, κάτι που συχνά είναι χρήσιμο πρώτο βήμα, αλλά η μορφοποίηση δεν αναιρεί το obfuscation. Τα σχετικά εργαλεία προχωρούν πέρα από την ελαχιστοποίηση: κωδικοποιούν συμβολοσειρές, διασπούν τη ροή ελέγχου και προσθέτουν σκόπιμα ανενεργό κώδικα. Η μορφοποίηση ενός τέτοιου αρχείου δίνει ευανάγνωστη δομή και διευκολύνει την παρακολούθηση της λογικής, όμως οι σκόπιμοι μηχανισμοί παραπλάνησης παραμένουν στη θέση τους.