Files, Binary & Compression

Декодер source mapот минифицированного стека к исходной строке

Вставьте файл .map (или JS со встроенной картой), затем введите строку:столбец или целый стек вызовов — и увидите исходный файл, строку и код.

АвтоанализПример:

Source map

{
  "version": 3,
  "sources": [
    "webpack://shop/./src/format.ts",
    "webpack://shop/./src/cart.ts",
    "webpack://shop/./src/main.ts"
  ],
  "sourcesContent": [
    "export function formatPrice(value: number): string {\n  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);\n}\n",
    "import { formatPrice } from './format';\n\nexport interface LineItem {\n  sku: string;\n  price: number;\n  quantity: number;\n}\n\nexport function cartTotal(items: LineItem[]): string {\n  const sum = items.reduce((acc, item) => acc + item.price * item.quantity, 0);\n  const discount = items[0].coupon.percent / 100;\n  return formatPrice(sum * (1 - discount));\n}\n",
    "import { cartTotal } from './cart';\n\nconst cart = JSON.parse(localStorage.getItem('cart') ?? '[]');\ndocument.querySelector('#total')!.textContent = cartTotal(cart);\n"
  ],
  "mappings": "MAAO,SAASA,EAAYC,EAAuB,CACjD,OAAO,IAAI,KAAK,aAAa,QAAS,CAAE,MAAO,WAAY,SAAU,KAAM,CAAC,EAAE,OAAOA,CAAK,CAC5F,CCMO,SAASC,EAAUC,EAA2B,CACnD,IAAMC,EAAMD,EAAM,OAAO,CAACE,EAAKC,IAASD,EAAMC,EAAK,MAAQA,EAAK,SAAU,CAAC,EACrEC,EAAWJ,EAAM,CAAC,EAAE,OAAO,QAAU,IAC3C,OAAOK,EAAYJ,GAAO,EAAIG,EAAS,CACzC,CCVA,IAAME,EAAO,KAAK,MAAM,aAAa,QAAQ,MAAM,GAAK,IAAI,EAC5D,SAAS,cAAc,QAAQ,EAAG,YAAcC,EAAUD,CAAI",
  "names": [
    "formatPrice",
    "value",
    "cartTotal",
    "items",
    "sum",
    "acc",
    "item",
    "discount",
    "formatPrice",
    "cart",
    "cartTotal"
  ],
  "file": "app.js"
}

Позиции в собранном коде (строка:столбец или стек вызовов)

Разбирается в этой вкладке. Удалённые исходники и внешние sourceMappingURL никогда не загружаются.

Результат

Поиск позицииИсходникиСопоставления

Ввод изменился — разбор запустится автоматически…

Столбцы с 1

В отчёте об ошибке с продакшена есть только app.3f2a.js:1:20931 — первая строка, двадцатитысячный столбец минифицированного бандла. Файл .map из той же сборки точно знает, какая это строка какого .ts- или .jsx-файла, но поле mappings закодировано в Base64 VLQ и глазами не читается. Декодер source map выполняет разбор mappings VLQ и поиск за вас, так что не нужно писать одноразовый скрипт с библиотекой source-map.

Он пригодится, когда в системе отслеживания ошибок нет загруженных карт, когда на руках только артефакты CI или когда нужно проверить, что карта действительно от выложенного бандла. Им удобно и просто расшифровать source map, чтобы посмотреть на сам файл: какие sources в нём перечислены, у каких есть sourcesContent, какие попали в ignoreList и корректна ли строка mappings. В отличие от сервисов, которые разбирают карту на сервере, здесь ничего не загружается и ни один удалённый адрес не запрашивается.

Зачем нужен этот декодер source map

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

Вставьте весь стек вызовов, а не по одной позиции

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

Правила сопоставления

Слева минифицированный стек вызовов, справа каждый кадр сопоставлен с исходным файлом TypeScript и строкой, нужная строка кода подсвечена.

Увидеть и вернуть исходники, которые лежат в карте

Вкладка «Исходники» показывает каждую запись sources с учётом sourceRoot, отмечает, у каких есть sourcesContent и какие в ignoreList, и выводит встроенный код с номерами строк — удобный просмотр sourcemap без сборки. Один файл можно сохранить отдельно, все встроенные исходники — zip-архивом с папками; это выручает, когда карта осталась единственной копией кода.

Попробовать в инструменте

Список исходных файлов из карты, часть помечена как без содержимого, рядом восстановленный файл TypeScript с номерами строк и кнопка скачивания zip.

Три детали, от которых зависит точность

Передайте карту в любом виде

Вставьте JSON из .map, откройте или перетащите файл, либо вставьте собранный JS- или CSS-файл целиком: если в конце есть комментарий //# sourceMappingURL=data:…, встроенная карта будет извлечена и раскодирована (Base64 и URL-кодирование). Если комментарий указывает на обычный адрес, он будет показан, но не загружен — откройте этот .map здесь сами.

Строка защиты от XSSI )]}' в начале и UTF-8 BOM удаляются автоматически, поэтому карту, сохранённую прямо из ответа сервера, можно вставлять как есть.

Проверьте, с какого числа считаются столбцы

Позиции принимаются в виде 12:345, «12 345» или целого кадра вроде at n (https://example.com/app.js:1:177). По умолчанию столбцы считаются с 1, как в стеках Chrome, Firefox и Node. Если столбец взят из библиотеки mozilla/source-map или другого поля с отсчётом от 0, выключите «Столбцы с 1», иначе каждый результат съедет на один символ.

Строки без строки:столбца, например текст ошибки в начале стека, пропускаются и подсчитываются, а не ломают весь поиск.

Посмотрите тип совпадения и пройдите в обратную сторону

Точное совпадение значит, что с этого столбца начинается сегмент; иначе берётся ближайший сегмент слева, и результат об этом сообщает — то же правило, что в браузере и библиотеке source-map. Кнопка «Открыть в исходниках» переходит к исходной строке, где поле «Исходная строка» выполняет обратный поиск и перечисляет все позиции собранного кода, ведущие к ней.

Когда автоанализ выключен, Ctrl/Cmd+Enter запускает разбор и поиск из любого места панели.

Что декодер разбирает по частям

Каждый сегмент сопоставления

Вкладка «Сопоставления» превращает строку VLQ в таблицу: строка:столбец собранного кода → исходник, исходные строка:столбец и имя, по 100 записей, а всю таблицу можно выгрузить в TSV для таблицы или diff.

От исходной строки к собранному коду

Выберите исходник и строку, чтобы найти исходную строку по source map в обратную сторону — все позиции собранного кода, которые на неё указывают. Так видно, встроил ли минификатор строку, продублировал или выбросил.

Встроенные, индексные карты и ignoreList

Понимает встроенные data: URL, индексные карты с sections и offset, склейку с sourceRoot, а также ignoreList и старый x_google_ignoreList, чтобы отличать код фреймворка от своего.

Ошибки, которые указывают на сломанный сегмент

Некорректный JSON сообщается со строкой и столбцом; неверный символ VLQ, сегмент с неправильным числом полей или индекс исходника либо имени вне диапазона называют строку собранного кода и номер сегмента.

Что он делает и чего не делает

Ничего не загружается: Внешние ссылки sourceMappingURL, адреса http(s) в sources и секции индексной карты со ссылкой по URL показываются, но никогда не запрашиваются. Карта, исходники в ней и ваш стек остаются в этой вкладке и не пишутся ни в URL, ни в локальное хранилище.
Только версия 3, до 50 МБ: Принимается только Source Map v3; версия 2 или файл без версии отклоняются с сообщением. Ввод больше 50 МБ не принимается, а очень большая карта может ненадолго подвесить страницу во время разбора.
Поиск прижимается влево, никогда вправо: Если в столбце не начинается ни один сегмент, берётся ближайший перед ним и помечается как приблизительный. Если столбец попадает в служебный код сборщика, инструмент так и говорит — у сегмента нет исходной позиции, — а не угадывает соседнюю.
Нет sourcesContent — нет кода: Если карта собрана без sourcesContent, поиск всё равно даёт путь и позицию в исходнике, но фрагмента, предпросмотра и записи в zip не будет: исходного текста в файле просто нет.
Одна карта на поиск: Каждая карта описывает только свой бандл. Кадры из других файлов помечаются, но всё равно ищутся — прочитайте предупреждение, прежде чем доверять результату. Цветная визуализация всех сегментов, редактирование и слияние карт в задачи инструмента не входят.

Декодер source map: частые вопросы

Как по строке и столбцу в минифицированном файле найти место в исходнике?

Вставьте карту, а в поле позиций — строку:столбец или весь стек вызовов. Декодер source map по умолчанию считает столбцы с 1, как браузерные стеки. Если в этом столбце не начинается сегмент, берётся ближайший слева, и результат помечается как приблизительный.

Как устроены mappings и Base64 VLQ в source map?

Поле mappings делится точками с запятой на строки собранного кода и запятыми на сегменты. Каждый сегмент — это 1, 4 или 5 чисел в Base64 VLQ, и каждое число хранится как разница с предыдущим сегментом. Вкладка «Сопоставления» разворачивает эту строку в понятную таблицу.

Можно ли через sourcemaps подсмотреть исходный код сайта?

Да, если карта опубликована и в ней есть sourcesContent: там лежит полный текст каждого исходного файла, вместе с комментариями. Именно поэтому вкладка «Исходники» может его показать и сохранить в zip. Если sourcesContent нет, в карте только пути и позиции, и код из неё не восстановить.

Стоит ли выкладывать source map в продакшен?

Публичная карта с sourcesContent открывает ваш исходный код всем, поэтому многие команды загружают карты только в систему отслеживания ошибок или отдают их после авторизации. Проверка карты здесь риска не добавляет: разбор идёт локально, вставленные данные не покидают браузер.

Зачем нужны source maps для минифицированного JavaScript?

Минификация сжимает код в одну длинную строку с короткими именами, и стек ошибки перестаёт что-либо говорить. Карта хранит соответствие каждой позиции собранного кода месту в исходнике, поэтому отладчик и декодер source map могут показать настоящий файл, строку и имя функции.

Остался вопрос?

Откройте карту — декодер source map покажет строку

Перетащите .map из последней сборки и вставьте стек из отчёта об ошибке: декодер source map за секунды покажет исходную строку.

Вернуться к инструменту Смотреть все инструменты

Всё выполняется локально в вашем браузере.

Декодер source mapот минифицированного стека к исходной строке