Mit der Erweiterung ignoreList für Quellkarten können Sie das Debuggen in den Chrome-Entwicklertools optimieren.
In den Chrome-Entwicklertools wird das Feld ignoreList in Quellkarten analysiert, um die Fehlerbehebung für Entwickler zu verbessern. Sehen Sie sich den folgenden Stack-Trace in der Console an. In den Entwicklertools werden alle Frames von Drittanbietern automatisch ausgeblendet und nur die Frames angezeigt, die für Ihren Code relevant sind.
ignoreList in den Chrome-Entwicklertools zu sehen. Die Funktion blendet später irrelevante Frames von Drittanbietern aus, damit Sie Probleme während der Fehlerbehebung schneller lokalisieren können.
Was ist ignoreList?
Quellkartenerweiterungen sind zusätzliche Felder, in denen ergänzende Informationen zur Quellzuordnung 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 Webentwicklern die Möglichkeit zu geben, sich nur auf den von ihnen erstellten Code zu konzentrieren. Sehen Sie sich beispielsweise die folgende Quellkarte 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 enthält eine Liste der Originalquellen, die vom mappings-Eintrag verwendet werden. Im Video Was sind Quellzuordnungen? erfahren Sie, wie die Zuordnungen funktionieren.
Da die beiden Dateien node_modules/…/frameworks.js und node_modules/.../library.js Drittanbieterscripts sind, können Sie das Feld ignoreList angeben, um ihre 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 Fehlerbehebung für Haltepunkte.
Im Hintergrund ist in den Entwicklertools standardmäßig eine zusätzliche Einstellung aktiviert: Bekannte Drittanbieter-Skripts automatisch zur Ignorieren-Liste hinzufügen. Sie finden sie unter „Entwicklertools“ > Einstellungen > Ignorieren-Liste.
Mit dem Feld ignoreList für Quellzuordnungen haben Sie die Möglichkeit, die ignorierten Dateien im Bereich Quellen auszublenden, um sich auf Ihren Code zu konzentrieren.
ignoreList ausfüllen
Die gute Nachricht ist, dass Frameworks wie Angular und Nuxt ignoreList bereits in ihren Quellkarten konfigurieren. Ein Upgrade auf die neueste Version ist sofort einsatzbereit. Sie erhalten mühelos Verbesserungen des Stack-Traces.
Build-Tools wie Vite und Rollup bieten hingegen Einstellungen zur Konfiguration. Es gibt auch ein Webpack-Plug-in dafür.
Wenn Sie ein Framework- oder Bibliotheksadministrator sind, müssen Sie wissen, wie Sie diese Einstellungen implementieren, um die Fehlerbehebung für Nutzer zu verbessern. Im folgenden Abschnitt erfahren Sie, wie Angular und Nuxt es hinter den Kulissen geschafft haben.
Was ist, wenn Ihr bevorzugtes Framework und Build-Tool es noch nicht unterstützen?
Wir arbeiten aktiv mit Frameworks und entwickeln Tools, um diese neuen Einstellungen zu implementieren. Sie können auch helfen, indem Sie die Administratoren über diese Funktion informieren. Sie können beispielsweise ein Problem in ihrem Repository melden.
Alternativ können Sie irrelevante Scripts auch manuell der Ignorieren-Liste hinzufügen. Dazu müssen Sie nur den Dateibaum im Bereich „DevTools“ > Quellen > Seite aufrufen.
Fallstudien: Implementierung von Nuxt und Angular
Sehen Sie sich die folgenden beiden Fallstudien an.
ignoreList in Nuxt
Ab Nuxt v3.3.1 sind die Inhalte von node_modules und Nuxt buildDir als „von Debuggern zu ignorieren“ gekennzeichnet.
Dies wurde durch eine Änderung 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 Teams Vite und Nuxt dafür bedanken, dass sie dies möglich gemacht haben. Wir danken Ihnen für Ihre Bemühungen und Ihre Zusammenarbeit, die für den Erfolg dieser Implementierung entscheidend waren. Nochmals vielen Dank an die Teams von Vite und Nuxt für deine Beiträge!
ignoreList in Angular
Ab der Angular-Version 14.1.0 wurde der Inhalt der Ordner node_modules und webpack als zu ignorieren gekennzeichnet.
Dies wurde durch eine Änderung in angular-cli erreicht, indem ein Plug-in erstellt wurde, das an das Compiler-Modul von webpack angehängt wird.
Das von unseren Entwicklern erstellte webpack-Plug-in wird in der Phase PROCESS_ASSETS_STAGE_DEV_TOOLING eingebunden und füllt das Feld ignoreList in den Quellkarten mit den endgültigen Assets aus, die von webpack generiert und vom 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 anderen Verbesserungen beim Angular-Debugging in den DevTools finden Sie in der Fallstudie: Besseres Angular-Debugging mit den DevTools.
Das Chrome DevTools-Team möchte sich bei dem Angular-Team für seinen wertvollen Beitrag zum Erfolg dieser Implementierung bedanken. Ihre Bemühungen und Zusammenarbeit waren für uns sehr wichtig. Wir wissen Ihre harte Arbeit zu schätzen. Vielen Dank an das Angular-Team, dass Sie dies möglich gemacht haben.