Mit der Source Map-Erweiterung ignoreList verbessern Sie die Fehlerbehebung in den Chrome-Entwicklertools.
Die Chrome-Entwicklertools parsen das Feld ignoreList in Quellzuordnungen, um die Fehlerbehebung für Entwickler zu verbessern. Sehen Sie sich den folgenden Stacktrace in der Console an. DevTools blendet automatisch alle Drittanbieter-Frames aus und zeigt nur die Frames an, die für Ihren Code relevant sind.
<ph type="x-smartling-placeholder">ignoreList durch die Chrome-Entwicklertools. 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, die ergänzende Informationen zur Quellzuordnung speichern. Solche Felder haben das Präfix x_.
In den Chrome-Entwicklertools wird das Feld ignoreList (falls angegeben) verwendet, um generierten Code herauszufiltern, sodass sich Webentwickler auf den von ihnen erstellten Code konzentrieren können. Sehen Sie sich beispielsweise 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 enthält eine Liste der Originalquellen, die vom mappings-Eintrag verwendet werden. Sehen Sie sich das Video Was sind Quellzuordnungen? an, um mehr über die Funktionsweise der Zuordnungen zu erfahren.
Da es sich bei den beiden Dateien node_modules/…/frameworks.js und node_modules/.../library.js um Drittanbieterskripte handelt, können Sie mit dem Feld ignoreList ihre Positionen im Feld sources angeben. Die Chrome-Entwicklertools wenden diese Informationen an, um Frames in diesen ignorierten Dateien auszublenden.
<ph type="x-smartling-placeholder">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 Source Map können Sie im Bereich Quellen die ignorierten Dateien ausblenden, um sich auf Ihren Code zu konzentrieren.
ignoreList automatisch befüllen
Die gute Nachricht ist, dass Frameworks wie Angular und Nuxt bereits ignoreList in ihren Source Maps konfigurieren. Ein Upgrade auf die neueste Version ist sofort einsatzbereit. Sie können mühelos Stacktraces verbessern.
Build-Tools wie Vite und Rollup hingegen bieten 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 dies noch nicht unterstützt?
Wir arbeiten aktiv mit Frameworks und entwickeln Tools, um diese neuen Herausforderungen zu meistern. Sie können auch helfen, indem Sie die Administratoren über diese Funktion informieren. Beispielsweise können Sie ein Problem im Repository melden.
Alternativ können Sie direkt über die Dateistruktur unter „Entwicklertools“ Irrelevante Skripts zur Ignorieren-Liste hinzufügen. Quellen > Seite, um ein ähnliches Ergebnis zu erzielen.
Fallstudien: Implementierung von Nuxt und Angular
Sehen Sie sich die folgenden beiden Fallstudien an.
ignoreList in Nuxt
Ab Nuxt Version 3.3.1 wurde der Inhalt von node_modules und Nuxt-buildDir als „von Debuggern zu ignorieren“ gekennzeichnet.
Dies wurde durch eine Änderung in 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 wissen Ihre Bemühungen und die Zusammenarbeit, die für den Erfolg dieser Implementierung entscheidend war, zu schätzen. 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 von angular-cli erreicht, indem ein Plug-in erstellt wurde, das sich in das Compiler-Modul des Webpacks einbindet.
Das von unseren Entwicklern erstellte Webpack-Plug-in wird in die PROCESS_ASSETS_STAGE_DEV_TOOLING-Phase aufgenommen und füllt das Feld ignoreList 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 beim Angular-Debugging in den Entwicklertools finden Sie unter Fallstudie: Besseres Angular-Debugging mit Entwicklertools.
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, das Angular-Team.