Source map 是一种技术，可以将转换过的 CSS / JS 与原始代码关联起来。这篇 文章 非常好。

转换的原因可能有：

• 将使用了新 JS 语义的代码转换成老运行环境能运行的 JS 代码，比如某浏览器可能还不支持 arrow function，那可以用 Babel 将 arrow function 转成普通函数给浏览器运行
• 将一种类 JS 语言的代码转换成 JS 代码，如 Coffee、TypeScript 等
• 压缩代码或者混淆代码的工具

需要由相应的工具生成 source map，如 Babel、TypeScript 等。

Source map 的重点在于，将转义后的代码的每个表达式等，与原始代码关联起来。具体的关联细节不重要，有兴趣看看前面提到的文章。

Webpack

如果在开发过程中使用的是 webpack-dev-server，在 Webpack 配置文件（一般是 webpack.config.js）中加入 devtool: 'source-map' 选项来生成 source map（文档）。