Source map

As explained in Web Components in Action

A source map is a mapping file that relates generated code locations to their original source-code locations.

A source map connects locations in generated code with the original source files. Its .map file stores lookup information so browser errors can point back to source lines instead of bundled output. section 12.4

Debugging a bundled component

Build a component with Rollup’s -m flag, then trigger an error in the generated bundle. The browser can identify the exact line in the original source file, even though the application runs the bundle. section 12.4

Figure 12.4. Source maps show where an error occurred in your source files, even when bundling output.

Use the figure to see how source maps reveal original source locations during bundled-output errors. section 12.4

How Web Components in Action covers it

How deep it goes

Explains the mapping file and its lookup role, then demonstrates error localization without detailing the mapping format.

Examples

Uses a Rollup command with -m and a forced error displayed against the original source.

What it assumes

Assumes source files are bundled into generated output and introduces source-map generation through Rollup’s -m flag.

What you can do after

Diagnose/debug bundled applications by tracing generated-code errors back to original source lines.

How it connects

Connects source maps with Rollup, bundling, generated output, browser errors, and ES6 modules.

liveBookmanning.com

Read Web Components in Action on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  Pro ASP.NET Core 7, Tenth EditionA source map is a file that maps transformed code such as minified JavaScript back to its developer-readable source code.

Compare how 2 books explain source map →

Related concepts

• TypeScript compilerproduced by · The TypeScript compiler analyzes and checks TypeScript source code and can emit JavaScript and declaration files.
• browser developer toolsuses · A suite of browser-integrated utilities for inspecting, debugging, testing, profiling, and analyzing web pages, applications, and browser-executed code.
• debuggingused by · Debugging is the systematic process of investigating software behavior to locate, diagnose, and correct defects or their causes.
• TypeScriptuses · TypeScript is a statically typed superset of JavaScript that adds type-system features and is compiled to JavaScript.
• CSSconfigures · CSS, or Cascading Style Sheets, is a stylesheet language for specifying the presentation and layout of structured documents and user interfaces.

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.