CFXIXI工作室首页
CF西西的博客 | 使用 SourceMap 来进行压缩后的代码调试,以underscore为例(underscore.map由来)

使用 SourceMap 来进行压缩后的代码调试,以underscore为例(underscore.map由来)

6. 三月 2015

转自:http://ju.outofmemory.cn/entry/34885

JS发布后通常会经过压缩和混淆,所有代码被压缩成一行代码,如果发生错误,无法定位错误,SourceMap因此而生。
说起SourceMap,不得不说说uglifyjs,uglifyjs是nodejs下一款优秀的JS压缩优化工具,支持SourceMap的生成。

一、uglifyjs的使用及SourceMap文件的生成方法
1、安装nodejs:http://nodejs.org,windows下直接安装即可,安装好后自带npm.
2、打开CMD,输入node -v查看,nodejs是否安装成功,如果成功会返回一个版本号。
3、安装uglifyjs:
执行命令:npm install uglify-js -g
4、uglifyjs使用方法及API:https://github.com/mishoo/UglifyJS2
5、压缩JS并生成SourceMap文件

uglifyjs underscore.js --source-map underscore.js.map 
--source-map-root ./-m -c -o underscore-mini.js

会生成两个文件:
underscore-mini.js(压缩文件)
underscore.js.map(SourceMap文件)

二、用 SourceMap 调试
有了SourceMap文件,放置underscore-mini.js同一目录,引用underscore-mini.js时,就可以调试,看到未压缩的代码

调试方法:
打开chrome – F12(打开调试工具)- 调试工具右下角有一个设置,打开设置 – General – Enable source maps
这样就打开了SourceMap调试功能。
在Sources面板下,左侧展开,就能看到SourceMap解出来的未压缩文件,多个压缩文件都可以看到。

三、SourceMap的原理解析
单说,Source map就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码。这无疑给开发者带来了很大方便。

1、SourceMap基本结构如下:
20130723160149

- version:Source map的版本,目前为3。
- file:转换后的文件名。
- sourceRoot:转换前的文件所在的目录。如果与转换前的文件在同一目录,该项为空。
- sources:转换前的文件。该项是一个数组,表示可能存在多个文件合并。
- names:转换前的所有变量名和属性名。
- mappings:记录位置信息的字符串,下文详细介绍。

2、重点在于mappings的解码
第一层是行对应,以分号(;)表示,每个分号对应一行代码;
第二层是位置对应,以逗号(,)表示,每个逗号对应转换后源码的一个位置。
第三层是位置转换,以VLQ编码表示,代表该位置对应的转换前的源码位置。

VLQ编码相关,请查询更多资料~~

javascript