Как разминифицировать JavaScript: утилиты для командной строки
Быстрый ответ
Для быстрой трансформации минифицированного JavaScript кода в удобочитаемый формат, используйте функцию «Прекрасное отображение» (Pretty Print) в Инструментах разработчика Chrome (Chrome DevTools) или утилиту uglify-js
, при работе с Node.js:
- Нажмите
F12
для вызова Инструментов разработчика и перейдите на вкладку "Источники". - Выберите минифицированный файл
.js
. - Кликните по иконке
{}
внизу экрана для форматирования кода.
В альтернативе, примените следующую команду в терминале:
npx uglify-js yourFile.min.js -b -o beautifiedFile.js
Давайте теперь подробнее рассмотрим методы распаковки.
Детальные методы распаковки
Удобные Онлайн-Инструменты
Многочисленные онлайн-сервисы, включая JSBeautifier.org
, предоставляют простую и удобную возможность преобразования минифицированного кода в форматированный и читаемый вид:
- Перейдите на сайт
JSBeautifier.org
, вставьте ваш код и нажмите кнопку «Форматировать» (Beautify).
Возможности Вашего Браузера
Браузеры располагают встроенными инструментами разработки, которые поддерживают возможность декомпрессии JS:
- Пользователи
Firefox
могут воспользоваться методомtoSource
для декомпрессии JavaScript. IE9
и более новые версии также поддерживают декомпрессию JavaScript в своих инструментах разработкиF12
.
Эти инструменты незаменимы в процессе отладки в реальном времени или в процессе разработки прямо в браузере.
Волшебство Командной Строки
Любители терминала и работы с файлами могут использовать JSBeautifier
:
# Вуаля, волшебство в действии...
js-beautify -r -o formatted.js minified.js
Эта команда выполняет декомпрессию и заменяет (-r
) минифицированный файл форматированным.
Визуализация
Визуализируем процесс с использованием эмодзи:
Сжатый JS: 🧩🔍...🧩🔍 // Настоящий кошмар для разработчика!
Распакованный JS: 🖼️✨ // Вау! Теперь всё стало понятно.
И вот наши основные помощники:
| Инструмент | Действие |
| -------------- | ----------------|
| JS Beautifier | 🧩➡️🖼️ | // Превращает кошмар в прекрасный сон
| Prettyfy | 🧩🔄🖼️ | // Исправляет кошмар
| Source Map | 🧩🗺️🖼️ | // Проложит путь сквозь кошмар, найдет сон
Эти инструменты помогают возвращать коду его естественную привлекательность и читабельность, освобождая его от минифицированного хаоса.
Полезные вещи на заметку
Отладка Используя Карты Источников
С использованием карт источников мы можем сопоставлять минифицированный код с его прекрасно форматированным аналогом:
- Разработчики могут использовать карты источников для более сложных ситуаций при отладке.
Работа с Особо Сложной Минификацией
Иногда минифицированный код может быть оптимизирован настолько глубоко, что его сложно преобразовать назад:
- Если вы столкнулись с немедленно вызываемым функциональным выражением (IIFE), создающим проблемы, заключите его в
{}
перед использованием прекрасного отображения.
Полезные материалы
- Онлайн красивое форматирование JavaScript — мультифункциональное решение для улучшения вашего JavaScript кода.
- Декомпрессия JS, CSS, HTML, XML и JSON файлов — весьма полезный инструмент для декомпрессии файлов.
- Использование карт источников — Документация по Инструментам разработчика Firefox — детальная информация о том, как использовать карты источников с помощью Инструментов разработчика Firefox.
- Инструменты разработчика Chrome — официальная документация по Инструментам разработчика Chrome, неоценимый ресурс для любого разработчика.
- GitHub – mishoo/UglifyJS — подборка полезных инструментов для работы с JavaScript.
- Babel — опробуйте компиляцию современного JavaScript прямо в браузере с помощью Babel.
- de4js — инструмент для деобфускации и распаковки JavaScript кода.