专栏首页IMWeb前端团队当 badjs 遇上 sourcemap

当 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 条评论
登录 后参与评论

相关文章

  • 当 badjs 遇上 sourcemap

    本文作者:IMWeb 九月 原文出处:IMWeb社区 未经同意,禁止转载 在开始之前,如果你不知道 sourcemap 是什么,希望你能先了解,可以看...

    IMWeb前端团队
  • 向Zepto学习关于"偏移"的那些事

    title: 向Zepto学习关于偏移的那些事 date: 2017-12-10 23:06:15

    IMWeb前端团队
  • 初尝 Jest 单元测试

    最近的几次发布都犯了小错,都是缺乏或者忽视了测试所导致的。通常来说,一个新功能上线的时候,开发和测试都投入比较多,各项测试都是比较全面的。然而,发布上线也并非意...

    IMWeb前端团队
  • 当 badjs 遇上 sourcemap

    本文作者:IMWeb 九月 原文出处:IMWeb社区 未经同意,禁止转载 在开始之前,如果你不知道 sourcemap 是什么,希望你能先了解,可以看...

    IMWeb前端团队
  • python 移动文件或文件夹操作

    1.得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd()

    py3study
  • redis源码阅读之集合对象

    redis当中集合对象的底层实现为intset和hashtable实现,用hashtable实现时,存储具体值的是key,value统一用NULL。其实集合对象...

    本人秃顶程序员
  • Docker 系列七(Duubo 微服务部署实践).

        之前我们公司部署服务,就是大家都懂的那一套(安装JDK、Tomcat —> 编译好文件或者打war包上传 —> 启动Tomcat),这种部署方式一直持续...

    JMCui
  • .NET 中什么样的类是可使用 await 异步等待的?

    发布于 2018-12-22 19:52 更新于 2018-12...

    walterlv
  • R语言对二分连续变量进行逻辑回归数据分析

    教育或医学的标准情况是我们有一项连续的措施,但随后我们对那些具有临床/实践意义的措施有了切入点。一个例子是BMI。您可能有一个成绩测试,合格分数为70。研究人员...

    拓端
  • 资讯 | 总奖金 200 万的 AI Challenger 开赛,可申请免费 GPU 资源

    记者 | 周翔 8 月 14 日,创新工场、搜狗和今日头条联合宣布共同发起“AI Challenger 全球 AI 挑战赛”。其中,CSDN 作为选手社区,为大...

    AI科技大本营

扫码关注云+社区

领取腾讯云代金券