此文原载于:http://blog.allenm.me/2012/12/whats-sourcemap/

今天在方凳会上做了一次 SourceMap 的分享。现在在博客上分享出来给大家。

简介:

什么是 SourceMap 呢?

在这个年代,对于前端开发来说,很少有用户浏览器执行的代码和我们写的 code 完全相同的情况。因为我们的代码一般要经过压缩、合并。另外现在还有 sass, less, stylus, coffscript, typescript 等等预编译语言。那么在这些情况下我们如何进行调试呢?SourceMap 就是为了解决这个问题而生的,虽然它还不够成熟,支持它的工具还不够多,但是我们能从它身上看到未来。

欲了解详情,请观看下面的 slide 吧。(有疑问或者建议可以在下面评论交流,或者微博 @allenm 进行交流)

sourcemap.001

sourcemap.003

sourcemap.004

sourcemap.005

sourcemap.006

sourcemap.007

sourcemap.008

sourcemap.009

sourcemap.010

sourcemap.011

sourcemap.012

sourcemap.013

sourcemap.014

sourcemap.015

sourcemap.016

sourcemap.017

sourcemap.018

sourcemap.019

sourcemap.020

sourcemap.021

sourcemap.022

sourcemap.023

sourcemap.024

sourcemap.025

sourcemap.026

slide 中链接:

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

Category: 前端

标签 ,

6 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  1. Yeyucangmang说道:

    为毛不用firebug ?

  2. allen meng说道:

    firebug 支持 sourcemap 吗?另外 firebug 真心没 chrome developer toolbar 好用

  3. justjavac说道:

    没用js做过什么大项目,都是一些jquery特效,ajax调用,直接用firebug挺好的。

  4. Robin说道:

    查看cookie的时候发现firebug还是比chrome developer toolbar 有有点优势的,chrome看到的都是编译后的代码,而firebug不会,可以看会中文,内容一目了然

  5. 楔子说道:

    不错现在正在用sourcemap调试less