Source Map入门教程

正文

请到「今天看啥」查看全文

为啥需要Source Map?

使用Firefox执行 hello.js 的报错信息是这样:

ReferenceError: Name is not defined
	sayHello file:///Users/fundebug/sourcemap-tutorial/hello.js:4:9
	 file:///Users/fundebug/sourcemap-tutorial/hello.js:8:1

而 hello.min.js 的报错信息是这样:

ReferenceError: Name is not defined
	o file:///Users/fundebug/sourcemap-tutorial/hello.min.js:1:18
	 file:///Users/fundebug/sourcemap-tutorial/hello.min.js:1:59

对比压缩前后的出错信息，我们会发现，错误行号和列号已经失真，且函数名也经过了变换。而对于真实的前端项目，开发者会将数十个源文件压缩为一个文件，这时，错误的列号可能多达数千，且出错的真实文件名也是很难确定的，这样的话，压缩代码的报错信息是很难Debug的。

而Source Map则可以用于还原真实的出错位置 ，帮助开发者更快的Debug。

什么是Source Map?

使用UglifyJS2时指定source-map选项即可生成Source Map:

uglifyjs hello.js \
-m toplevel=true

请到「今天看啥」查看全文