Source Maps sind ein entscheidendes Tool in der modernen Webentwicklung, mit dem wesentlich einfacher. Auf dieser Seite werden die Grundlagen von Source Maps erläutert. und wie sie die Fehlerbehebung verbessern.
Die Notwendigkeit von Source Maps
Frühe Web-Apps wurden mit geringer Komplexität entwickelt. Die Entwickler implementierten HTML, CSS, und JavaScript-Dateien direkt ins Web.
Moderne und komplexe Webanwendungen können eine Vielzahl von Tools in ihrem des Entwicklungs-Workflows. Beispiel:
- Vorlagensprachen und HTML-Präprozessoren: Pug, Nunjucks Abzug:
- CSS-Präprozessoren: SCSS, LESS, PostCSS.
- JavaScript-Frameworks: Angular, React Vue, Svelte.
- JavaScript-Meta-Frameworks: Next.js, Nuxt, Astro
- Obere Programmiersprachen: TypeScript Dart, CoffeeScript
Diese Tools erfordern einen Build-Prozess, um Ihren Code in Standard-HTML zu transpilieren, und CSS, die Browser verstehen können. Es ist auch üblich, durch Reduzieren und Kombinieren dieser Dateien mithilfe eines Tools wie Terser:
Mit Build-Tools können wir beispielsweise Folgendes transpilieren und komprimieren: TypeScript-Datei in eine einzelne JavaScript-Zeile einfügen. Sie können es selbst ausprobieren in Demo auf 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);
});
Eine komprimierte Version wäre:
/* 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)}));
Die Komprimierung des Codes kann jedoch die Fehlerbehebung erschweren. Quellzuordnungen können Sie dieses Problem beheben: Indem Sie Ihren kompilierten Code wieder dem ursprünglichen Code zuordnen, können sie Ihnen helfen, die Fehlerquelle schnell zu finden.
Quellzuordnungen generieren
Quellzuordnungen sind Dateien, deren Namen auf .map enden (z. B.
example.min.js.map und styles.css.map). Sie können von den meisten Builds
wie Vite, Webpack,
Rollup, Parcel und
esbuild.
Einige Tools enthalten standardmäßig Quellzuordnungen. Andere benötigen möglicherweise zusätzliche Konfiguration, um sie zu generieren:
/* 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
}
})
Quellzuordnung verstehen
Um die Fehlerbehebung zu erleichtern, enthalten diese Source Map-Dateien wichtige Informationen wie der kompilierte Code dem ursprünglichen Code zugeordnet wird. Hier ist ein Beispiel für eine Quellzuordnung:
{
"mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
"sources": ["src/script.ts"],
"sourcesContent": ["document.querySelector('button')..."],
"names": ["document","querySelector", ...],
"version": 3,
"file": "example.min.js.map"
}
Weitere Informationen zu diesen Feldern finden Sie in den Source Map Specification oder Aufbau einer Source Map
Der wichtigste Teil einer Source Map ist das Feld mappings. Dabei wird ein
Base-64-codierter VLQ-String
um Zeilen und Orte in der kompilierten Datei dem entsprechenden Original zuzuordnen
-Datei. Sie können diese Zuordnung mit einem Source Map-Visualizer wie
source-map-visualization oder
Visualisierung der Quellkarte.
<ph type="x-smartling-placeholder">In der Spalte Generiert links sehen Sie den komprimierten Inhalt. In der Spalte original wird die Originalquelle angezeigt.
Der Visualizer weist jeder Zeile in der Spalte original eine Farbcodierung mit den zugehörigen den entsprechenden Code in der Spalte generated (Generiert).
Im Abschnitt mappings werden decodierte Zuordnungen des Codes angezeigt. Beispiel: Der Parameter
Eintrag 65 -> 2:2 bedeutet:
- Generierter Code: Das Wort
constbeginnt im komprimierten Inhalt bei Position 65. - Originalcode: Das Wort
constbeginnt im ursprünglichen Inhalt in Zeile 2 und Spalte 2.
65 -> 2:2 konzentriertSo können Entwickler schnell die Beziehung zwischen dem komprimierten Code identifizieren. und dem ursprünglichen Code, was die Fehlerbehebung leichter macht.
Mithilfe dieser Source Maps können Sie Ihre eigenen um Probleme schnell im Browser zu beheben.
<ph type="x-smartling-placeholder">
Quellkartenerweiterungen
Quellzuordnungen unterstützen benutzerdefinierte Erweiterungsfelder, die mit dem Präfix x_ beginnen. Eins
Beispiel: Das von Chrome vorgeschlagene Erweiterungsfeld x_google_ignoreList
Entwicklertools. Weitere Informationen finden Sie im Hilfeartikel x_google_ignoreList.
um mehr darüber zu erfahren, wie diese Erweiterungen Ihnen helfen, sich auf Ihren Code zu konzentrieren.
Nachteile der Quellzuordnung
Leider sind Quellzuordnungen nicht immer so vollständig, wie sie sein müssen.
In unserem ersten Beispiel wurde die Variable greet während des Build-Prozesses entsprechend optimiert.
, obwohl der Wert direkt in die endgültige Stringausgabe eingebettet ist.
greet im Original
Code fehlt in der Zuordnung.In diesem Fall können die Entwicklertools beim Debuggen des Codes möglicherweise den tatsächlichen Wert ableiten und anzeigen. Diese Art von Fehler kann dazu führen, Überwachung und Analyse zu erschweren.
<ph type="x-smartling-placeholder">
greet finden.Dies ist ein Problem, das beim Design von Source Maps gelöst werden muss. Eins Lösungsansatz besteht darin, Informationen zum Umfang in die Source Maps wie andere Programmiersprachen mit ihren Debug-Informationen tun.
Dies erfordert jedoch, dass das gesamte Ökosystem zusammenarbeitet, um die Qualität Source Map-Spezifikation und -Implementierung. Um die laufenden auf Verbesserung der Debug-Fähigkeit mit Quellzuordnungen finden Sie im Vorschlag für Source Maps Version 4 auf GitHub.