Rozszerzenie mapy źródłowej ignorowanych

Ulepsz 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 wyświetlają tylko te, które są istotne dla Twojego kodu.

Obraz przedstawia zrzuty stosu przed i po wprowadzeniu obsługi ignoreList w Narzędziach deweloperskich w Chrome. Ta druga opcja ukrywa nieistotne ramki innych firm, co pomaga szybciej wykrywać problemy podczas debugowania.

Co to jest ignoreList?

Rozszerzenia map źródłowych to dodatkowe pola, które przechowują uzupełniające informacje o mapie źródłowej. Takie pola są poprzedzone prefiksem x_.

Narzędzia deweloperskie w Chrome używają pola ignoreList (jeśli jest podane), aby odfiltrować wygenerowany kod i umożliwić programistom stron internetowych skupienie się tylko na kodzie, który napisali. Spójrz na przykład na tę mapę źródłową.

/* 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żywanych przez wpis mappings. Aby dowiedzieć się, jak działają mapowania, obejrzyj film Czym 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 deweloperskie w Chrome będą używać tych informacji, aby ukrywać ramki z ignorowanych plików.

Obraz przedstawia zrzuty stosu przed rozwinięciem zrzutu stosu w konsoli i po nim. Ignorowane ramki są wyszarzone po rozwinięciu.

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

Za kulisami Narzędzia deweloperskie domyślnie mają włączone dodatkowe ustawienie: Automatycznie dodawaj znane skrypty innych firm do listy ignorowanych fragmentów kodu. Znajdziesz ją w Narzędziach deweloperskich > Ustawienia > Lista ignorowanych fragmentów kodu.

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

Jak wypełnić pole ignoreList

Dobra wiadomość jest taka, że platformy takie jak Angular i Nuxt już konfigurują ignoreList w swoich mapach źródłowych. Uaktualnij do najnowszej wersji, a będzie działać od razu. Ulepszenia zrzutu stosu są wprowadzane automatycznie.

Z kolei narzędzia do kompilacji, takie jak Vite i Rollup, udostępniają ustawienia, które umożliwiają jego konfigurację. Dostępna jest też wtyczka webpack.

Jeśli jesteś osobą odpowiedzialną za utrzymanie platformy lub biblioteki, musisz wiedzieć, jak wdrożyć te ustawienia, aby ułatwić użytkownikom debugowanie. W następnej sekcji dowiesz się, jak Angular i Nuxt robią to za kulisami.

Co zrobić, jeśli Twoja ulubiona platforma i narzędzie do kompilacji jeszcze jej nie obsługują?

Aktywnie współpracujemy z twórcami platform i narzędzi do kompilacji, aby wprowadzić te nowe ustawienia. Możesz też pomóc, powiadamiając o tej funkcji osoby odpowiedzialne za utrzymanie. Możesz na przykład zgłosić problem w ich repozytorium.

Możesz też ręcznie dodać nieistotne skrypty do listy ignorowanych fragmentów kodu bezpośrednio z drzewa plików w panelu Narzędzia deweloperskie > Źródła > Strona, aby uzyskać podobny wynik.

Studia przypadków: implementacja Nuxt i Angular

Zapoznaj się z tymi 2 studiami przypadków.

ignoreList w Nuxt

Od wersji Nuxt 3.3.1 zawartość node_modules i Nuxt buildDir jest oznaczona jako „do zignorowania przez debugery”.

Udało się to osiągnąć dzięki zmianie konfiguracji kompilacji Nuxt za pomocą 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 dziękuje zespołom Vite i Nuxt za umożliwienie tego. Dziękujemy za wysiłek i współpracę, które były kluczowe dla powodzenia tego wdrożenia. Jeszcze raz dziękujemy zespołom Vite i Nuxt za ich wkład.

ignoreList w Angularze

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

Udało się to osiągnąć dzięki zmianie w angular-cli przez utworzenie wtyczki, która podłącza się do modułu Compiler webpacka.

Wtyczka webpack, którą stworzyli nasi inżynierowie, podłącza się do etapu PROCESS_ASSETS_STAGE_DEV_TOOLING i wypełnia pole ignoreList w mapach źródłowych ostatecznymi zasobami, które webpack generuje, a przeglądarka wczytuje.

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 studium przypadku: lepsze debugowanie Angulara za pomocą Narzędzi deweloperskich.

Zespół Narzędzi deweloperskich w Chrome dziękuje zespołowi Angular za nieoceniony wkład w sukces tej implementacji. Twoje zaangażowanie i współpraca były kluczowe. Doceniamy Twoją ciężką pracę. Dziękujemy zespołowi Angular za umożliwienie tego.