专栏首页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

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

    IMWeb前端团队
  • 微信小程序购物车-多商家-多商品

    主要看shops页面, 前提:获取基本的数据,由于数据太长,还请下载项目后查看,github地址:https://github.com/cxy-js/wecha...

    IMWeb前端团队
  • 微信小程序购物车-多商家-多商品

    主要看一下购物车的计算过程 实现后的基本样式 ? ? 具体代码 主要看shops页面, 前提:获取基本的数据,由于数据太长,还请下载项目后查看,github地...

    IMWeb前端团队
  • 当 badjs 遇上 sourcemap

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

    IMWeb前端团队
  • Spring读书笔记——bean解析

    前情回顾 上篇《Spring读书笔记——bean加载》我们从代码角度介绍了有哪些类负责解析XML文件,又是如何一步步从XML格式脱变成我们熟悉的bean的,直到...

    JackieZheng
  • 基于注解的SpringAOP源码解析(三)

    在之前的2篇文章:AOP源码分析(一)AOP源码分析(二) 中,我们搭建了SpringAOP源码分析的环境,介绍了@EnableAspectJAutoProxy...

    Java学习录
  • 优图动态|优图鉴黄移动端体验上线啦,还不快把私藏图拿出来试试!

    优图小编今天要给大家介绍一个非常高端、非常好玩、非常稀奇、非常不可思议的功能体验——优图智能鉴黄。快关注“腾讯优图”微信公众号(二维码在文章下方),来跟随优图小...

    优图实验室
  • iOS【 ASO项目案例】之 Inter process Communication By Rrocketbootstrap

    原文:https://kunnan.blog.csdn.net/article/details/114694914

    公众号iOS逆向
  • EF 通过DataAnnotations配置属性和类型

     一、通过Attribute配置约束 1、主键约束 通过KeyAttribute来配置主键约束,代码如下: [Key] public int PrimaryKe...

    郑小超.
  • AI+泛娱|优图黑科技:测测你有多性感,压箱底儿的,还不快试试!

    刚刚过去的维密秀上,性感美女云集,一场视觉盛宴,可谓是赚足了大家的眼球。今天小编要介绍一种以腾讯优图黑科技为基础的性感指数测试玩法!!!

    优图实验室

扫码关注云+社区

领取腾讯云代金券