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 da parte di Chrome DevTools. Quest'ultima nasconde i frame di terze parti non pertinenti 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, dai un'occhiata alla 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 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 loro posizioni nel campo sources. Chrome DevTools applicherà queste informazioni per nascondere i frame di questi file ignorati.
Questo vale anche per lo 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 di elementi da ignorare.
Con il campo della mappa di origine ignoreList, hai la possibilità di 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 all'ultima versione e funzionerà immediatamente. I miglioramenti dell'analisi dello stack vengono applicati automaticamente.
D'altra parte, gli strumenti di build come Vite e Rollup forniscono impostazioni per configurarlo. Esiste anche un plug-in webpack per questo.
Se sei un gestore 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 Angular e Nuxt hanno implementato questa funzionalità dietro le quinte.
Cosa succede se il tuo framework e il tuo strumento di build preferiti non lo supportano ancora?
Collaboriamo attivamente con framework e strumenti di build per implementare queste nuove impostazioni. Puoi anche contribuire informando i gestori di questa funzionalità. Ad esempio, puoi segnalare un problema nel loro repository.
In alternativa, puoi aggiungere manualmente gli script non pertinenti all'elenco di elementi da ignorare direttamente dalla struttura ad albero dei file nel riquadro DevTools > Origini > Pagina per ottenere un risultato simile.
Case study: implementazione di Nuxt e Angular
Dai un'occhiata ai due case study riportati di seguito.
ignoreList in Nuxt
A partire da Nuxt v3.3.1, i contenuti di node_modules e Nuxt buildDir sono stati contrassegnati come "da ignorare dai debugger".
Questo è stato ottenuto tramite 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 di DevTools desidera esprimere la propria gratitudine ai team di Vite e Nuxt per aver reso possibile tutto questo. Apprezziamo i tuoi sforzi e la tua collaborazione, che sono stati essenziali per il successo di questa implementazione. Grazie ancora ai team di Vite e Nuxt per i loro 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".
Questo è stato ottenuto tramite una modifica in angular-cli creando un plug-in che si aggancia al modulo Compiler di webpack.
Il plug-in webpack creato dai nostri ingegneri si aggancia alla fase 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ù su altri miglioramenti del debug di Angular in DevTools, consulta Case Study: Better Angular Debugging with DevTools.
Il team di Chrome DevTools desidera esprimere la propria gratitudine al team di Angular per il suo prezioso contributo al successo di questa implementazione. I tuoi sforzi e la tua collaborazione sono stati essenziali e apprezziamo il tuo duro lavoro. Grazie al team di Angular per aver reso possibile tutto questo.