Migliora l'esperienza di debug in Chrome DevTools con l'estensione della mappa di origine ignoreList.
Chrome DevTools analizza il campo ignoreList nelle mappe di origine per migliorare l'esperienza di debug degli sviluppatori. Dai un'occhiata alla seguente analisi dello stack nella console. DevTools nasconde automaticamente tutti i frame di terze parti e mostra solo quelli pertinenti al tuo codice.
ignoreList. L'opzione successiva nasconde i frame di terze parti irrilevanti per aiutarti a individuare i problemi più rapidamente durante il debug.
Che cos'è ignoreList?
Le estensioni delle mappe di origine sono campi aggiuntivi in cui vengono memorizzate informazioni complementari sulla mappa di origine. Questi campi hanno il prefisso x_.
Chrome DevTools utilizza il campo ignoreList (se fornito) per filtrare il codice generato e consentire agli sviluppatori web di concentrarsi solo sul codice che creano. Ad esempio, osserva la seguente mappa di origine.
/* demo.js.map */
{
"version": 3,
"mappings": "AAAAA, ..."
"sources": [
"app.js",
"components/Button.ts",
"node_modules/.../framework.js",
"node_modules/.../library.js",
...
],
"ignoreList": [2, 3],
...
}
Il campo sources mostra un elenco delle fonti originali utilizzate dalla voce mappings. Guarda Che cosa sono le mappe di origine? per scoprire come funzionano le mappature.
Dato che i due file node_modules/…/frameworks.js e node_modules/.../library.js sono script di terze parti, puoi specificare il campo ignoreList per indicarne la posizione nel campo sources. Chrome DevTools applicherà queste informazioni per nascondere i frame dai file ignorati.
Questo vale anche per lo Stack di chiamate nel riquadro Origini durante il debug dei punti di interruzione.
Dietro le quinte, DevTools presenta un'impostazione aggiuntiva attivata per impostazione predefinita: Aggiungi automaticamente script di terze parti noti all'elenco degli elementi da ignorare. Puoi trovarlo in DevTools > Impostazioni > Elenco di persone da ignorare.
Con il campo della mappa di origine ignoreList, puoi nascondere i file ignorati nel riquadro Origini per concentrarti sul codice.
Come compilare ignoreList
La buona notizia è che framework come Angular e Nuxt configurano già ignoreList nelle loro mappe di origine. Esegui l'upgrade alla versione più recente e funzionerà subito. Puoi ottenere facilmente miglioramenti dell'analisi dello stack.
Gli strumenti di creazione come Vite e Rollup forniscono invece le impostazioni per la configurazione. Per farlo, è disponibile anche un plug-in webpack.
Se gestisci un framework o una libreria, è essenziale capire come implementare queste impostazioni per migliorare l'esperienza di debug degli utenti. Consulta la sezione seguente per scoprire come hanno fatto Angular e Nuxt dietro le quinte.
Cosa succede se il tuo framework e lo strumento di creazione preferiti non lo supporta ancora?
Lavoriamo attivamente con i framework e creiamo strumenti per ottenere queste nuove impostazioni. Puoi anche aiutarci inviando una notifica ai gestori di questa funzionalità. Ad esempio, puoi segnalare un problema nel suo repository.
In alternativa, puoi aggiungere manualmente script non pertinenti all'elenco di elementi da ignorare direttamente dalla struttura di file in DevTools > Fonti > Pagina per ottenere un risultato simile.
Case study: implementazione di Nuxt e Angular
Dai un'occhiata ai due case study che seguono.
ignoreList a Nuxt
A partire da Nuxt v3.3.1, i contenuti di node_modules e Nuxt buildDir sono stati contrassegnati come "da ignorare dai debugger".
Ciò è stato ottenuto attraverso una modifica alla configurazione di compilazione di Nuxt utilizzando Vite e 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)
},
}
})
Il team DevTools vorrebbe ringraziare i team Vite e Nuxt per aver reso possibile tutto questo. Apprezziamo il tuo impegno e la tua collaborazione, che sono stati fondamentali per il successo di questa implementazione. Grazie ancora ai team Vite e Nuxt per i tuoi contributi.
ignoreList in Angular
A partire da Angular v14.1.0, i contenuti delle cartelle node_modules e webpack sono stati contrassegnati come "da ignorare".
Ciò è stato ottenuto attraverso una modifica a angular-cli creando un plug-in che si aggancia al modulo Compiler di webpack.
Il plug-in webpack creato dai nostri tecnici si collega allo stage PROCESS_ASSETS_STAGE_DEV_TOOLING e compila il campo ignoreList nelle mappe di origine con gli asset finali generati da Webpack e caricati dal browser.
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)));
Per scoprire di più sugli altri miglioramenti di debug di Angular in DevTools, consulta Case study: migliorare il debug Angular con DevTools.
Il team di Chrome DevTools desidera ringraziare il team di Angular per il suo prezioso contributo al successo di questa implementazione. I tuoi sforzi e la tua collaborazione sono stati fondamentali e apprezziamo il tuo duro lavoro. Grazie, team di Angular, per aver reso possibile tutto questo!