Mapy źródeł – CSS & JS source maps

Może spotkałeś(-aś) się z plikami .map, na przykład używając bibliotek JavaScript’owych. Ten post tłumaczy, do czego one służą i dlaczego warto ich używać.

Temat: Tworzenie stron internetowych
Dział: Front-end
Poziom: Średniozaawansowany

Krótkie wprowadzenie

Kod w przeglądarce po stronie klienta nie musi być czytelny. Poniższe przykłady są równoznaczne.

p.lead,
header.lead,
header .lead {
  text-align: center;
  font-size: 2rem;
}

#navigation {
  padding: 0 20px 1em 20px;
}

header .lead,header.lead,p.lead{text-align:center;font-size:2rem}#navigation{padding:0 20px 1em}
var typeFilter = function (type, array) {
  var test = function (value) {
    return (value.length)
        ? (value[0].toLowerCase() === type.toLowerCase())
        : false;
  };
  return $filter('filter')(array, test);
};
var f=function(e,r){var t=function(r){return r.length?r[0].toLowerCase()===e.toLowerCase():!1};return $filter("filter")(r,t)};

 

Istnieje wiele sposobów na skompresowanie swojego kodu, ale o praktycznych aspektach za chwilę. Minifikacja* (usuwanie zbędnych znaków) jest bardzo pożyteczną praktyką ze względu na wielkość pliku. Niestety komplikuje to debugowanie.

Debugowanie nieczytelnego kodu CSS

Tutaj zaczyna się magia: DevTool w przeglądarce jest w stanie odtwożyć z której linijki jakiego pliku źródłowego dany fragment pochodzi, jeśli dostarczymy mu mapę. Oznacza to, że możesz mieć wgląd w źródła nawet kiedy strona wczytuje „zmielony” i nieczytelny kod.

* Kalka z angielskiego (minification). Tak brzmi hasło w Wikipedii. Dlatego nie lubię pisać na techniczne tematy po polsku.

Praktyka

Jeśli już korzystasz z jakiegokolwiek narzędzia wymagającego używania konsoli (gulp, Grunt, npm scripts) na pewno poradzisz sobie ze znalezieniem opcji umożliwiających wygenerowanie mapy. W przypadku różnego rodzaju dodatków do edytora/IDE może być różnie. Ja zwykle używam gulp’a, albo wtyczki do edytora Brackets. Opisywanie każdego narzędzia nie ma sensu. Zamiast tego proponuję prosty i darmowy program, z którym każdy powinien sobie poradzić.

Aplikacja Koala

Koala. Ustawienia z prawej umożliwiają wygenerowanie mapy.

Jak to działa?

Mapę do kodu można dołączyć na dwa sposoby:

  1. Za pomocą komentarza na końcu pliku:
    /*# sourceMappingURL=style.css.map */
    //# sourceMappingURL=/katalog/functions.js.map
  2. Poprzez nagłówek HTTP X-SourceMap:
    X-SourceMap: /inny_katalog/script.js.map

Szczerze powiedziawszy, nie spotkałem się jeszcze z zastosowaniem tej drugiej opcji.

Składnia pliku to dość czytelny na pierwszy rzut oka JSON. Przykładowo:

{
  "version": 3,
  "file": "style.css",
  "sources": [
    "style.scss"
  ],
  "mappings": ";AAAA,AAAA,IAAI,CAAC;EACH,…",
  "names": []
}

Najciekawszą częścią jest oczywiście mappings. Dane tam zapisane można przetłumaczyć jako:

wiersz: kolumna->w_źródła:k_źródła, kolumna->w_źródła:k_źródła

Dobrym sposobem na zrozumienie o co chodzi jest zobaczenie wizualizacji.

Algorytm to VLQ zakodowany w Base64. Ciekawostka: format ten został po raz pierwszy zdefiniowany do kodowania muzyki w formacie MIDI.

Techniczne szczegóły

Jeśli dalej Ci mało, to prawdopodobnie masz za dużo wolnego czasu. Odsyłam do oryginalnej dokumentacji. Poza tym polecam poradnik Introduction to JavaScript Source Maps i post How do source maps work?, dzięki którym ogarnąłem ten temat.