Сделайте сжатый код читаемым онлайн

Форматирование нужного типа кода

Для каждого формата есть отдельная страница с подробностями, важными именно для этого языка:

• Форматировать JavaScriptJavaScript
• Форматировать CSSCSS
• Форматировать HTMLHTML
• Форматировать XMLXML
• Форматировать JSONJSON

Что такое минификация кода?

Разработчики пишут код так, чтобы его понимали другие разработчики. Для этого нужны комментарии, отступы, пустые строки между блоками и имена переменных, объясняющие, что в них хранится. Всё это помогает человеку, но не нужно браузеру. Минификация, один из этапов сборки, убирает всё лишнее для машины: пробелы, переносы строк, комментарии, а нередко и исходные имена переменных и функций, заменяя их одной буквой. Поведение программы остаётся прежним, меняется только её внешний вид.

Польза вполне ощутима. Минифицированный JavaScript-бандл часто на 30–70 процентов меньше исходного кода: по сети передаётся меньше данных, страница быстрее появляется на экране, улучшаются Core Web Vitals. Поэтому почти все рабочие сайты отдают минифицированные JS, CSS и HTML. Обратная сторона в том, что скачанный с сайта файл выглядит как одна плотная строка, которую невозможно читать. Чтобы разобраться в таком файле, найти ошибку или проверить его действия, сначала нужно восстановить удобное форматирование.

Что делает этот инструмент?

LFUnminify берёт минифицированный код и восстанавливает его читаемую структуру. Он добавляет отступы, размещает инструкции на отдельных строках, расставляет пробелы между блоками и операторами и применяет единые правила форматирования для определённого языка. Бандл из одной строки длиной в четыре тысячи символов превращается в несколько сотен строк с понятной вложенностью. Такой код уже можно просматривать, искать в нём нужные места и понимать его логику.

В основе работает Prettier, форматтер, которым уже пользуется большинство JavaScript-команд. Он запускается прямо в браузере. Поэтому результат выглядит так же, как обычный исходный файл после форматирования в вашем редакторе, и не требует привыкания. Формат определяется автоматически: вставьте код, а инструмент сам выяснит, JavaScript это, CSS, HTML, XML или JSON, и обработает его соответствующим образом.

Есть ограничение, о котором стоит сказать сразу. Деминификация не является декомпиляцией. Комментарии, исходные имена переменных и заметки разработчиков удаляются при сборке, и вернуть их не может ни один инструмент. Вы получите хорошо структурированный код, в котором удобно ориентироваться, но короткие имена минификатора останутся. На практике этого достаточно, чтобы проследить логику, найти функцию или понять, какие данные и куда отправляет скрипт.

Поддерживаемые форматы кода

Один редактор, пять языков. LFUnminify изучает вставленный текст, определяет язык и передаёт код анализатору, предназначенному для этого синтаксиса. Выбирать формат в меню не требуется, а неверное расширение файла не помешает обработке:

• JavaScript, включая ES6 и более новый синтаксис, модули, асинхронный код и JSX. Типичный пример: бандл, собранный webpack, Vite, esbuild или Terser.
• CSS, включая современный синтаксис, пользовательские свойства, медиазапросы и вложенные правила. Подходит для таблиц стилей, собранных Tailwind, Sass или PostCSS.
• HTML, включая встроенные блоки script и style: они форматируются вместе с разметкой, а не остаются одной длинной строкой.
• XML, включая карты сайта, RSS-ленты, файлы SVG, SOAP-сообщения и конфигурационные файлы без единого переноса строки.
• JSON, включая глубоко вложенные ответы API, манифесты пакетов, конфигурационные файлы и данные из журналов событий.

Когда нужно форматировать сжатый код

Обычно код форматируют не из простого любопытства. Это быстрый способ ответить на конкретный вопрос о чужом коде или о собственном коде, который после сборки стало невозможно читать:

• Поиск ошибки в рабочей версии. Стек вызовов указывает на строку 1, столбец 24815 в бандле. Форматирование даёт удобные номера строк и помогает найти функцию, в которой возникло исключение.
• Проверка стороннего скрипта. Прежде чем добавить на сайт аналитику, виджет чата или партнёрский скрипт, отформатируйте его и изучите, какие данные он собирает, к каким доменам обращается и что записывает в хранилище.
• Чтение собранной таблицы стилей. Утилитарные CSS-фреймворки создают огромные однострочные файлы. После форматирования виден каскад, можно найти побеждающее правило и понять, почему ваше переопределение не применяется.
• Просмотр ответа API. JSON, скопированный с вкладки сети, сложно читать без форматирования. После расстановки отступов структура, вложенность и отсутствующее поле становятся заметны за несколько секунд.
• Обучение на реальном коде. Изучая, как качественная библиотека решает задачу, можно быстро улучшить свои навыки. А удобно прочитать её собранный файл можно только после форматирования.

Как пользоваться LFUnminify

Код можно добавить тремя способами. Вставьте его прямо в левую панель, нажмите «Открыть файл», чтобы выбрать файл на компьютере, или перетащите файл в область ввода. Если нужно изучить ресурс работающего сайта, откройте исходный код через view-source или инструменты разработчика, скопируйте его и вставьте сюда. Другой вариант: сохраните файл .js, .css, .html, .xml или .json и откройте его кнопкой выбора файла.

Форматирование начинается автоматически, искать кнопку запуска не нужно. Инструмент ждёт, пока вы закончите ввод, определяет язык и выводит отформатированный результат в правой панели с подсветкой синтаксиса. Затем весь результат можно скопировать в буфер обмена одним нажатием или скачать как файл с подходящим именем и открыть в своём редакторе.

С большими файлами помогают две небольшие возможности. Включите номера строк, если нужно сослаться на конкретное место или сравнить две версии рядом: настройка сохранится до следующего посещения. Если определённый формат отличается от ожидаемого, это тоже подсказка. Файл, который распознаётся как JavaScript вместо JSON, часто оказывается ответом JSONP или конфигурацией, обёрнутой в операцию присваивания.

Ваш код остаётся на вашем компьютере

Это важно, поэтому объясним прямо. Форматирование выполняется локально, в браузере, с помощью JavaScript, который загружается вместе со страницей. Код не отправляется на сервер, не попадает в очередь обработки, не записывается в базу данных и нигде не журналируется. После загрузки страницы можно отключить сеть, и инструмент продолжит работать. Это самый простой способ убедиться, что данные никуда не уходят.

Вы можете вставлять закрытый код, внутренний бандл, проект клиента или конфигурацию со структурой, которой не хотите делиться. Всё, что вы вставляете или открываете, остаётся в браузере. Инструмент также не скачивает файлы от вашего имени, поэтому наш сервер не узнаёт, какой код и какие сайты вы изучаете. Создавать учётную запись не требуется, содержимое вставленного кода не отслеживается.

Почему LFUnminify бесплатный?

LFUnminify входит в семейство бесплатных инструментов Ludovic Frank вместе с генератором паролей, генератором favicon, редактором цветовых палитр и другими сервисами. Идея проста: небольшие утилиты, которыми разработчики пользуются несколько раз в неделю, должны быть доступны без регистрации, рекламных барьеров и лимитов. Здесь нет учётных записей, квот и предложений купить расширенную версию внутри продукта.

Кроме того, это практическая демонстрация нашей работы. Каждый инструмент представляет собой настоящее приложение, которое создаётся и поддерживается так же, как клиентские проекты. Такой пример говорит о подходе к разработке больше, чем страница портфолио. Если вам нужна индивидуальная веб-разработка, серьёзное приложение вместо шаблонного решения или техническая консультация, контакты доступны по ссылке внизу страницы.

Частые вопросы