Как разминифицировать JavaScript: утилиты для командной строки

Быстрый ответ

Для быстрой трансформации минифицированного JavaScript кода в удобочитаемый формат, используйте функцию «Прекрасное отображение» (Pretty Print) в Инструментах разработчика Chrome (Chrome DevTools) или утилиту uglify-js, при работе с Node.js:

1. Нажмите F12 для вызова Инструментов разработчика и перейдите на вкладку "Источники".
2. Выберите минифицированный файл .js.
3. Кликните по иконке {} внизу экрана для форматирования кода.

В альтернативе, примените следующую команду в терминале:

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), создающим проблемы, заключите его в {} перед использованием прекрасного отображения.

Полезные материалы

1. Онлайн красивое форматирование JavaScript — мультифункциональное решение для улучшения вашего JavaScript кода.
2. Декомпрессия JS, CSS, HTML, XML и JSON файлов — весьма полезный инструмент для декомпрессии файлов.
3. Использование карт источников — Документация по Инструментам разработчика Firefox — детальная информация о том, как использовать карты источников с помощью Инструментов разработчика Firefox.
4. Инструменты разработчика Chrome — официальная документация по Инструментам разработчика Chrome, неоценимый ресурс для любого разработчика.
5. GitHub – mishoo/UglifyJS — подборка полезных инструментов для работы с JavaScript.
6. Babel — опробуйте компиляцию современного JavaScript прямо в браузере с помощью Babel.
7. de4js — инструмент для деобфускации и распаковки JavaScript кода.