Форматирование JavaScript онлайн
Вставьте минифицированный файл .js, бандл webpack или однострочный фрагмент и получите JavaScript с аккуратными отступами в правой панели. Код форматирует Prettier прямо в браузере, без отправки данных на сервер.
Почему JavaScript становится нечитаемым
Любой современный процесс сборки минифицирует JavaScript перед публикацией. Terser, esbuild, SWC и аналогичные инструменты удаляют пробелы и комментарии, затем сокращают имена локальных переменных и функций до одной буквы, сворачивают вложенные блоки в цепочки выражений и объединяют приложение в один или два файла. React-приложение из трёхсот понятных исходных файлов приходит в браузер одной строкой размером в несколько сотен килобайт. Код работает как прежде, но при попытке прочитать его вы видите сплошной текст без удобных структурных ориентиров.
Что возвращает форматирование
Форматирование бандла возвращает то, что помогает ориентироваться в коде. Инструкции снова занимают отдельные строки, и искать место ошибки удобнее, чем разбирать ссылку на строку 1, столбец 24815. Отступы показывают, где начинается и заканчивается функция, какую ветку защищает условие и как устроена цепочка обратных вызовов. Строки, URL и имена конечных точек становятся заметны при просмотре. Именно это обычно нужно при проверке стороннего скрипта, а не отладке собственного приложения.
Поддерживается современный синтаксис
Форматтер разбирает современный JavaScript, а не ограниченный набор возможностей десятилетней давности. Стрелочные функции, классы, async и await, генераторы, optional chaining, nullish coalescing, шаблонные строки, деструктуризация, spread-синтаксис, динамические импорты и ES-модули форматируются корректно. Поддерживается и JSX, что полезно при изучении React-компонента, у которого этот синтаксис сохранился после компиляции. За результат отвечает Prettier, поэтому оформление соответствует привычным правилам вашего редактора.
Ограничения инструмента
Деминификация сама по себе не восстанавливает исходный проект. Минификатор удалил комментарии и переименовал переменные, и ни один форматтер не угадает, что переменная n раньше называлась remainingRetries. Если проект публикует карту исходного кода, откройте её в инструментах разработчика браузера: это единственный путь к настоящему оригиналу. Если же файл намеренно обфусцирован, а не просто минифицирован, структура станет читаемой, но смысл искусственно запутанной логики сам собой не прояснится.
Частые вопросы
Можно ли отформатировать бандл webpack или Vite?
Да. Вставьте бандл или выберите его кнопкой «Открыть файл», и он будет обработан как любой JavaScript. Большие бандлы занимают несколько секунд, поскольку работа выполняется на вашем компьютере. После расстановки отступов становится проще видеть структуру модулей.
Устраняет ли инструмент обфускацию JavaScript?
Он форматирует обфусцированный код, делая его гораздо удобнее для чтения, но не отменяет саму обфускацию. Закодированные строки, искусственно усложнённый поток управления и намеренно добавленный неиспользуемый код остаются на своих местах.
Может ли форматирование нарушить работу кода?
Форматтер стремится сохранить поведение JavaScript, применяя единый стиль. Пунктуация, кавычки и расположение кода могут измениться, поэтому результат не является побайтовой копией. Сохраните оригинал, проверьте результат и запустите тесты проекта, прежде чем использовать изменённый или отформатированный бандл на рабочем сайте.