IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

使用 SourceMap 来进行前端代码调试

阿里巴巴(中国站)用户体验设计部博客 2012-12-18 23:06:31 累计浏览 3,109 次
本机暂存

   此文原载于: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

同分类推荐文章

  1. 新特性速递:focus()行为新增focusVisible控制 (2026-05-29 16:23:06)
  2. Algorithmic Theming Engines: Building Self-Correcting Color Systems With `contrast-color()` (2026-05-28 21:00:00)
  3. Revealing Text With CSS letter-spacing (2026-05-27 20:37:33)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,266)
  2. 程序员技术练级攻略 (累计阅读 35,197)
  3. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,269)
  4. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,805)
  5. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,764)
  6. 天朝第二代身份证号码的验证机制 (累计阅读 14,689)
  7. HTML 5 的data-* 自定义属性 (累计阅读 14,246)
  8. 分享一个JQUERY颜色选择插件 (累计阅读 14,146)
  9. 什么是全栈工程师? (累计阅读 13,948)
  10. 快速排序(Quicksort)的Javascript实现 (累计阅读 11,641)