Rozszerzenie mapy źródłowej ignorowanych

Ulepsz debugowanie w Narzędziach deweloperskich w Chrome dzięki rozszerzeniu mapy źródeł ignoreList.

Jecelyn Yeen

Narzędzia deweloperskie w Chrome analizują pole ignoreList w mapach źródłowych, aby usprawnić debugowanie programistów. Przyjrzyj się temu zrzutowi stosu w konsoli. Narzędzia deweloperskie automatycznie ukrywają wszystkie ramki innych firm i wyświetlają tylko te, które mają związek z Twoim kodem.

Co to jest ignoreList?

Rozszerzenia map źródłowych to dodatkowe pola, w których przechowywane są uzupełniające informacje o mapie źródłowej. Takie pola mają prefiks x_.

Narzędzia deweloperskie w Chrome korzystają z pola ignoreList (jeśli jest dostępne) do odfiltrowywania wygenerowanego kodu i umożliwiania deweloperom stron internetowych koncentrowania się tylko na kodzie, którego są autorem. Spójrzmy na przykład na tę 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żywanych przez wpis mappings. Obejrzyj film Co to są mapy źródeł?, aby dowiedzieć się, jak działa mapowanie.

Ponieważ 2 pliki node_modules/…/frameworks.js i node_modules/.../library.js to skrypty innych firm, możesz określić pole ignoreList, aby wskazać ich pozycje w polu sources. Narzędzia deweloperskie w Chrome zastosują te informacje, aby ukryć ramki w tych ignorowanych plikach.

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

W sposób niewidoczny w Narzędziach deweloperskich domyślnie włączone jest dodatkowe ustawienie: Automatycznie dodawaj znane skrypty innych firm do listy ignorowanych fragmentów kodu. Znajdziesz ją, klikając Narzędzia deweloperskie > Ustawienia > Lista ignorowanych.

Pole mapy źródłowej ignoreList umożliwia ukrycie zignorowanych plików w panelu Źródła, dzięki czemu możesz skupić się na kodzie.

Jak wypełniać pole ignoreList

Na szczęście platformy takie jak Angular czy Nuxt mają już skonfigurowane ignoreList w mapach źródeł. Uaktualnij do najnowszej wersji i od razu będzie działać. Bez trudu uzyskasz usprawnienia śledzenia stosu.

Narzędzia do tworzenia, takie jak Vite i Rollup, mają ustawienia pozwalające na ich skonfigurowanie. Dostępna jest też wtyczka do pakietu webpack.

Jeśli jesteś administratorem platformy lub biblioteki, musisz wiedzieć, jak wdrożyć te ustawienia, aby usprawnić debugowanie użytkowników. W kolejnej sekcji dowiesz się, jak Angular i Nuxt zrobili to za kulisami.

A jeśli Twoja ulubiona platforma i narzędzie do tworzenia kompilacji jeszcze ich nie obsługują?

Aktywnie współpracujemy z platformami i opracowujemy narzędzia umożliwiające wprowadzenie tych nowych ustawień. Możesz też pomóc, powiadamiając opiekunów o tej funkcji. Możesz na przykład zgłosić problem w jego 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.

Studia przypadków: implementacja Nuxt i Angular

Przyjrzyj się dwóm poniższym przykładom.

ignoreList w Nuxt

Od Nuxt w wersji 3.3.1 zawartość node_modules i buildDir Nuxt jest oznaczona jako „będą pomijane przez debugery”.

Udało się to osiągnąć dzięki zmianie w 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ół DevTools chce podziękować zespołom Vite i Nuxt za umożliwienie im 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 Wasz wkład.

ignoreList w Angular

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

W tym celu wprowadziliśmy zmianę w angular-cli, tworząc wtyczkę, która łączy się z modułem Compiler pakietu internetowego.

Opracowana przez naszych inżynierów wtyczka pakietu internetowego wstawia się na etapie PROCESS_ASSETS_STAGE_DEV_TOOLING i wypełnia pole ignoreList w mapach źródłowych ostatecznymi zasobami wygenerowanymi przez pakiet internetowy i wczytywane 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 dostępnych w Narzędziach deweloperskich znajdziesz w artykule Case Study: Better Angular Debugging with DevTools (Studium przypadku: Better Angular Debugging with DevTools).

Zespół Narzędzi deweloperskich w Chrome chce wyrazić wdzięczność zespołowi Angular za jego nieoceniony wkład w sukces tej implementacji. Twoje wysiłki i współpraca były kluczowe, dlatego doceniamy Twoją ciężką pracę. Dziękujemy zespołowi Angular za pomoc w realizacji tego celu.