Mapy źródeł to kluczowe narzędzie we współczesnym tworzeniu stron internetowych, znacznie łatwiejsze. Na tej stronie znajdują się podstawowe informacje o mapach źródłowych, a także ich opis oraz o tym, jak usprawniają debugowanie.
Potrzeba map źródłowych
Początkowe aplikacje internetowe były proste w obsłudze. Programiści wdrożyli HTML, CSS i i plików JavaScript bezpośrednio do internetu.
Bardziej nowoczesne i złożone aplikacje internetowe mogą wymagać różnych narzędzi. w procesie programowania. Na przykład:
- Języki szablonów i procesory HTML: Pug, Nunjucks Oznaczenie.
- Procesory wstępne CSS: SCSS, MNIEJ, PostCSS.
- platformy JavaScript: Angular, React, Vue, Svelte.
- Metadane JavaScript: Next.js, Nuxt i Astro.
- Języki programowania wysokiego poziomu: TypeScript, Dart, CoffeeScript
![Krótkie omówienie różnych narzędzi.](https://web.dev/static/articles/source-maps/image/a-brief-overview-various-769879995ff7c.png?authuser=9&hl=pl)
Narzędzia te wymagają procesu kompilacji, który transpiluje kod do standardowego kodu HTML. JavaScript i CSS, które przeglądarki zrozumieją. Powszechną praktyką jest też optymalizację wydajności przez minifikację i połączenie tych plików za pomocą takich narzędzi jak Terser.
Na przykład za pomocą narzędzi do kompilacji możemy transpilować i skompresować TypeScript do jednego wiersza JavaScript. Możesz go wypróbować tutaj: tę prezentację na GitHubie.
/* A TypeScript demo: example.ts */
document.querySelector('button')?.addEventListener('click', () => {
const num: number = Math.floor(Math.random() * 101);
const greet: string = 'Hello';
(document.querySelector('p') as HTMLParagraphElement).innerText = `${greet}, you are no. ${num}!`;
console.log(num);
});
Skompresowana wersja:
/* A compressed JavaScript version of the TypeScript demo: example.min.js */
document.querySelector("button")?.addEventListener("click",(()=>{const e=Math.floor(101*Math.random());document.querySelector("p").innerText=`Hello, you are no. ${e}!`,console.log(e)}));
Kompresja kodu może jednak utrudnić debugowanie. Mapy źródłowe mogą rozwiązać ten problem. Mapując skompilowany kod z powrotem na kod oryginalny, mogą pomóc w szybkim znalezieniu źródła błędu.
Wygeneruj mapy źródłowe
Mapy źródeł to pliki, których nazwy kończą się na .map
(na przykład
example.min.js.map
i styles.css.map
). Mogą być generowane przez większość kompilacji
takich jak Vite, webpack,
Podsumowania, Parcel i
esbuild.
Niektóre narzędzia domyślnie zawierają mapy źródeł. Inne mogą wymagać dodatkowych w celu ich wygenerowania:
/* Example configuration: vite.config.js */
/* https://vitejs.dev/config/ */
export default defineConfig({
build: {
sourcemap: true, // enable production source maps
},
css: {
devSourcemap: true // enable CSS source maps during development
}
})
Informacje o mapie źródeł
Aby ułatwić debugowanie, te źródłowe pliki mapy zawierają kluczowe informacje na temat tego, jak skompilowany kod jest mapowany na kod oryginalny. Oto przykład mapa źródeł:
{
"mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
"sources": ["src/script.ts"],
"sourcesContent": ["document.querySelector('button')..."],
"names": ["document","querySelector", ...],
"version": 3,
"file": "example.min.js.map"
}
Aby dowiedzieć się więcej o każdym z tych pól, przeczytaj specyfikacja mapy źródłowej lub Struktura mapy źródłowej.
Najważniejszym elementem mapy źródeł jest pole mappings
. Wykorzystuje
Ciąg VLQ zakodowany w formacie base 64
aby zmapować wiersze i lokalizacje w skompilowanym pliku na odpowiednie
. Możesz wyświetlić to mapowanie za pomocą wizualizacji mapy źródłowej, takiej jak
source-map-visualization lub
Wizualizacja mapy źródłowej
![Wizualizacja mapy źródłowej.](https://web.dev/static/articles/source-maps/image/a-source-map-visualizatio-4866bc351df59.png?authuser=9&hl=pl)
W wygenerowanej kolumnie po lewej stronie widać skompresowane treści, a pole original (oryginał) pokazuje pierwotne źródło.
W wizualizacji każdy wiersz w kolumnie original (oryginalny) jest oznaczony kolorami odpowiadający mu kod w kolumnie wygenerowany.
Sekcja mapowania pokazuje zdekodowane mapowania kodu. Na przykład parametr
wpis 65 -> 2:2
oznacza:
- Wygenerowany kod: słowo
const
zaczyna się od pozycji 65 w skompresowanej treści. - Oryginalny kod: słowo
const
zaczyna się w wierszu 2 i kolumnie 2 w oryginalnej treści.
![Wpis mapowania.](https://web.dev/static/articles/source-maps/image/mapping-entry-dc9df15808405.png?authuser=9&hl=pl)
65 -> 2:2
.Pozwala to programistom szybko zidentyfikować relację między zminifikowanym kodem. i oryginalny kod, dzięki czemu debugowanie przebiega sprawniej.
Narzędzia dla programistów przeglądarki stosują te mapy źródeł, aby ułatwić określenie i szybkie debugowanie problemów w przeglądarce.
![Narzędzia dla programistów stosujące mapę źródeł.](https://web.dev/static/articles/source-maps/image/developer-tools-applies-ea66f57e838eb.png?authuser=9&hl=pl)
Rozszerzenia mapy źródeł
Mapy źródeł obsługują pola rozszerzeń niestandardowych, które zaczynają się od prefiksu x_
. Jeden
przykład to pole rozszerzenia x_google_ignoreList
zaproponowane przez Chrome
Narzędzia deweloperskie. Zobacz parametr x_google_ignoreList
.
Wady mapy źródeł
Niestety mapowania źródeł nie zawsze są tak kompletne, jak chcesz.
W pierwszym przykładzie zmienna greet
została zoptymalizowana od razu podczas kompilacji.
mimo że jego wartość jest bezpośrednio osadzona w końcowych danych wyjściowych ciągu.
![Zmienna powitania nie jest zmapowana.](https://web.dev/static/articles/source-maps/image/variaqble-greet-is-map-a93a440f3c171.png?authuser=9&hl=pl)
greet
w pierwotnej wersji
w mapowaniu brakuje kodu.W takim przypadku, gdy debugujesz kod, narzędzia dla programistów mogą nie mieć możliwości wywnioskować i wyświetlić rzeczywistą wartość. Tego rodzaju błąd może powodować, że kod monitorowania i analizowania.
![Zmienna powitania jest niezdefiniowana.](https://web.dev/static/articles/source-maps/image/variable-greet-is-undefin-19fcbf9a06a26.png?authuser=9&hl=pl)
greet
.Ten problem należy rozwiązać podczas projektowania map źródłowych. Jeden potencjalnym rozwiązaniem jest dołączenie informacji o zakresie do map źródłowych tak samo jak w przypadku innych języków programowania.
Wymaga to jednak współdziałania całego ekosystemu w celu poprawy specyfikacji i implementacji mapy źródłowej. Aby śledzić trwający i poprawić łatwość debugowania dzięki mapom źródeł, zapoznaj się z propozycją Mapy źródłowe (wersja 4) w GitHubie.