How devtools map minified JS code back to your TypeScript source code
Source maps — это механизм, позволяющий браузеру отображать минифицированный JavaScript обратно на исходный код с правильными именами переменных и форматированием. Когда вы видите ошибку в bundle.min.js:1:27698, source maps переводят её в src/index.ts:73:16, показывая точное место возникновения проблемы в оригинальном TypeScript коде. Этот процесс работает на трёх этапах сборки: транспиляция TypeScript в JavaScript, бандлинг модулей в один файл и минификация, где на каждом шаге сохраняется связь с исходным кодом.
Формат source maps — это JSON-файл с расширением .js.map, где ключевое поле mappings использует VLQ-кодирование для сжатия данных о позициях. Каждое сегмент в mappings содержит информацию о связи между сгенерированным кодом и оригиналом: путь к исходному файлу, строку и столбец, а также оригинальное имя переменной или функции. Это позволяет DevTools эффективно отображать отладочную информацию, несмотря на значительное отличие между минифицированным и исходным кодом.