Tiny Online Tools logoTiny Online ToolssearchПоиск инструментов…grid_viewВсе инструменты
Главнаяchevron_rightИнструменты обратной разработкиchevron_rightИнспектор Webpack-бандлаИнспектор Webpack-бандла

Инспектор Webpack-бандла

Определяет загрузчик рантайма webpack, карту модулей и метаданные chunk-push по форме AST, показывает реальный исходный код каждого модуля и прямо сообщает, если файл не является продуктом webpack.

Источник бандлаВставить кодЗагрузить файл

Похожие инструменты

Визуализатор Зависимостей JS-бандла

Визуализатор Зависимостей JS-бандла

Находит границы модулей внутри бандла webpack, Rollup, esbuild или Vite и показывает, какой модуль зависит от какого — по реальной форме AST, а не по угадыванию текста.

WASM Визуализатор Импорта/Экспорта

WASM Визуализатор Импорта/Экспорта

Узнайте, что модулю WebAssembly нужно от хоста и что он предлагает взамен, сгруппировано по пространству имён, бок о бок.

Анализатор размера по Source Map

Анализатор размера по Source Map

Распределите байты бандла по исходным файлам и папкам, которые их произвели, с помощью его файла .map — узнайте, что действительно занимает место.

WASM Бинарный Проводник

WASM Бинарный Проводник

Просматривайте секции, функции, импорты, экспорты, память, таблицы и глобальные переменные модуля WebAssembly с точными смещениями и размерами в байтах.

Конвертер аудиоканалов

Конвертер аудиоканалов

Конвертер аудиоканалов помогает свести стерео в моно или выделить один канал прямо в браузере. Используйте его для быстрой и приватной подготовки медиа, публикаций, уроков, демонстраций и повседневного редактирования.

Анализатор размера WASM

Анализатор размера WASM

Узнайте, какие функции и сегменты данных занимают больше всего места в модуле WebAssembly — с точной сортированной разбивкой и визуальной картой-treemap.

Инструмент 3D-трансформаций

Инструмент 3D-трансформаций

Перемещайте, вращайте, масштабируйте, центрируйте и ставьте на плоскость любую 3D-модель — преобразование запекается в геометрию.

apps

Больше инструментов

Просмотрите нашу полную коллекцию бесплатных онлайн-инструментов.

Что проверяет этот инструмент

Большая часть веба всё ещё отдаёт продукт webpack, и его структуру стоит понимать саму по себе — отдельно от общего, не зависящего от сборщика графа зависимостей, который строит Визуализатор Зависимостей JS-бандла. Этот инструмент ищет именно составные части бандла webpack:

  • Загрузчик рантайма — функция в форме __webpack_require__, которую несёт каждая сборка webpack, обнаруживается по точному механизму вызова модуля (modules[moduleId].call(module.exports, module, module.exports, require)), а не поиском буквального имени. Этот механизм переживает полное переименование идентификаторов, так что он срабатывает и в сборке, где все имена минифицированы.
  • Карта модулей — либо в классической форме объекта ({0: fn, 1: fn, ...}), либо в форме массива ([fn, fn, ...]), которую по умолчанию используют более новые версии webpack.
  • Метаданные chunk-push — для сборок с разбиением кода вызов (self.webpackChunkXxx = self.webpackChunkXxx || []).push([[chunkIds], {modules}, runtime]), из которого извлекаются имя и id чанка.
  • Вспомогательные функции рантайма — какие из .m (карта модулей), .c (кэш модулей), .d (define getter), .o (hasOwnProperty), .n (getter экспорта по умолчанию), .s (id входного модуля) и .p (публичный путь) присутствуют.

Выберите любой модуль в списке, чтобы увидеть его реальный исходный код в панели с подсветкой синтаксиса — без выполнения, только текст, который сам webpack обернул вокруг этого модуля.

Когда это не webpack

Если не найдены ни рантайм, ни карта модулей, инструмент сообщает «это не похоже на продукт webpack» вместо навязывания догадки и добавляет простую честную подсказку, если она доступна — комментарий //# sourceMappingURL= или то, что файл разбирается как ES-модуль (типично для продукта Rollup, esbuild и Vite).

Известное ограничение

Бандл, прошедший через webpack, а затем через второй, более агрессивный проход минификации, который переименовывает и имена свойств самого рантайма, может проскочить мимо проверки формы .call() и быть отмечен как не-webpack. Это осознанный компромисс: редкий ложноотрицательный результат лучше, чем выдумывание карты модулей, которой на самом деле нет.

Приватность

Всё выполняется в браузере через настоящий парсер JavaScript (acorn). Вставленный или загруженный файл никуда не отправляется.