Демініфікація та форматування коду онлайн

Демініфікація окремого формату

Для кожного формату є власна сторінка з поясненнями, важливими саме для цієї мови:

• Демініфікувати 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 та відкрити його кнопкою вибору файлу.

Форматування починається автоматично, шукати спеціальну кнопку не потрібно. Інструмент чекає, поки ви припините вводити текст, визначає мову й показує відформатований результат у правій панелі з підсвічуванням синтаксису. Потім ви можете одним натисканням скопіювати весь результат до буфера обміну або завантажити файл із відповідною назвою, щоб відкрити його у своєму редакторі.

Дві дрібниці полегшують роботу з великими файлами. Увімкніть номери рядків, коли потрібно послатися на конкретне місце або порівняти дві версії поруч: налаштування збережеться до наступного відвідування. А якщо визначений формат відрізняється від очікуваного, це вже підказка. Файл, який ви вважали JSON, але який розпізнається як JavaScript, часто виявляється відповіддю JSONP або конфігурацією, обгорнутою в операцію присвоєння.

Ваш код не залишає ваш пристрій

Це варто пояснити прямо. Форматування відбувається локально у вашому браузері за допомогою JavaScript, завантаженого разом зі сторінкою. Ваш код не надсилається, не потрапляє в чергу на сервері, не записується до бази даних і ніде не журналюється. Після завантаження сторінки можна від’єднатися від мережі, а демініфікація працюватиме далі. Це найпростіший спосіб переконатися, що дані нікуди не передаються.

Тому сюди можна вставляти закритий код, внутрішню збірку, клієнтський проєкт або конфігурацію, структуру якої не хочеться розголошувати. Усе, що ви вставляєте чи відкриваєте, залишається в браузері. Інструмент також не завантажує файли від вашого імені, отже наш сервер не дізнається, який код або які сайти ви досліджуєте. Обліковий запис не потрібен, а вміст, який ви вставляєте, не відстежується.

Чому LFUnminify безкоштовний?

LFUnminify належить до родини безкоштовних інструментів Ludovic Frank разом із генератором паролів, генератором favicon, конструктором колірних палітр та іншими сервісами. Ідея проста: невеликі утиліти, які розробники використовують кілька разів на тиждень, мають бути доступні без реєстрації, рекламних бар’єрів чи ліміту кредитів. Тут немає облікових записів, квот або пропозицій придбати дорожчий тариф у самому інструменті.

Це також демонстрація нашої роботи. Кожен інструмент цієї родини є справжнім застосунком, який ми створюємо й підтримуємо так само ретельно, як клієнтські проєкти. Такий приклад говорить про наш підхід більше, ніж сторінка портфоліо. Якщо вам потрібна індивідуальна веброзробка, повноцінний застосунок замість шаблону або технічна консультація, скористайтеся посиланням унизу сторінки.

Поширені запитання