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 contribuire a 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. La versione successiva nasconde i frame di terze parti irrilevanti per aiutarti a individuare più rapidamente i problemi durante il debug.
Che cos'è ignoreList?
Le estensioni delle mappe di origine sono campi aggiuntivi che memorizzano informazioni complementari sulla mappa di origine. Questi campi sono preceduti dal 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 di 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 indicare le posizioni nel campo sources. Chrome DevTools applicherà queste informazioni per nascondere i frame dai file ignorati.
Questo vale anche per Stack di chiamate nel riquadro Origini durante il debug dei punti di interruzione.
Dietro le quinte, DevTools ha 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 ignora.
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 ed è subito tutto pronto. I miglioramenti all'analisi dello stack vengono eseguiti con facilità.
D'altra parte, strumenti di creazione come Vite e Aggrega forniscono le impostazioni per configurarli. Per farlo esiste anche un plug-in webpack.
Se ti occupi della gestione di framework o librerie, è 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.
E se il tuo framework e strumento di creazione preferito non lo supporta ancora?
Collaboriamo attivamente con i framework e creiamo strumenti per creare questi nuovi contesti. Puoi anche dare il tuo contributo informando i gestori di questa funzionalità. Ad esempio, puoi segnalare un problema nel loro repository.
In alternativa, puoi aggiungere manualmente script irrilevanti all'elenco di elementi da ignorare direttamente dalla struttura dei file in DevTools > Origini > riquadro Pagina per ottenere un risultato simile.
Case study: implementazione di Nuxt e Angular
Prendi in esame i due case study riportati di seguito.
ignoreList a Nuxt
A partire da Nuxt v3.3.1, i contenuti di node_modules e Nuxt buildDir sono stati contrassegnati come "per essere ignorati dai debugger".
Ciò è stato possibile tramite una modifica alla configurazione di build 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 di DevTools desidera esprimere gratitudine ai team di 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 vostri contributi.
ignoreList in Angular
A partire dalla versione Angular v14.1.0, i contenuti delle cartelle node_modules e webpack sono stati contrassegnati come "da ignorare".
Ciò è stato possibile tramite una modifica in angular-cli creando un plug-in che si aggancia al modulo Compiler del webpack.
Il plug-in webpack creato dai nostri tecnici si collega alla fase PROCESS_ASSETS_STAGE_DEV_TOOLING e compila il campo ignoreList nelle mappe di origine con gli asset finali generati dal webpack e caricato 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ù su altri miglioramenti di debug di Angular in DevTools, consulta Case study: Better Angular Debugging with DevTools.
Il team di Chrome DevTools desidera ringraziare il team di Angular per il loro inestimabile contributo al successo di questa implementazione. Il tuo impegno e la tua collaborazione sono stati fondamentali e apprezziamo il tuo duro lavoro. Ringraziamo il team di Angular per aver reso possibile tutto ciò.