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. Spójrz na ten zrzut stosu w konsoli. 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ódeł to dodatkowe pola, które zawierają uzupełniające informacje o mapie źródeł. Takie pola mają prefiks 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 przez wpis mappings. Obejrzyj film Co to są mapy źródłowe?, aby dowiedzieć się, jak działają mapowania.

Ponieważ 2 pliki node_modules/…/frameworks.js i node_modules/.../library.js są skryptami innych firm, możesz w polu ignoreList wskazać ich pozycje w polu sources. Narzędzia deweloperskie w Chrome będą stosować te informacje do ukrywania ramek w tych ignorowanych plikach.

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

W Narzędziach deweloperskich dostępne jest domyślnie włączone dodatkowe ustawienie: Automatycznie dodawaj znane skrypty innych firm do listy ignorowanych. Znajdziesz je w Narzędziach deweloperskich > Ustawienia > Lista ignorowanych.

Dzięki polu mapy źródła ignoreList możesz ukryć ignorowane 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. Gdy przejdziesz na najnowszą wersję, wszystko będzie działać od razu. Łatwo wprowadzasz ulepszenia zrzutu stosu.

Narzędzia do kompilacji, takie jak Vite i Rollup, udostępniają ustawienia umożliwiające ich skonfigurowanie. Jest też do tego 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 Twoja ulubiona platforma i narzędzie do tworzenia filmów jeszcze ich nie obsługuje?

Aktywnie współpracujemy z platformami i tworzymy narzędzia, dzięki którym możemy wprowadzić te nowe ustawienia. Możesz też pomóc, powiadamiając obsługę o tej funkcji. Możesz na przykład zgłosić problem w repozytorium.

Możesz też ręcznie dodać nietrafne skrypty do listy ignorowanych bezpośrednio z drzewa plików w Narzędziach deweloperskich > Źródła > Strona, aby uzyskać podobny wynik.

Studia przypadków: wdrożenie Nuxt i Angular

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

ignoreList w Nuksie

Od Nuxt w wersji 3.3.1 zawartość node_modules i Nuxt buildDir jest oznaczona jako „do ignorowania przez debugerów”.

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 Twój wkład.

ignoreList w Angular

Od Angular w wersji 14.1.0 zawartość folderów node_modules i webpack jest oznaczona jako „do ignorowania”.

Udało się to osiągnąć przez zmianę w angular-cli przez utworzenie wtyczki, która łączy się z modułem Compiler pakietu internetowego.

Opracowana przez naszych inżynierów wtyczka webpack łączy się z etapem PROCESS_ASSETS_STAGE_DEV_TOOLING i wypełnia pole ignoreList w mapach źródłowych końcowymi zasobami wygenerowanymi i wczytanymi przez przeglądarkę.

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 Angular w Narzędziach deweloperskich znajdziesz w artykule Case Study: Better Angular Debugging with DevTools (Studium przypadku: lepsze debugowanie Angular przy użyciu 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 pomoc w realizacji tego celu.