Sourcemap

SourceMap 应用与详解
孟红伦
2012.12
http://blog.allenm.me

12年12月13⽇日星期四

答问题，抢旺仔！



请听题：

等等。。第一题留给新人吧。

目前中国站的 js 、css 从开发环
境到线上环境经历了哪些变换？


目前中国站的 js 、css 从开发环
境到线上环境经历了哪些变换？

合并、压缩、转 unicode


你用过几种？
如何调试？


在前端开发领域，出现了越来越
多的预编译语言，来解决 js、css
的不足

还有各种各样的合并、压缩规则

这些都会造成你写的代码和最终
浏览器执行的代码不同


So...

SourceMap is coming!


http://www.youtube.com/watch?
feature=player_embedded&v=2aQw1dSIYko


开放性问题，答的最全面者拿旺仔：

如果让你来设计SourceMap，
你将怎么设计？怎么来做映射
呢？


SourceMap 在你写的代码和最终浏览器
执行的代码之间架起了一座桥梁

打开Chrome 调试工具的“enable
source map”的选项，访问：
http://lab.allenm.me/sourcemap/

uglifyjs blink.js main.js --source-map
done.js.map --source-map-root ./ -o
done.js -m -c

我们可以直接看到 source code 的什
么地方报错

还可以直接在 source code 上打断点


深入了解 SourceMap

如果你想写一门自己的语言，将他们转
换成 javascript、css，下面的内容或许
有用


2，现在最新的是第三版
3，生成的文件的文件名
4，source文件的通用
路径，和 sources 中的
文件名拼接起来确定
source url
5，source 文件列表
6，变量名列表
7，mapping data


Mapping Data:
用“；”分割组
一组对应生成的代码中的一行
用“，”分割段
一段是由1，4或者5个字段组成
使用 Base64 VLQ 编码


尝试手工解码分析上面的例子


OAAOC
Base64 变换
最高位表示后 14,0,0,14,2
边是否还有数最低位是符号
据,1表示后面标志位，0表
还有
001110,000000,
000000,001110,
示正数
000010

7,0,0,7,1


AAMA,QAASA,OAAOC,EAAIC

[0,0,6,0],[8,0,0,9,0],
值都是相 [7,0,0,7,1],[2,0,0,4,1]
对前一个
的 [0,0,6,0],[8,0,6,9,0],
[15,0,6,16,1],[17,0,6,20,2]


[0,0,6,0],[8,0,6,9,0],
[15,0,6,16,1],[17,0,6,20,2]

每段中的第一个数字表示生成代码的列数
第二个数字对应 sources 列表里的文件
第三个数字对应源代码的行数
第四个数字对应源代码的列数
第五个数字对应 names 列表的 name


可以自己去上面我给出的例子中对照着
验证下



为什么整出这么一套复杂的编码
方式呢？闲的蛋疼吗？


延伸阅读：
Base64 编码：http://blog.allenm.me/
2012/11/base64-encoding/
Base64 VLQ编码：http://
blog.allenm.me/2012/12/base64-vlq-
encoding/


延伸阅读：

SourceMap 文档：http://goo.gl/vtEVF

SourceMap 介绍&视频：http://
goo.gl/5xQEy


Sass 还支持另外一种 SourceMap,
Chrome 现在对它也有支持，需要
在调试工具设置项中开启，开启后
从上面给出的例子中也能看到效果


目前SourceMap在Chrome中的表现
还不够稳定，支持SourceMap的工具
也不够多。
但我相信，在不久的将来，主流的对
前端源码做变换的工具、语言都将支
持SourceMap，我认为这是解决调试
难问题的良方。


Q&A


Sourcemap

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Sourcemap

Ähnlich wie Sourcemap (20)

Sourcemap