Source map: связь собранного кода с исходником

Назначение

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

Как это работает

Сборщик может выпускать отдельный map-файл, содержащий сведения о соответствии позиций. В зависимости от настроек карта также может включать исходный текст. Браузерные DevTools используют её для удобной отладки.

Пример

app.min.js
app.min.js.map

// Типичная ссылка в конце собранного JavaScript:
//# sourceMappingURL=app.min.js.map

Что должно получиться

Связанный map-файл помогает восстановить исходные позиции для отладки. Само наличие имён файлов в примере не создаёт корректную карту: её формирует инструмент сборки.

Граница применения и частая ошибка

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

Самостоятельная проверка

В учебном собранном проекте сравните стек ошибки с доступной картой и без неё. Изучите, какие исходники карта раскрывает, прежде чем включать её в публичный выпуск.

Связанные материалы

• Структура проекта
• Отладка CSS
• Консоль браузера