九月

2015-11-30 21:06

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

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

接下来的问题是:让 badjs 通过 hash 将 错误信息带到页面且打印到 console。 首先,badjs 管理后台页面查看时将 错误信息通过 hash 带到页面,如图(可以右键打开新tab查看大图): BJ_ERROR 并且让 badjs-report 自动获取该 hash 并通过 console.error 打印到控制台,如图: console.error

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

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

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

0条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。