Le mappe di codice sono uno strumento fondamentale nello sviluppo web moderno che semplifica il debug molto più facilmente. Questa pagina illustra le nozioni di base delle mappe di origine, il loro generate e come migliorano l'esperienza di debug.
La necessità di utilizzare le mappe di origine
Le prime app web sono state create con una bassa complessità. Gli sviluppatori hanno implementato HTML, CSS e JavaScript direttamente sul web.
Le app web più moderne e complesse possono richiedere vari strumenti un flusso di lavoro di sviluppo. Ad esempio:
- Linguaggio per modelli e preprocessori HTML: Pug, Nunjucks Annotazione.
- Preprocessori CSS: SCSS, MENO, PostCSS.
- Framework JavaScript: Angular, React, Vue, Svelte.
- Meta framework JavaScript: Next.js, Nuxt, Astro.
- Linguaggi di programmazione di alto livello: TypeScript Dart CoffeeScript.
Questi strumenti richiedono un processo di compilazione per eseguire il transpile del codice in HTML standard, JavaScript e CSS che i browser possano comprendere. È pratica comune anche ottimizzare le prestazioni minimizzando e combinando questi file, con uno strumento come Terser.
Ad esempio, usando gli strumenti di creazione, possiamo eseguire il transpile e la compressione dei seguenti il file TypeScript in un'unica riga di JavaScript. Puoi fare una prova in prima persona questa demo su GitHub.
/* A TypeScript demo: example.ts */
document.querySelector('button')?.addEventListener('click', () => {
const num: number = Math.floor(Math.random() * 101);
const greet: string = 'Hello';
(document.querySelector('p') as HTMLParagraphElement).innerText = `${greet}, you are no. ${num}!`;
console.log(num);
});
Una versione compressa sarebbe:
/* A compressed JavaScript version of the TypeScript demo: example.min.js */
document.querySelector("button")?.addEventListener("click",(()=>{const e=Math.floor(101*Math.random());document.querySelector("p").innerText=`Hello, you are no. ${e}!`,console.log(e)}));
Tuttavia, la compressione del codice può rendere più difficile il debug. Mappe di origine può risolvere questo problema: mappando il codice compilato al codice originale, possono aiutarti a individuare rapidamente l'origine di un errore.
Genera mappe di origine
Le mappe di origine sono file il cui nome termina con .map (ad esempio,
example.min.js.map e styles.css.map). Possono essere generate dalla maggior parte delle
tra cui Vite, webpack,
Aggregazione, Pacco e
esbuild.
Alcuni strumenti includono mappe di origine per impostazione predefinita. Altri potrebbero aver bisogno di configurazione per produrle:
/* Example configuration: vite.config.js */
/* https://vitejs.dev/config/ */
export default defineConfig({
build: {
sourcemap: true, // enable production source maps
},
css: {
devSourcemap: true // enable CSS source maps during development
}
})
Comprendere la mappa di origine
Per facilitare il debug, questi file della mappa di origine contengono informazioni essenziali sul modo in cui il codice compilato viene mappato al codice originale. Ecco un esempio di mappa di origine:
{
"mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
"sources": ["src/script.ts"],
"sourcesContent": ["document.querySelector('button')..."],
"names": ["document","querySelector", ...],
"version": 3,
"file": "example.min.js.map"
}
Per comprendere ognuno di questi campi, puoi consultare specifica della mappa di origine o L'anatomia di una mappa di origine.
La parte più importante di una mappa di origine è il campo mappings. Utilizza un
Stringa codificata VLQ base 64
per mappare linee e posizioni nel file compilato all'originale corrispondente
. Puoi visualizzare questa mappatura utilizzando un visualizzatore della mappa di origine come
source-map-visualization o
Visualizzazione mappa di origine.
La colonna generata a sinistra mostra i contenuti compressi e Originale mostra la fonte originale.
Il visualizzatore codifica per colore ogni riga della colonna originale con i relativi il codice corrispondente nella colonna generate.
La sezione mappature mostra le mappature decodificate del codice. Ad esempio,
voce 65 -> 2:2 significa:
- Codice generato: la parola
constinizia dalla posizione 65 nei contenuti compressi. - Codice originale: la parola
constinizia dalla riga 2 e dalla colonna 2 nei contenuti originali.
65 -> 2:2.In questo modo gli sviluppatori possono identificare rapidamente la relazione tra il codice minimizzato e il codice originale, rendendo il debug più semplice.
Gli strumenti per sviluppatori del browser applicano queste mappe di origine per aiutarti a individuare il tuo eseguire rapidamente il debug dei problemi nel browser.
Estensioni mappa di origine
Le mappe di origine supportano i campi estensione personalizzati che iniziano con un prefisso x_. Uno.
Esempio: il campo dell'estensione x_google_ignoreList proposto da Chrome
DevTools. Vedi x_google_ignoreList
per saperne di più su come queste estensioni ti permettono di concentrarti sul codice.
Svantaggi della mappa di origine
Purtroppo, le mappature delle fonti non sono sempre complete come ti servono.
Nel nostro primo esempio, la variabile greet è stata ottimizzata durante la creazione
anche se il suo valore è incorporato direttamente nell'output della stringa finale.
greet nella versione originale
non è presente nella mappatura.In questo caso, quando esegui il debug del codice, gli strumenti per sviluppatori potrebbero non essere in grado di dedurre e visualizzare il valore effettivo. Questo tipo di errore può rendere il tuo codice il monitoraggio e l'analisi.
greet.Si tratta di un problema che deve essere risolto all'interno della progettazione delle mappe di origine. Uno. La potenziale soluzione è includere informazioni sull'ambito nelle mappe di origine nel allo stesso modo di altri linguaggi di programmazione con le proprie informazioni di debug.
Tuttavia, ciò richiede che l'intero ecosistema collaborino per migliorare la specifica e l'implementazione della mappa di origine. Per seguire migliorare la possibilità di eseguire il debug con le mappe di origine, fai riferimento alla proposta per Origine Maps v4 su GitHub.