Tiny Online Tools
Что на самом деле хранит source map
Файл .map не содержит ваш исходный код. Почти всегда в нём есть только одно: компактная таблица позиций — «сгенерированная строка 2, столбец 4110 пришли из app.js, строка 88, столбец 12, а идентификатор там назывался total». Некоторые карты идут дальше и встраивают полный текст исходного файла (sourcesContent), но это поле необязательное, и многие продакшн-карты — включая, как оказалось, карту самой jQuery — публикуются без него.
Этот инструмент читает эту таблицу напрямую, в вашем браузере, чтобы вы могли сверить её с реальностью, а не доверять на слово инструменту сборки.
Что здесь можно сделать
- Загрузить файл
.map. Сразу будет виден каждый перечисленный путь к исходнику в виде дерева, а также количество сопоставлений в карте. - Добавить сгенерированный
.js, к которому она относится (необязательно, но полезно). С ним поиск по строке/столбцу также показывает точный сгенерированный код вокруг запрошенной позиции, а клик по строке в этом фрагменте сам заполняет поле строки. - Найти любую сгенерированную позицию. Строки нумеруются с 1, столбцы — с 0, точно как в спецификации source map — то же соглашение, что внутренне используют Chrome DevTools и любой JS-инструмент. Не каждый байт бандла размечен: служебный код инициализации, обёртка модуля и вывод минификатора между токенами часто вообще не имеют сопоставления, и инструмент честно об этом сообщает, а не гадает.
- Читать исходник, когда он доступен. Кликните на любой файл в дереве, чтобы увидеть его встроенный
sourcesContent. Если у исходника нет встроенного текста — сопоставление есть, а текста нет — вы увидите явное уведомление вместо пустой панели, притворяющейся, что показывать нечего.
Почему это важно
Source map превращают трассировку ошибки, указывающую на bundle.min.js:2:184031, в трассировку, указывающую на src/components/Cart.jsx:41. Когда этот перевод выглядит неправильным — ошибка сообщается на бессмысленной строке, отладчик заходит не в тот файл — быстрее всего выяснить, сломана ли карта или подводит ваша интуиция, спросив напрямую у самой карты. Именно это и делает инструмент.
Конфиденциальность
Оба файла полностью обрабатываются в вашем браузере. Ничего никуда не отправляется.