Co to są mapy źródeł?

Jecelyn Yeen

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

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

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.

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.

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.

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.

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.