[新课双发]《Source Map 使用详解》和《Source Map 工作原理》

96
作者 goddyzhao
2017.09.11 21:50 字数 944

我们都知道 JavaScript 代码一旦发布到线上,通常都是被压缩甚至是编译(转换)过的,比如:现在大家都用 ES6 甚至是 TypeScript 来书写代码,但浏览器并不全都支持这些新的语法,因此通常都会利用 Babel 或者直接 Webpack 这类构建工具来将源代码编译(转换)为 ES5 或者 ES3。这样一来,既可以享受新语法带来的编码快感,又可以兼顾浏览器的兼容性,甚好!

但是问题也来了,这个时候浏览器运行的其实已经不是你开发时候书写的代码了,比如像这样的来自「知乎首页」的某个 JavaScript 文件的代码:

知乎首页某个 JavaScript 中的部分代码
知乎首页某个 JavaScript 中的部分代码

你看上述代码都是被完全压缩的,而且这些代码实际上都是在一行的(上图中是浏览器显示的时候给换行了),基本不可读。当然有同学会说,可以通过开发者工具看源码啊!老司机就是老司机,那我们就来看下 Chrome 开发者工具中通过 Sources 标签以及 Pretty Print 后看到的结果:

通过 Chrome 开发者工具 - Sources 标签下 Pretty Print 后的代码
通过 Chrome 开发者工具 - Sources 标签下 Pretty Print 后的代码

看着比刚才好多了吧,但是你会发现里面函数名和变量名都被压缩工具给替换掉了,调试起来也是挺费劲的。

那么有什么办法呢?

以往我们可以用网络代理工具,来讲压缩后的代码替换成源代码来进行调试,比如可以用 Fiddler 这样的代理工具,当浏览器请求这个压缩的 JavaScript 代码时,就用本地的源代码来替换掉,这样浏览器这次运行的就是你本地的源代码了,可以很方便的调试了。这个方法也用了很长一段时间,其实也挺好的,就是得弄代理和文件替换,尤其是遇到合并过的代码略显麻烦!

后来有了「Source Map」,就更好地解决掉了这个问题。它是直接浏览器开发者工具层面支持的,只要你构建过程中为同时生成一个 Source Map 文件,并在压缩 / 编译后 的 JavaScript 最后写明它对应的 Source Map 文件的位置,浏览器就让你直接使用源代码进行调试了。有了 Source Map,虽然浏览器实际运行的还是压缩过的代码,但是你调试的时候看到的代码却可以是源代码。

今天我们发布的课程之一《Source Map 使用详解》就是一步步教大家如何来使用 Source Map 实现线上代码调试,以及 Source Map 使用过程中需要注意的一些点。

学技术不仅要学会如何使用一门技术,更要理解它底层究竟是如何工作的。而「JSCourse」不仅授人以鱼更注重授人以渔,所以,当你掌握了如何使用 Source Map 解决工程问题后,我们又为大家准备了《Source Map 工作原理》来给大家揭开 Source Map 背后的机制是怎么样的, Source Map 是如何能让浏览器在运行压缩的代码同时能够找到源代码的。这样能够帮助大家更加透彻地了解 Source Map,好了,赶紧进入课程吧(微信扫面如下二维码或者搜索关注「jscourse」公众号 - 回复「sourcemap」即可获取这两门课程)!


jscourse