1228512 - Describe JavaScript source mapping in detail

Status: RESOLVED WONTFIX

(Developer Documentation Graveyard :: Developer Tools, enhancement)

Description

[Sebastian Zartner [:sebo]]

Currently we have concise description of how to enable source mapping in the DevTools[1], though there should be a more detailed description of what source maps are, how they work and how to use them within the Debugger panel. So something similar to what Ryan Seddon did in his blog post about JavaScript source maps[2].

Will mentioned in bug 885272 comment 1 that the description of source maps is out of scope of the debugger. So this description might be split up into two parts. One for explaining how they work in general and one for how they are used within the debugger (i.e. extend the existing description at the 'Use a source map' article).

The descriptions should answer these questions:
- What are source maps and for what are they used? (Explain them and their use cases in more detail.)
- How are source maps generated? (Might be a short description of and/or links to external tools.)
- How do source maps look like? (Explain how source maps are structured. Could be let out if it is out of scope of MDN.)
- How are source maps used when debugging? (Explain in more detail how the Debugger panel and other panels handle JavaScript source maps and mention how error and edge cases are handled.)
- Is there something users need to be aware of when using source maps? (Mention possible risks and refer to existing issues in the DevTools.)

Sebastian

[1] https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map
[2] http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

Comment 1

[BMO Automation]

MDN Web Docs' bug reporting has now moved to GitHub. From now on, please file content bugs at https://github.com/mdn/sprints/issues/ and platform bugs at https://github.com/mdn/kuma/issues/.