Source Map入门教程

部署前端之前,开发者通常会对代码进行打包压缩,这样可以减少代码大小,从而有效提高访问速度。然而,压缩代码的报错信息是很难Debug的,因为它的行号和列号已经失真。这时就需要Source Map来还原真实的出错位置了。

fundebug-sourcemap.jpg

为啥变换代码?

前端代码越来越复杂的情况下,开发者通常会使用webpackUglifyJS2等工具对代码进行打包变换,这样可以减少代码大小,有效提高访问速度。关于变换代码的原因,这里不妨引用一下大神阮一峰JavaScript Source Map 详解:

压缩,减小体积。比如jQuery 1.9的源码,压缩前是252KB,压缩后是32KB。 多个文件合并,减少HTTP请求数。 其他语言编译成JavaScript。最常见的例子就是CoffeeScript。

如何变换代码?

下面是一个简单的“hello World”程序hello.js

function sayHello()
{
    var name = "Fundebug";
    var greeting = "Hello, " + Name;
    console.log(greeting);
}

sayHello();

使用UglifyJS2对源代码进行压缩变换:

uglifyjs hello.js \
         -m toplevel=true \
         -c unused=true,collapse_vars=true \
         -o hello.min.js

压缩后的代码hello.min.js

function o(){var o="Hello, "+Name;console.log(o)}o();

为啥需要Source Map?

使用Firefox执行hello.js的报错信息是这样:

ReferenceError: Name is not defined
	sayHello file:///Users/fundebug/sourcemap-tutorial/hello.js:4:9
	<匿名> file:///Users/fundebug/sourcemap-tutorial/hello.js:8:1

hello.min.js的报错信息是这样:

ReferenceError: Name is not defined
	o file:///Users/fundebug/sourcemap-tutorial/hello.min.js:1:18
	<匿名> file:///Users/fundebug/sourcemap-tutorial/hello.min.js:1:59

对比压缩前后的出错信息,我们会发现,错误行号和列号已经失真,且函数名也经过了变换。而对于真实的前端项目,开发者会将数十个源文件压缩为一个文件,这时,错误的列号可能多达数千,且出错的真实文件名也是很难确定的,这样的话,压缩代码的报错信息是很难Debug的。

而Source Map则可以用于还原真实的出错位置,帮助开发者更快的Debug。

什么是Source Map?

使用UglifyJS2时指定source-map选项即可生成Source Map:

uglifyjs hello.js \
         -m toplevel=true \
         -c unused=true,collapse_vars=true \
         --source-map hello.min.js.map \
         --source-map-include-sources \
         --source-map-root \
         -o hello.min.js

各种主流前端任务管理工具,打包工具都支持生成Source Map,具体可以查看生成Source Map - Fundebug文档

生成的hello.min.js多了sourceMappingURL,表示Source Map文件的位置。

function o(){var o="Hello, "+Name;console.log(o)}o();
//# sourceMappingURL=hello.min.js.map

生成的Source Map为hello.min.js.map:

{
    "version": 3,
    "sources": ["hello.js"],
    "names": ["sayHello", "greeting", "Name", "console", "log"],
    "mappings": "AAAA,QAASA,KAEL,GACIC,GAAW,UAAYC,IAC3BC,SAAQC,IAAIH,GAGhBD",
    "file": "hello.min.js",
    "sourceRoot": "",
    "sourcesContent": ["function sayHello()\n{\n    var name = \"Fundebug\";\n    var greeting = \"Hello, \" + Name;\n    console.log(greeting);\n}\n\nsayHello();\n"]
}

hello.min.js.map可知,Source Map是一个JSON文件,而它包含了代码转换前后的位置信息。也就是说,给定一个转换之后的压缩代码的位置,就可以通过Source Map获取转换之前的代码位置,反过来也一样。Source Map各个属性的含义如下:

  • version:Source Map的版本号。
  • sources:转换前的文件列表。
  • names:转换前的所有变量名和属性名。
  • mappings:记录位置信息的字符串,经过编码。
  • file:(可选)转换后的文件名。
  • sourceRoot:(可选)转换前的文件所在的目录。如果与转换前的文件在同一目录,该项为空。
  • sourcesContent:(可选)转换前的文件内容列表,与sources列表依次对应。

Source Map真正神奇之处在于mappings属性,它记录了位置是如何对应的。JavaScript Source Map 详解已经有很好的解释,这里不再赘述。

怎样使用Source Map?

主流浏览器均支持Source Map功能,不过Chrome与Firefox需要一些简单的配置,具体步骤请参考How to enable source maps。下面以MacBook上的Chrome浏览器为例,介绍一下配置方法:

1. 开启开发者工具

使用快捷键option + command + i;或者在菜单栏选择视图->开发者->开发者工具

chrome-sourcemap1.png

2. 打开设置

使用快捷键fn + F1;或者点击右上角的三个点的图标,选择Settings

chrome-sourcemap2.png

3. 开启Source Map

在Sources中,选中Enable JavaScript source maps

chrome-sourcemap3.png

为了测试,我写了一个简单的HTML文件hello.min.html

<head>
	<script type="text/javascript" src="hello.min.js"></script>
</head>

使用Chrome打开hello.min.html,在控制台看到的错误如下:

Uncaught ReferenceError: Name is not defined
    at o (hello.min.js:1)
    at hello.min.js:1

报错的文件仍然为hello.min.js,需要刷新一下Source Map才有作用:

Uncaught ReferenceError: Name is not defined
    at o (hello.js:4)
    at hello.js:8

注意,Chrome的报错信息没有列号,因此4为错误的行号。Chrome不仅可以通过Source Map还原真实的出错位置,还可以根据Source Map的sourcesContent还原出错的源代码。点击出错位置,即可跳转到源码,这样Debug将非常方便。

chrome-sourcemap4.png

参考链接

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了6亿+错误事件,得到了Google、360、金山软件等众多知名用户的认可。欢迎免费试用!

版权声明

转载时请注明作者Fundebug以及本文地址:

https://blog.fundebug.com/2017/03/13/sourcemap-tutorial/

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python

python select模块详解

要理解select.select模块其实主要就是要理解它的参数, 以及其三个返回值。 select()方法接收并监控3个通信列表, 第一个是所有的输入的data...

52660
来自专栏偏前端工程师的驿站

Java魔法堂:找外援的利器——Runtime.exec详解

一、前言                                  Java虽然五脏俱全但总有软肋,譬如获取CPU等硬件信息,当然我们可以通过JNI调用...

225100
来自专栏Android 研究

Android跨进程通信IPC之2——Bionic

Bionic库是Android的基础库之一,也是连接Android系统和Linux系统内核的桥梁,Bionic中包含了很多基本的功能模块,这些功能模块基本上都是...

27340
来自专栏社区的朋友们

在共享内存实现 Redis(下)

从实现方式入手,设计了一种综合二者优点的方案:将 Redis 做成数据逻辑分离,数据存放共享内存,进程只负责存储逻辑,同时解决 Redis 长命令卡顿和 for...

45300
来自专栏风口上的猪的文章

.NET面试题系列[17] - 多线程概念(2)

当我们创建了一个线程后,线程里面主要包括线程内核对象、线程环境块、1M大小的用户模式栈和内核模式栈。

52220
来自专栏青玉伏案

Objective-C中的Block回调模式

        在前面的博客中提到了Block的概念和使用方法,个人感觉Block最爽的用法莫过于在回调时用block。感觉比委托回调和目标方法回调用着要顺手,...

28650
来自专栏noteless

[一]FileDescriptor文件描述符 标准输入输出错误 文件描述符

当应用程序请求打开或者操作文件时,操作系统为应用程序设置一张文件列表,具体的实现形式此处不深入说明

32220
来自专栏数据之美

线上服务 CPU 100%?一键定位 so easy!

背景 经常做后端服务开发的同学,或多或少都遇到过 CPU 负载特别高的问题。尤其是在周末或大半夜,突然群里有人反馈线上机器负载特别高,不熟悉定位流程和思路的同学...

53080
来自专栏magicsoar

C++ socket网络爬虫(1)

C++写的socket网络爬虫,代码会在最后一次讲解中提供给大家,同时我也会在写的同时不断的对代码进行完善与修改 我首先向大家讲解如何将网页中的内容,文本,图片...

59450
来自专栏北京马哥教育

Python imports指南

来源:Python程序员 ID:pythonbuluo 声明:如果你每天写Python,你会发现这篇文章中没有新东西。 这是专为那些像运维人员等偶尔使用Pyt...

26250

扫码关注云+社区

领取腾讯云代金券