当 badjs 遇上 sourcemap

本文作者:IMWeb 九月 原文出处:IMWeb社区 未经同意,禁止转载

在开始之前,如果你不知道 sourcemap 是什么,希望你能先了解,可以看看 阮博士的文章,或者 Google 搜一下。并且,已知的构建工具都已经支持 生成 sourcemap 了。同时也希望你了解一下badjs是什么

在实际项目中,不管出于什么原因的考虑,一般很少将 sourcemap 文件发布到外网,甚至很多项目根本没有生成 sourcrmap 文件。但是,基于 sourcemap 用源码调试应该是一件很 nice 的事情,让 sourcemap 发布到内网的服务器不就好了?

为了解决这个问题,我们在内网搭建了一个 sourcemap 的文件服务器,并在构建的时候将生成的 sourcemap 文件通过badjs-sourcemap发布到该文件服务器。

到此,如果你希望项目生成 sourcemap 并通过源码进行调试,只需要在构建的时候加入一个这个:

// 以 grunt 为例
grunt.registerTask('publish:sourcemap', 'publish sourcemap', function() {
    var done = this.async(); // 异步
    var options = {
        from: 'dist/', // 需要同步的文件路径
        to: '7.url.cn/edu/', // 服务器保存的路径
        match: '**/*.map', // 需要同步的文件
        server: 'http://10.208.138.222:443/upload.map' // badjs-sourcemap-server 部署的服务器
    };
    require('badjs-sourcemap')(options, done);
});

// 再比如 gulp 接入
gulp.task('publish:sourcemap', ['uglify'], function(callback) {
    var options = {
        from: 'dist/',
        to: '7.url.cn/edu/',
        match: '**/*.map',
        server: 'http://10.208.138.222:443/upload.map'
    };
    require('badjs-sourcemap')(options, callback);
});

如果想要更流畅的体验, 只需要在服务器转发 以.map结尾 的请求,同时在 js 文件的末尾添加

//# sourceMappingURL=xxx.map

当你打开控制台的时候, sourcemap 文件将自动加载,如图:

这里留一个问题给大家思考:为什么通过 sourcemap 生成的源码文件是在 dist 目录下的,或者说 sourcemap 文件为什么必须指定 sourceRoot 且不能为空或指向当前目录?

到此好像跟 badjs 都没什么关系,但是,结合 badjs 的上报,我们拿到的都是压缩后的文件名行号和列号,通过 sourcemap,就可以直接定位到源码的位置了。

接下来的问题是:让 badjs 通过 hash 将 错误信息带到页面且打印到 console。 首先,badjs 管理后台页面查看时将 错误信息通过 hash 带到页面,如图(可以右键打开新tab查看大图):

并且让 badjs-report 自动获取该 hash 并通过 console.error 打印到控制台,如图:

此外,你应该知道,在 Chrome 开发者工具的控制台输出 一个带行号和列号的的链接且该链接指向的资源可以在 Sources 面板找到, 比如:

最后,放一张整个过程的 Gif(图片有点大,可以右键打开新tab查看大图):

脑图: http://naotu.baidu.com/file/5830485fa2e5feb9c00eb313083bc82a?token=4265220a399b713a

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏铭毅天下

干货 | Elasticsearch Reindex性能提升10倍+实战

reindex和snapshot的速率比用filebeat或者kafka到es的写入速率慢好几个数量级(集群写入性能不存在瓶颈),reindex/snapsho...

23820
来自专栏网络

强大的开源网络侦查工具:IVRE

IVRE简介 IVRE(又名DRUNK)是一款开源的网络侦查框架工具,IVRE使用Nmap、Zmap进行主动网络探测、使用Bro、P0f等进行网络流量被动分析,...

40170
来自专栏云成本管理

云成本管理方法论(三)——云优化管理之判定规则

云优化管理四个管理维度中管理时点在通用管理模型基础上不需要额外补充,所以主要说明其他三个维度(管理对象、判定规则和管理措施)。另外,为了贴近我们熟悉的优化概念,...

530200
来自专栏北京马哥教育

关于IO的同步,异步,阻塞,非阻塞

上次写了一篇文章:Unix IO 模型学习。恰巧在这次周会的时候,@fp1203 (goldendoc成员之一) 正好在讲解poll和epoll的底层实现。中途...

314100
来自专栏Laoqi's Linux运维专列

中小型网站架构分析及优化

39240
来自专栏HappenLee的技术杂谈

副本机制与副本同步------《Designing Data-Intensive Applications》读书笔记6

首先,如果副本的数据不随时间变化,那么副本的管理是比较简单的:只需要将数据复制到每个节点一次,就OK了。副本管理真正的困难在于对副本数据的修改,这会涉及到很多琐...

14930
来自专栏移动开发的那些事儿

IM二分法智能心跳策略

19030
来自专栏pythonlove

I/O模型

目前我们网络所面临的依然是高并发的问题,就像某cat双11时的情况,瞬间的并发量是惊人的,当然我们会有很多种方法去解决这个问题,本文我们谈论的是单台服务器,如何...

12420
来自专栏北京马哥教育

8分钟带你深入浅出搞懂Nginx

Nginx是一款轻量级的Web服务器、反向代理服务器,由于它的内存占用少,启动极快,高并发能力强,在互联网项目中广泛应用。 ? 架构图 上图基本上说明了当下流...

45670
来自专栏京东技术

如何实现靠谱的分布式锁?(附SharkLock的设计选择)

当前使用较多的分布式锁方案主要基于 Redis、ZooKeeper 提供的功能特性加以封装来实现的,下面我们会简要分析下这两种锁方案的处理流程以及它们各自的问题...

17930

扫码关注云+社区

领取腾讯云代金券