Rozszerzenie mapy źródłowej ignorowanych

Usprawnij debugowanie w Narzędziach deweloperskich w Chrome dzięki rozszerzeniu mapy źródłowej ignoreList.

Jecelyn Yeen

Narzędzia deweloperskie w Chrome analizują pole ignoreList w mapach źródłowych, aby ułatwić deweloperom debugowanie. W Konsoli sprawdź ten ślad stosu. Narzędzia deweloperskie automatycznie ukrywają wszystkie ramki innych firm i pokazują tylko te, które są istotne w kodzie.

Co to jest ignoreList?

Rozszerzenia map źródłowych to dodatkowe pola, które przechowują dodatkowe informacje o mapie źródłowej. Takie pola mają przedrostek x_.

Narzędzia deweloperskie w Chrome korzystają z pola ignoreList (jeśli jest dostępne), aby odfiltrowywać wygenerowany kod i umożliwić programistom stron internetowych skupienie się tylko na nim. Spójrz na poniższą mapę źródeł.

/* demo.js.map */

{
  "version": 3,
  "mappings": "AAAAA, ..."
  "sources": [
    "app.js",
    "components/Button.ts",
    "node_modules/.../framework.js",
    "node_modules/.../library.js",
    ...
  ],
  "ignoreList": [2, 3],
  ...
}

Pole sources zawiera listę oryginalnych źródeł użytych w pliku mappings. Aby dowiedzieć się, jak działają mapowania, obejrzyj film Co to są mapy źródeł?.

Ponieważ pliki node_modules/…/frameworks.js i node_modules/.../library.js są skryptami innych firm, możesz określić pole ignoreList, aby wskazać ich pozycje w polu sources. Narzędzia dla programistów w Chrome zastosują te informacje, aby ukryć klatki z ignorowanych plików.

Dotyczy to też stosu wywołań w panelu Źródła podczas debugowania punktu przerwania.

W Narzędziach deweloperskich jest domyślnie włączone dodatkowe ustawienie: Automatycznie dodawaj znane skrypty innych firm do listy ignorowanych. Aby ją znaleźć, kliknij Narzędzia deweloperskie > Ustawienia > Lista ignorowanych.

Dzięki polu mapy źródeł ignoreList możesz ukryć pominięte pliki w panelu Źródła, aby skupić się na kodzie.

Jak wypełnić pole ignoreList

Mamy też dobrą wiadomość: platformy takie jak Angular i Nuxt już skonfigurowały ignoreList w swoich mapach źródłowych. Przejdź na najnowszą wersję, a aplikacja będzie działać od razu po zainstalowaniu. bez wysiłku uzyskujesz ulepszone zrzuty stosu.

Z kolei narzędzia do kompilacji, takie jak Vite i Rollup, zawierają ustawienia umożliwiające konfigurowanie. Do tego celu służy też wtyczka webpack.

Jeśli zajmujesz się obsługą platformy lub biblioteki, musisz wiedzieć, jak wdrożyć te ustawienia, by ułatwić użytkownikom debugowanie. W kolejnej sekcji dowiesz się, jak Angular i Nuxt zrobiły to za kulisy.

Co zrobić, jeśli Twoje ulubione środowisko i narzędzie do kompilacji nie obsługują jeszcze tej funkcji?

Współpracujemy z twórcami frameworków i narzędzi do kompilowania, aby wprowadzić te nowe ustawienia. Możesz też pomóc, informując administratorów o tej funkcji. Możesz na przykład zgłosić problem w ich repozytorium.

Aby uzyskać podobny wynik, możesz też ręcznie dodać nietrafne skrypty do listy ignorowanych bezpośrednio z drzewa plików w panelu Narzędzia dla deweloperów > Źródła > Strona.

Studium przypadku: implementacja Nuxt i Angular

Zapoznaj się z 2 poniższymi studiami przypadków.

ignoreList w Nuxt

Od wersji Nuxt 3.3.1 zawartość plików node_modules i Nuxt buildDir została oznaczona jako „do zignorowania przez debugery”.

Udało się to osiągnąć przez zmianę w konfiguracji kompilacji Nuxt przy użyciu Vite i Rollup:

/* vite.config.ts */

const ctx: ViteBuildContext = {
  config: vite.mergeConfig(
  build: {
    rollupOptions: {
      output: {
        sourcemapIgnoreList: (relativeSourcePath) => {
          return relativeSourcePath.includes('/node_modules/') || relativeSourcePath.includes(ctx.nuxt.options.buildDir)
        },
      }
})

Zespół narzędzi deweloperskich chce podziękować zespołom Vite i Nuxt za umożliwienie tego osiągnięcia. Dziękujemy za współpracę i współpracę, które miały kluczowe znaczenie dla powodzenia tej implementacji. Jeszcze raz dziękujemy zespołom Vite i Nuxt za ich wkład.

ignoreList w Angular

Od wersji Angular 14.1.0 zawartość folderów node_modules i webpack została oznaczona jako „do zignorowania”.

Osiągnięto to przez zmianę w angular-cli, która polegała na utworzeniu wtyczki podłączanej do modułu Compiler w webpackie.

Plik webpack plugin, który nasi inżynierowie stworzyli na etapie PROCESS_ASSETS_STAGE_DEV_TOOLING, wypełnia pole ignoreList w mapach źródłowych za pomocą końcowych zasobów wygenerowanych przez webpack i przesłanych do przeglądarki.

const map = JSON.parse(mapContent) as SourceMap;
const ignoreList = [];

for (const [index, path] of map.sources.entries()) {
  if (path.includes('/node_modules/') || path.startsWith('webpack/')) {
    ignoreList.push(index);
  }
}

map[`ignoreList`] = ignoreList;
compilation.updateAsset(name, new RawSource(JSON.stringify(map)));

Więcej informacji o innych ulepszeniach debugowania Angulara w Narzędziach deweloperskich znajdziesz w artykule Case Study: Better Angular Debugging with DevTools (Case Study: ulepszone debugowanie Angulara za pomocą Narzędzi deweloperskich).

Zespół Narzędzi deweloperskich Chrome chce podziękować zespołowi Angular za nieoceniony wkład w powodzenie tej implementacji. Wasz wysiłek i współpraca były kluczowe. Doceniamy Twoją ciężką pracę. Dziękujemy zespołowi Angular za umożliwienie tego.