Что такое формат файла MAP?
Файл .map - это текстовый JSON документ, который связывает минифицированный или скомпилированный результат - бандл .js или скомпилированную таблицу стилей CSS - с оригинальным человекочитаемым исходным кодом. Инструменты сборки, такие как webpack, Vite, esbuild и компилятор TypeScript (tsc), генерируют файлы .map автоматически вместе с выходными данными.
Формат был стандартизирован как Source Map Revision 3 примерно в 2011 году и сейчас повсеместно поддерживается во всех основных конвейерах сборки JavaScript и CSS. Карта исходного кода располагается рядом с файлом, который она описывает: app.js создает app.js.map, styles.css создает styles.css.map, а минифицированный файл ссылается на нее через замыкающий комментарий: //# sourceMappingURL=app.js.map (или /*# sourceMappingURL=styles.css.map */ для CSS).
Сердцем каждой карты исходников является поле mappings: компактная строка в кодировке Base64 VLQ, которая записывает посегментный перевод каждой позиции символа в выходном файле обратно в соответствующую строку и столбец в исходном коде. Другие поля содержат пути к исходным файлам (sources), опционально полный текст исходного кода (sourcesContent) и имена символов (names).
Инструменты разработчика в браузерах - Chrome DevTools, Firefox Developer Tools и Safari Web Inspector - используют файлы .map прозрачно для пользователя. Разработчики могут устанавливать точки останова в TypeScript или SCSS и пошагово проходить по оригинальному коду, даже если браузер выполняет минифицированный результат. Файл .map запрашивается только при открытом DevTools; он не создает дополнительной нагрузки при обычном просмотре страниц.
Безопасность и защита
РИСК: LOWКарта исходного кода - это пассивный JSON, она не исполняет код, поэтому ее открытие безопасно. Реальная проблема для разработчиков заключается в конфиденциальности: карты, попавшие на продакшн, могут раскрыть ваш оригинальный неминифицированный код, а иногда и комментарии, пути к файлам или содержимое sourcesContent любому пользователю DevTools. Многие команды намеренно удаляют или блокируют файлы .map на публичных серверах по этой причине. Если вы обнаружили лишние файлы .map на рабочем сайте, это может быть утечкой информации, которую стоит устранить.
Детали формата
в двух словах- Данные MapInfo GIS (.map + .tab) - Бинарное хранилище геометрии для таблицы MapInfo; открывается через сопутствующий файл .tab в QGIS или MapInfo Pro, а не самостоятельно.
- Карта игрового уровня - Текстовая геометрия уровня из редакторов id Tech / Quake / Source / Radiant, компилируемая в бинарный уровень (например, .bsp) для игры.
- Карта компоновщика / отладки - Текстовый список адресов символов и макета памяти, создаваемый компилятором/компоновщиком для отладки сбоев.
Программы, открывающие файлы MAP
Windows3 apps
Visual Studio Code
Бесплатно Откройте .map для чтения JSON. VS Code также автоматически использует карты исходного кода при отладке соответствующего минифицированного JS/CSS. 
Browser DevTools (Chrome / Edge / Firefox)
Встроенная Загрузите страницу, откройте DevTools - браузер получит .map рядом с минифицированным файлом и автоматически покажет исходный код. Основной способ «использования» карт.
Notepad++ (built-in / any text editor)
Открытый код Откройте .map как текст, чтобы убедиться, что это карта исходного кода (JSON с «"version":3»), и изучите список источников. 
macOS2 apps
Visual Studio Code
Бесплатно Откройте .map для чтения JSON. VS Code также автоматически использует карты исходного кода при отладке соответствующего минифицированного JS/CSS.
Browser DevTools (Safari / Chrome / Firefox)
Встроенная Откройте DevTools на странице; браузер автоматически применит .map для отображения исходного кода. 
Linux2 apps
Browser DevTools (Chrome / Firefox)
Встроенная Откройте DevTools; карта будет получена и применена рядом с минифицированным файлом автоматически. Технические подробности
глубокая спецификация| Тип формата | Текстовый JSON (UTF-8); без бинарных сигнатур |
| Спецификация | Source Map Revision 3 (v3) |
| MIME-тип | application/json |
| Кодирование сопоставлений | Base64 VLQ (Variable-Length Quantity) - кодирует смещения строк и столбцов для каждого выходного сегмента |
| Обязательные поля JSON | version (должно быть равно 3), sources (массив путей к исходным файлам), mappings (строка в кодировке VLQ) |
| Необязательные поля JSON | sourcesContent (встроенный текст оригинала), names (список символов), sourceRoot (префикс пути для всех источников) |
| Соглашение об именовании | Имя выходного файла с добавлением .map: app.js → app.js.map, styles.css → styles.css.map |
| Комментарий ссылки (JS) | //# sourceMappingURL=filename.js.map - добавляется в последнюю строку минифицированного файла |
| Комментарий ссылки (CSS) | /*# sourceMappingURL=filename.css.map */ - добавляется в конец скомпилированной таблицы стилей |
| Типичные генераторы | webpack, Vite, esbuild, TypeScript compiler (tsc), Dart Sass, Rollup, Parcel |
| Используется в | Browser DevTools: Chrome DevTools, Firefox Developer Tools, Safari Web Inspector, Edge DevTools |
| Точность сопоставления | На уровне столбцов: каждый сегмент VLQ сопоставляет один выходной столбец со строкой и столбцом источника |
| Размер файла | Обычно в 2-10 раз больше размера минифицированного файла; увеличивается при встраивании sourcesContent |
| Альтернатива через HTTP | Заголовок ответа X-SourceMap (устарело; предпочтительным методом является встроенный комментарий) |
| Активация DevTools | Запрашивается только при открытых инструментах разработчика; не загружается при обычном просмотре страницы |
| Выпущен | Source Map format v3 (~2011); ubiquitous with modern JS/CSS build tooling |
| Открыть стандартное | Да · без роялти |
| Спецификация | sourcemaps.info |
Конвертации MAP
Вопросы и ответы сообщества
спрошено пользователямиВопросов пока нет - станьте первым, кто спросит о файлах MAP.
