Source map to plik (zwykle z rozszerzeniem .map), który mapuje zminifikowany lub skompilowany kod na jego oryginalną postać. Dzięki niemu w narzędziach deweloperskich widać czytelne nazwy zmiennych i numery wierszy z kodu źródłowego, a nie z jednego długiego wiersza paczki.
Po co source mapy?
Kod po minifikacji i połączeniu w paczkę jest nieczytelny, a błąd w wierszu 1, kolumnie 48213 niewiele mówi. Source map pozwala debugerowi przełożyć to miejsce na konkretny plik i linię, np. Koszyk.jsx:42.
Jak włączyć source mapy?
Większość bundlerów, w tym Vite i Webpack, ma opcję ich generowania. Plik mapy jest wskazywany komentarzem na końcu skryptu //# sourceMappingURL=app.js.map i pobierany tylko wtedy, gdy narzędzia deweloperskie są otwarte.
Czy publikować je na produkcji?
Publiczne source mapy ujawniają kod źródłowy aplikacji, co jest problemem, jeśli zawiera on poufną logikę. Można je ukryć przed użytkownikami i wysyłać tylko do systemu monitorowania błędów, np. Sentry. Dla otwartego kodu publikowanie nie jest zagrożeniem.
Zobacz w praktyce
Jak debugować kod JavaScript i PHP krok po kroku 
Jak zaciemnić kod JavaScript i kiedy to ma sens 
Błędy JavaScript - jak ich skutecznie unikać?