Перейти к основному содержанию
iotools.cloudiotools.cloud

Декодер карт источника JavaScript

Декодируйте Base64 VLQ-отображения файла .map, чтобы найти исходный источник, строку и столбец за минифицированной позицией, просмотрите полную таблицу отображений сгенерированного на исходный или переобозначьте весь минифицированный трассировщик стека обратно на ваш источник.

Ввод

Drop a file or browse
One file · text
Или

Содержимое файла .map или JSON, декодированный из встроенного данных //# sourceMappingURL= URI.

На основе 1, как показано в редакторе кода или трассировщике стека браузера — первый символ в строке — это столбец 1.

Вывод

Исходная позиция
Это было полезно?

Руководства

Когда бандлер минифицирует ваш JavaScript, он создает файл .map рядом с ним — документ JSON, который отображает каждую позицию в минифицированном выводе обратно в строку и столбец в вашем исходном коде. Чтение этого отображения вручную означает декодирование сегментов Base64 VLQ (Variable-Length Quantity), упакованных в поле mappings карты, что является именно тем бинарным алгоритмическим трудом, который выполняет этот инструмент.

Как использовать

Вставьте содержимое файла .map (или загрузите его напрямую) в поле карты источника, а затем выберите режим:

  • Поиск позиции — введите минифицированные строку и столбец (как показано в DevTools вашего браузера или в просмотрщике минифицированного кода) чтобы получить исходный файл, строку, столбец и фрагмент окружающего исходного кода.
  • Полная таблица отображений — просмотрите каждое отображение от сгенерированного к исходному, которое содержит карта источника, одна строка на сегмент.
  • Переобозначить трассировщик стека — вставьте весь минифицированный трассировщик стека и получите тот же трассировщик со всеми распознаваемыми file:line:column переписанными на исходное местоположение.

Где найти карту источника

Большинство бандлеров (webpack, esbuild, Vite, Rollup, Terser) могут создать её автоматически — ищите комментарий //# sourceMappingURL= в конце минифицированного файла. Если он указывает на URL .map, получите содержимое этого файла; если это встроенный URI data:application/json;base64,..., декодируйте Base64 и вставьте полученный JSON здесь.

Часто задаваемые вопросы

Почему поиск позиции требует строку/столбец на основе 1?

Потому что это то, что вы видите везде — индикатор строки/столбца редактора кода, DevTools браузера и трассировщик стека JavaScript начинают отсчет с 1. Инструмент внутренне преобразует в столбец на основе 0, который фактически используют карты источников, поэтому вам никогда не нужно выполнять эту математику самостоятельно.

Фрагмент контекста всегда появляется?

Только когда карта источника содержит содержимое исходного файла (sourcesContent). Некоторые инструменты сборки исключают его, чтобы сохранить карту компактной — без него инструмент по-прежнему может сообщить точный исходный файл, строку и столбец, просто без предпросмотра кода.

Что если мой трассировщик стека охватывает несколько файлов?

Этот инструмент применяет одну вставленную карту источника к каждому кадру, из которого может разобрать file:line:column — само имя файла не совпадает, поэтому хорошо работает для трассировщика стека полностью из одного пакета. Для трассировщика стека охватывающего несколько упакованных файлов переобозначьте его несколько кадров за раз, используя карту источника для файла, которому принадлежит каждый кадр.

Мой код не минифицирован — я просто хочу его прочитать

Для неминифицированного уже читаемого кода, который вы хотите переформатировать, используйте вместо этого Форматер кода JavaScript. Чтобы пойти в другую сторону — уменьшите свой источник до минифицированного файла, который карта источника декодирует обратно — см. Минификатор JavaScript.

Конфиденциальность

Все выполняется в вашем браузере — карта источника, трассировщик стека и любой файл, который вы загружаете, никогда не покидают ваше устройство.

sourcemapvlqwebpackbabelterserminifiedstack traceunminifydebugging

Другие способы использовать этот инструмент

REST API

curl -X POST https://api.iotools.cloud/v1/tool/source-map-decoder \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "mode": "position",
    "sourceMapText": "{\"version\":3,\"sources\":[\"src.js\"],\"sourcesConten…",
    "minifiedLine": "1",
    "minifiedColumn": "21",
    "contextLines": "1"
  }'

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

Спросите у ИИ-агента

Use the IOTools `source-map-decoder` tool (JavaScript Source Map Decoder) on this input:

YOUR_INPUT_HERE

Вставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.

Виджет для встраивания

<iframe
  src="https://iotools.cloud/embed/source-map-decoder/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Декодер карт источника JavaScript — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.

Стоимость вызоваОт 5 кредитов

Также доступно через

ИнтеграцииРасширение для браузераРасширение для VS Code

Нравятся инструменты? Уберите рекламу.

Один платёж навсегда убирает всю рекламу с вашего аккаунта. Без подписки, без слежки.

Убрать рекламу