Source Map入门教程-低调大师

Source Map入门教程

2018-09-25 760

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

为啥变换代码？

前端代码越来越复杂的情况下，开发者通常会使用webpack、UglifyJS2等工具对代码进行打包变换，这样可以减少代码大小，有效提高访问速度。关于变换代码的原因，这里不妨引用一下大神阮一峰的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；或者在菜单栏选择视图->开发者->开发者工具

2. 打开设置

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

3. 开启Source Map

在Sources中，选中Enable JavaScript source maps

为了测试，我写了一个简单的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将非常方便。

参考链接

关于Fundebug

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

版权声明

转载时请注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/03/13/sourcemap-tutorial/

微信关注我们

原文链接：https://yq.aliyun.com/articles/645487

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

python 搭建系统监控

yum install -y glances pip install Bottle glances -w

2018-09-26

593

Py't'hon语言与Linux系统管理 Py't'hon生态工具打造命令行工具文本处理 Linux系统管理使用python监控Linux系统文档与报告网络 Python自动化部署深入浅出Ansible 使用Python打造Mysql专家系统启动简易下载器：python -m SimpleHTTPServer python -m SimpleHTTPServer python -m json.tool 格式化json image.png 临时python指令：python -c "print 'aaa'" pip升级：pip install -U pip pip常用指令 image.png 更改pip的安装源： vi ~/.pip/pip.conf [global] index-url=https://pypi.douban.com/simple/ 下载软件到本地安装： pip install --download='pwd' -r requirements.txt pip install --no-index -f file://'pwd' -r requirement...

2018-09-26

684

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。