Mit der Source Map-Erweiterung ignoreList können Sie die Fehlerbehebung in den Chrome-Entwicklertools verbessern.
In den Chrome-Entwicklertools wird das Feld ignoreList in Quellzuordnungen geparst, um die Fehlerbehebung für Entwickler zu verbessern. Sehen Sie sich den folgenden Stacktrace in der Console an. Die Entwicklertools blenden automatisch alle Frames von Drittanbietern aus und zeigen nur die Frames an, die für deinen Code relevant sind.
ignoreList durch die Chrome-Entwicklertools. Dann werden irrelevante Frames von Drittanbietern ausgeblendet, damit Sie Probleme bei der Fehlerbehebung schneller identifizieren können.
Was ist ignoreList?
Source Maps-Erweiterungen sind zusätzliche Felder, in denen ergänzende Informationen zur Source Map gespeichert werden. Solche Felder haben das Präfix x_.
In den Chrome-Entwicklertools wird das Feld „ignoreList“ (falls vorhanden) verwendet, um generierten Code herauszufiltern und es Webentwicklern zu ermöglichen, sich auf den von ihnen erstellten Code zu konzentrieren. Sehen Sie sich zum Beispiel die folgende Source Map an.
/* demo.js.map */
{
"version": 3,
"mappings": "AAAAA, ..."
"sources": [
"app.js",
"components/Button.ts",
"node_modules/.../framework.js",
"node_modules/.../library.js",
...
],
"ignoreList": [2, 3],
...
}
Das Feld sources zeigt eine Liste der Originalquellen an, die vom Eintrag mappings verwendet wurden. Sehen Sie sich Was sind Source Maps? an, um zu erfahren, wie die Zuordnungen funktionieren.
Da es sich bei den beiden Dateien node_modules/…/frameworks.js und node_modules/.../library.js um Drittanbieter-Skripts handelt, können Sie das Feld ignoreList angeben, um deren Positionen im Feld sources anzugeben. Die Chrome-Entwicklertools wenden diese Informationen an, um Frames in diesen ignorierten Dateien auszublenden.
Dies gilt auch für den Aufrufstack im Bereich Quellen während der Haltepunkt-Fehlerbehebung.
Im Hintergrund ist in den Entwicklertools standardmäßig eine zusätzliche Einstellung aktiviert: Bekannte Drittanbieterskripts automatisch zur Ignorierliste hinzufügen. Du findest sie unter „Entwicklertools“ > Einstellungen > Ignorierliste.
Mit dem Source Map-Feld ignoreList können Sie die ignorierten Dateien im Bereich Quellen ausblenden, um den Fokus auf Ihren Code zu legen.
ignoreList ausfüllen
Die gute Nachricht ist, dass Frameworks wie Angular und Nuxt bereits ignoreList in ihren Source Maps konfigurieren. Aktualisiere auf die neueste Version und es funktioniert sofort. Sie erhalten mühelose Stacktrace-Verbesserungen.
Andererseits bieten Build-Tools wie Vite und Rollup Einstellungen zur Konfiguration. Dafür gibt es auch ein Webpack-Plug-in.
Wenn Sie ein Framework oder Administrator einer Bibliothek sind, ist es wichtig zu wissen, wie Sie diese Einstellungen implementieren können, um die Fehlerbehebung für Ihre Nutzer zu verbessern. Im folgenden Abschnitt erfahren Sie, wie Angular und Nuxt dies hinter den Kulissen getan haben.
Was ist, wenn Ihr bevorzugtes Framework und Build-Tool dies noch nicht unterstützt?
Wir arbeiten aktiv mit Rahmenbedingungen und entwickeln Tools, um diese neuen Einstellungen umzusetzen. Sie können auch helfen, indem Sie die Administratoren über diese Funktion informieren. Sie können in deren Repository beispielsweise ein Problem melden.
Alternativ können Sie irrelevante Scripts manuell zur Ignorierliste hinzufügen, um ein ähnliches Ergebnis zu erzielen. Dazu gehen Sie in den Entwicklertools in den Entwicklertools auf Quellen > Seite.
Fallstudien: Implementierung von Nuxt und Angular
Sehen Sie sich die folgenden beiden Fallstudien an.
ignoreList in Nuxt
Ab Nuxt v3.3.1 wurden die Inhalte von node_modules und Nuxt buildDir mit „von Debuggern zu ignorieren“ gekennzeichnet.
Das wurde durch eine Änderung an der Build-Konfiguration von Nuxt mit Vite und Rollup erreicht:
/* 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)
},
}
})
Das DevTools-Team möchte sich bei den Vite- und Nuxt-Teams für die Unterstützung bedanken. Wir danken Ihnen für Ihre Bemühungen und die Zusammenarbeit, die für den Erfolg dieser Implementierung entscheidend waren. Nochmals vielen Dank an die Teams von Vite und Nuxt für eure Beiträge!
ignoreList in Angular
Ab Version 14.1.0 von Angular wurde der Inhalt der Ordner node_modules und webpack mit „zu ignorieren“ markiert.
Dies wurde durch eine Änderung in angular-cli durch Erstellen eines Plug-ins, das mit dem Compiler-Modul des Webpacks verknüpft werden kann erreicht.
Das von unseren Entwicklern erstellte Webpack-Plug-in wird in die PROCESS_ASSETS_STAGE_DEV_TOOLING-Phase eingebunden und füllt das ignoreList-Feld in den Quellzuordnungen mit den endgültigen Assets, die von Webpack generiert und im Browser geladen werden.
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)));
Weitere Informationen zu weiteren Verbesserungen der Angular-Fehlerbehebung in den Entwicklertools finden Sie unter Fallstudie: Better Angular Debugging with DevTools.
Das Chrome-Entwicklertools-Team möchte sich beim Angular-Team für den wertvollen Beitrag zum Erfolg dieser Implementierung bedanken. Ihre Bemühungen und Zusammenarbeit waren für uns von entscheidender Bedeutung und wir wissen Ihre harte Arbeit zu schätzen. Vielen Dank an das Angular-Team, dass Sie dies ermöglicht haben!