De bronkaartextensie ignoreList

Verbeter de foutopsporing in Chrome DevTools met de bronmapextensie ignoreList.

Jecelyn Yeen

Chrome DevTools parseert het veld ignoreList in bronkaarten om de foutopsporingsfunctionaliteit voor ontwikkelaars te verbeteren. Bekijk de volgende stacktrace in de Console. DevTools verbergt automatisch alle frames van derden en toont alleen de frames die relevant zijn voor je code.

Een vergelijking van resultaten van stacktraces.
De afbeelding toont de stacktraces voordat en nadat Chrome DevTools ignoreList ondersteunt. Met de laatste optie verberg je irrelevante frames van derden, zodat je problemen sneller kunt opsporen tijdens de foutopsporing.

Wat is ignoreList?

Extensies voor bronkaarten zijn extra velden waarin aanvullende informatie over de bronkaart wordt opgeslagen. Deze velden hebben het voorvoegsel x_.

Chrome DevTools gebruikt het veld ignoreList (indien verstrekt) om gegenereerde code weg te filteren, zodat webontwikkelaars zich alleen kunnen richten op de code die ze zelf schrijven. Bekijk bijvoorbeeld de volgende bronkaart.

/* demo.js.map */

{
  "version": 3,
  "mappings": "AAAAA, ..."
  "sources": [
    "app.js",
    "components/Button.ts",
    "node_modules/.../framework.js",
    "node_modules/.../library.js",
    ...
  ],
  "ignoreList": [2, 3],
  ...
}

Het veld sources toont een lijst met oorspronkelijke bronnen die worden gebruikt door de invoer mappings. Bekijk Wat zijn bronkaarten? voor meer informatie over hoe de toewijzingen werken.

Aangezien de 2 bestanden node_modules/…/frameworks.js en node_modules/.../library.js scripts van derden zijn, kunt u het veld ignoreList invoeren om de posities aan te geven in het veld sources. Chrome DevTools past deze informatie toe om frames van die genegeerde bestanden te verbergen.

Een vergelijking van een samengevouwen en uitgevouwen stacktrace.
De afbeelding toont de stacktraces voordat en nadat je de stacktrace uitvouwt in de Console. De genegeerde frames worden grijs weergegeven als ze worden uitgevouwen.

Dit geldt ook voor de aanroepstack in het deelvenster Bronnen tijdens foutopsporing met breakpoints.

Achter de schermen heeft DevTools een extra instelling die standaard aanstaat: Bekende scripts van derden automatisch toevoegen aan de negeerlijst. Je vindt deze in DevTools > Instellingen > Negeerlijst.

Met het bronkaartveld ignoreList kun je de genegeerde bestanden verbergen in het deelvenster Bronnen om je op je code te richten.

Bronnen op de negeerlijst verbergen.

ignoreList invullen

Het goede nieuws is dat frameworks zoals Angular en Nuxt ignoreList al instellen in hun bronkaarten. Upgrade naar de nieuwste versie en de functie werkt meteen. Je krijgt moeiteloos verbeteringen in de stacktrace.

Aan de andere kant bieden buildtools zoals Vite en Rollup instellingen om dit te configureren. Er is ook een webpack-plug-in voor.

Als je een framework of bibliotheek onderhoudt, is het essentieel dat je begrijpt hoe je deze instellingen implementeert om de foutopsporingservaring van je gebruikers te verbeteren. In het volgende gedeelte zie je hoe Angular en Nuxt dit achter de schermen hebben gedaan.

Wat als je favoriete framework en buildtool dit nog niet ondersteunen?

We werken actief met frameworks en buildtools om deze nieuwe instellingen te implementeren. Je kunt ook helpen door beheerders op de hoogte te stellen van deze functie. Je kunt bijvoorbeeld een probleem indienen in de repository.

Je kunt ook handmatig irrelevante scripts toevoegen aan de negeerlijst rechtstreeks vanuit de bestandsstructuur in het deelvenster DevTools > Bronnen > Pagina om een vergelijkbaar resultaat te krijgen.

Casestudy's: Nuxt- en Angular-implementatie

Neem de volgende 2 casestudy's door.

ignoreList in Nuxt

Vanaf Nuxt v3.3.1 is de content van de node_modules en Nuxt buildDir gemarkeerd als 'moet worden genegeerd door debuggers'.

Dit is bereikt door een wijziging in de buildconfiguratie van Nuxt met Vite en 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)
        },
      }
})

Het DevTools-team wil de teams van Vite en Nuxt bedanken voor het mogelijk maken van deze functie. We stellen uw inspanningen en samenwerking op prijs. Deze waren essentieel voor het succes van deze implementatie. Nogmaals bedankt aan de teams van Vite en Nuxt voor jullie bijdragen.

ignoreList in Angular

Vanaf Angular v14.1.0 is de content van de mappen node_modules en webpack gemarkeerd als negeren.

Dit is bereikt door een wijziging in angular-cli door een plug-in te maken die aansluit op de Compiler-module van webpack.

De webpack-plug-in die onze engineers hebben gemaakt, haakt in op de fase PROCESS_ASSETS_STAGE_DEV_TOOLING en vult het veld ignoreList in de bronkaarten in met de uiteindelijke componenten die webpack genereert en de browser laadt.

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)));

Ga naar Casestudy: Betere Angular-foutopsporing met DevTools voor meer informatie over andere verbeteringen in Angular-foutopsporing in DevTools.

Het Chrome DevTools-team wil het Angular-team bedanken voor hun onschatbare bijdragen aan het succes van deze implementatie. Uw inspanningen en samenwerking waren essentieel en we waarderen uw harde werk. Bedankt, Angular-team, dat jullie dit mogelijk hebben gemaakt.