Sourcemap

1,132 views
1,032 views

Published on

Intruduce the SourceMap.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,132
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sourcemap

  1. 1. SourceMap 应用与详解 孟红伦 2012.12 http://blog.allenm.me12年12月13⽇日星期四
  2. 2. 答问题,抢旺仔!12年12月13⽇日星期四
  3. 3. 答问题,抢旺仔! 请听题: 等等。。第一题留给新人吧。 目前中国站的  js  、css  从开发环 境到线上环境经历了哪些变换?12年12月13⽇日星期四
  4. 4. 目前中国站的  js  、css  从开发环 境到线上环境经历了哪些变换? 合并、压缩、转  unicode12年12月13⽇日星期四
  5. 5. 你用过几种? 如何调试?12年12月13⽇日星期四
  6. 6. 在前端开发领域,出现了越来越 多的预编译语言,来解决  js、css   的不足 还有各种各样的合并、压缩规则 这些都会造成你写的代码和最终 浏览器执行的代码不同12年12月13⽇日星期四
  7. 7. So... SourceMap  is  coming!12年12月13⽇日星期四
  8. 8. http://www.youtube.com/watch? feature=player_embedded&v=2aQw1dSIYko12年12月13⽇日星期四
  9. 9. 答问题,抢旺仔! 开放性问题,答的最全面者拿旺仔: 如果让你来设计SourceMap, 你将怎么设计?怎么来做映射 呢?12年12月13⽇日星期四
  10. 10. 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  -c12年12月13⽇日星期四
  11. 11. 12年12月13⽇日星期四
  12. 12. 我们可以直接看到  source  code  的什 么地方报错 还可以直接在  source  code  上打断点12年12月13⽇日星期四
  13. 13. 深入了解  SourceMap 如果你想写一门自己的语言,将他们转 换成  javascript、css,下面的内容或许 有用12年12月13⽇日星期四
  14. 14. 2,现在最新的是第三版 3,生成的文件的文件名 4,source文件的通用 路径,和  sources  中的 文件名拼接起来确定 source  url 5,source  文件列表 6,变量名列表 7,mapping  data12年12月13⽇日星期四
  15. 15. Mapping  Data: 用“;”分割组 一组对应生成的代码中的一行 用“,”分割段 一段是由1,4或者5个字段组成 使用  Base64  VLQ  编码12年12月13⽇日星期四
  16. 16. 尝试手工解码分析上面的例子12年12月13⽇日星期四
  17. 17. OAAOC Base64  变换 最高位表示后 14,0,0,14,2 边是否还有数 最低位是符号 据,1表示后面 标志位,0表 还有 001110,000000, 000000,001110, 示正数 000010 7,0,0,7,112年12月13⽇日星期四
  18. 18. 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]12年12月13⽇日星期四
  19. 19. [0,0,6,0],[8,0,6,9,0], [15,0,6,16,1],[17,0,6,20,2] 每段中的第一个数字表示生成代码的列数 第二个数字对应  sources  列表里的文件 第三个数字对应源代码的行数 第四个数字对应源代码的列数 第五个数字对应  names  列表的  name12年12月13⽇日星期四
  20. 20. 可以自己去上面我给出的例子中对照着 验证下12年12月13⽇日星期四
  21. 21. 答问题,抢旺仔! 为什么整出这么一套复杂的编码 方式呢?闲的蛋疼吗?12年12月13⽇日星期四
  22. 22. 延伸阅读: Base64  编码:http://blog.allenm.me/ 2012/11/base64-encoding/   Base64  VLQ编码:http:// blog.allenm.me/2012/12/base64-vlq- encoding/12年12月13⽇日星期四
  23. 23. 延伸阅读: SourceMap  文档:http://goo.gl/vtEVF SourceMap  介绍&视频:http:// goo.gl/5xQEy12年12月13⽇日星期四
  24. 24. Sass  还支持另外一种  SourceMap, Chrome  现在对它也有支持,需要 在调试工具设置项中开启,开启后 从上面给出的例子中也能看到效果12年12月13⽇日星期四
  25. 25. 目前SourceMap在Chrome中的表现 还不够稳定,支持SourceMap的工具 也不够多。 但我相信,在不久的将来,主流的对 前端源码做变换的工具、语言都将支 持SourceMap,我认为这是解决调试 难问题的良方。12年12月13⽇日星期四
  26. 26. Q&A12年12月13⽇日星期四

×