Разгънете и форматирайте кода си онлайн
Поставете минифициран JavaScript, CSS, HTML, XML или JSON и получете четим код с правилни отстъпи. Безплатно, веднага и изцяло в браузъра ви.
Разгъване на конкретен формат
Всеки формат има собствена страница с важните за съответния език подробности:
Какво е минифициране на код?
Минифицирането намалява размера на кодов файл, като премахва текст, ненужен за изпълнението, например част от интервалите, новите редове и коментарите. Инструментите за JavaScript могат също да съкращават локални имена и да пренаписват изрази. Разработчиците запазват четимите изходни файлове, а инструментите за изграждане създават компактни версии за разпространение. Целта на тези преобразувания е да запазят поведението, но точният им ефект зависи от езика, минификатора и настройките му. Затова публикуваният файл често изглежда съвсем различно от изходния код, редактиран от автора.
По-малките файлове могат да намалят обема на прехвърляните данни, особено в съчетание с мрежова компресия и кеширане. Спестеното зависи от оригиналния файл и настройките за изграждане; няма фиксиран процент или гарантирано ускоряване на страницата. Компромисът е четимостта. Когато скрипт или стилов файл пристигне като един плътен ред, проследяването на условие или намирането на селектор става трудно. Форматирането на копие създава удобен за преглед изглед, като оригиналният резултат от изграждането и настройките за доставянето му остават на разположение за сравнение.
Какво прави този инструмент за разгъване на код?
LFUnminify приема компактен код и го подрежда по-четимо. Добавя отстъпи, разстояния около блокове и оператори и нови редове според избрания форматиращ инструмент. Резултатът ви помага да проследявате вложени структури, да търсите стойност и да преглеждате функция, без да четете един плътен ред. Степента на преструктуриране зависи от входния код и разпознатия език, а не от фиксирано правило всяка инструкция да заема собствен ред.
Зад кулисите работи Prettier, форматиращият инструмент, който повечето JavaScript екипи вече използват, направо във вашия браузър. Затова резултатът съвпада с това, което собственият ви редактор би дал за обикновен изходен файл, и изглежда познат, а не машинно генериран. Разпознаването е автоматично: поставете каквото и да е и инструментът ще установи дали е JavaScript, CSS, HTML, XML или JSON, преди да го форматира по съответния начин.
Форматирането не възстановява оригиналния проект. Имена, коментари и изходни файлове, премахнати при изграждането, не могат да бъдат възстановени само чрез подреждане. Картите на изходния код (source maps) или оригиналното хранилище може да дадат липсващия контекст, но този инструмент не ги зарежда и не преобразува позициите в стека на извикванията. Резултатът е четимо работно копие за преглед с имената и структурата на програмата, останали в подадения файл.
Поддържани формати на код
Един редактор, пет езика. LFUnminify прочита съдържанието, което поставяте, установява на кой език е и го предава на анализатора, създаден за този синтаксис. Никога не се налага да избирате формат от меню, а файл с грешно разширение пак се обработва правилно:
- JavaScript, включително ES6 и по-нов синтаксис, модули, асинхронен код и JSX. Типичен случай е пакет, създаден с webpack, Vite, esbuild или Terser.
- CSS, включително съвременен синтаксис, потребителски свойства, медийни заявки и вложени правила. Подходящ за стилови файлове, компилирани с Tailwind, Sass или PostCSS.
- HTML, включително вградените блокове script и style, които се форматират заедно с маркирането, вместо да останат на един дълъг ред.
- XML, включително карти на сайтове, RSS емисии, SVG файлове, SOAP пликове и конфигурационни файлове, пристигнали без нито един нов ред.
- JSON, включително дълбоко вложени отговори от API, манифести на пакети, конфигурационни файлове и данни от журнали.
Кога ви е нужен инструмент за разгъване на код
Разгъването рядко е просто от любопитство. Обикновено то е най-бързият начин да отговорите на конкретен въпрос за чужд код или за собствен код, който вече не можете да разчетете:
- Проучване на грешка в работещ сайт. Форматирането на пакет разкрива функции и разклонения, които трудно се четат на един ред. Оригиналните позиции от стека на извикванията не се прехвърлят автоматично към новото подреждане; използвайте инструментите за отстраняване на грешки в браузъра и source maps, ако са налични.
- Проверка на външен скрипт. Преди да добавите към сайта си етикет за анализи, чат модул или партньорски скрипт, разгънете го и прочетете какво събира, с кои домейни се свързва и какво записва в хранилището.
- Четене на компилиран стилов файл. Библиотеките с помощни класове създават огромни CSS файлове на един ред. Форматирането ви позволява да видите каскадата, да намерите правилото с предимство и да разберете защо вашето предефиниране се игнорира.
- Преглед на отговор от API. JSON данните, копирани от мрежовия раздел, са трудни за четене, докато не ги форматирате. След това структурата, вложеността и липсващото поле се виждат за секунди.
- Учене от реален код. Прегледът на начина, по който добре създадена библиотека решава даден проблем, е бърз начин да напреднете, а форматираният файл прави четенето удобно.
Как да използвате LFUnminify
Има три начина да въведете код в редактора. Поставете го направо в левия панел, натиснете „Избор на файл“, за да заредите файл от компютъра си, или го плъзнете и пуснете върху входното поле. За да прегледате ресурс от работещ сайт, отворете го през изходния код на страницата или инструментите за разработчици на браузъра, копирайте го и го поставете тук. Можете също да запазите .js, .css, .html, .xml или .json файла и да го отворите чрез „Избор на файл“.
Форматирането започва само, няма нужда да търсите бутон. Инструментът изчаква да спрете да пишете, разпознава езика и показва форматирания резултат в десния панел с оцветяване на синтаксиса. Оттам можете с едно натискане да копирате целия резултат в клипборда или да го изтеглите като файл с подходящо име и да го отворите в своя редактор.
Две дребни неща, които помагат при дълги файлове. Включете номерата на редовете, когато трябва да посочите точна позиция или да сравните две версии една до друга, настройката се запомня за следващото ви посещение. А ако разпознатият формат не е този, който сте очаквали, това обикновено само по себе си е улика: файл, разпознат като JavaScript, докато сте смятали, че е JSON, често се оказва JSONP отговор или конфигурация, обвита в присвояване.
Кодът ви никога не напуска вашето устройство
Форматирането се изпълнява локално в браузъра ви чрез кода, зареден със страницата. LFUnminify не качва въведеното в редактора на сървър за форматиране, не го запазва в база данни и не изисква профил, за да го обработи. Файловете, отворени чрез избор или плъзгане и пускане, също се четат локално. След зареждането на необходимите ресурси на страницата форматирането не изисква мрежова заявка за всяка въведена порция код.
Локалната обработка е полезна, когато искате да прегледате вътрешен пакет, клиентски проект или конфигурационен файл, без да качвате съдържанието му в тази услуга. Вие контролирате отваряните файлове и изтегляните копия. Инструментът не извлича отдалечени файлове от ваше име: първо ги запазете или копирайте сами. За използване на редактора не е нужен профил, а форматирането не зависи от опашка за обработка на отдалечен сървър.
Защо LFUnminify е безплатен?
LFUnminify е част от семейство безплатни инструменти, създадени от Ludovic Frank, наред с генератор на пароли, генератор на икони за сайтове, инструмент за цветови палитри и други. Идеята е проста: малките помощни средства, които разработчиците използват по няколко пъти седмично, не бива да изискват регистрация, преминаване през реклами или налични кредити. Тук няма профили, квоти или предложения за платено надграждане вътре в продукта.
Това е и работеща демонстрация. Всеки инструмент от семейството е реално приложение, създадено и поддържано по начина, по който работим по клиентски проекти. Това показва повече за работата ни, отколкото страница с портфолио. Ако ви трябва уеб разработка по поръчка, сериозно приложение вместо шаблон или техническа консултация, ще ни намерите чрез връзката в долната част на страницата.
Често задавани въпроси
Мога ли да възстановя оригиналния изходен код от минифициран файл?
Форматирането не може да възстанови имена, коментари или изходни файлове, премахнати при минифицирането. LFUnminify добавя отстъпи и нови редове към подадения код, за да улесни прегледа на останалата структура. Оригиналното хранилище или подходящи source maps може да дадат повече контекст, но този инструмент не зарежда карти на изходния код и не възстановява оригиналния проект.
Изпраща ли се кодът ми на сървър?
Не. Форматирането се извършва изцяло в браузъра ви чрез JavaScript, зареден заедно със страницата. Нищо от кода не се качва, съхранява или записва в журнали. Нашият сървър също не извлича нищо от ваше име. Когато искате да прегледате файл от работещ сайт, сами го копирате или запазвате и го отваряте тук, така че цялата обработка остава между вас и браузъра ви.
Кои формати се поддържат?
JavaScript, CSS, HTML, XML и JSON. Форматът се разпознава автоматично по съдържанието, така че не е нужно да избирате, а всеки език се обработва от анализатора, създаден за него. JavaScript обхваща съвременния синтаксис, включително ES модулите и JSX, CSS обхваща потребителските свойства и вложените правила, а XML обхваща всичко от карти на сайтове и RSS емисии до SVG файлове.
Има ли ограничение за размера?
Редакторът не налага фиксиран лимит за входните данни, но наличната памет и скоростта на процесора имат значение. Големите файлове могат да забавят или блокират раздела на браузъра при форматиране и оцветяване. За по-лесен преглед работете с по-малка завършена част и запазете копие на оригиналния файл.
Каква е разликата между разгъване и форматиране на код?
На практика двата термина описват една и съща операция и този инструмент извършва и двете едновременно. Разгъване обикновено означава обръщане на стъпката, която е уплътнила файла при изграждане, а форматиране означава подреждане на всякакъв код, минифициран или не, по последователни стилови правила. Понеже LFUnminify прилага Prettier към входния код, можете да го използвате и за поправяне на лоши отстъпи в код, който никога не е бил минифициран.
Мога ли да го използвам за обфускиран JavaScript?
Можете да го форматирате и това често е полезна първа стъпка, но форматирането не е деобфускация. Обфускаторите отиват по-далеч от минификаторите, като кодират низове, разкъсват потока на управление и нарочно добавят неизползван код. Форматирането на такъв файл дава четима структура, с която да работите, и улеснява проследяването на логиката, но умишленото затрудняване на разбирането остава.