Ulepsz debugowanie w Narzędziach deweloperskich w Chrome dzięki rozszerzeniu mapy źródeł ignoreList
.
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.