移动端在页面输出调试信息

原文地址：http://www.xiabingbao.com/phone/2016/09/09/phone-log.html
博客：http://www.xiabingbao.com

在移动端，没有了PC浏览器上调试代码的利器，导致我们很难排查和调试问题，于是我就简单的写了一个可把log输出到页面上的js代码。

那么log输出的日志里通常需要包含这些信息：

1. 当前时间，精确到秒或毫秒；
2. 输出想要输出的信息
3. 调试的文件；
4. log输出所在的行数，同一个文件可能有多个log输出，最好每个都能定位到行

通常第1个和第2个比较容易实现，直接获取当前date的时间，然后追加到页面上即可。但是当前所处的文件和行号好像不太好获取。

经常看console的时候应该知道，通常js出错的时候，console会给出错误信息和所在行号。这里我们也是这样的思路。

主动抛出错误，然后用try...catch进行接收，在catch里获取当前执行代码所在的行号

function log(){
    try{
        throw new Error();
    }catch(e){
        console.log(e.stack);
    }
}
log();

运行上面的代码，console里会这样的输出：

Error   // 抛出异常的类型
   at log (tools.html:175) // 抛出异常时的行号： throw new Error() ，这里也能看到其所处的函数和所在文件
   at tools.html:180  // 运行log函数的行号： log()

我们从e.stack里能获取不少的信息，同时，我们还能获取到log()执行所处的环境：

function a(){
    log()
}
a();
var obj = {
    func : function(){
        log();
    }
}
obj.func();

输出的信息是：

Error
   at log (tools.html:175)
   at a (tools.html:183)  // 在a函数中运行，执行log的位置是183
   at tools.html:185
---
Error
   at log (tools.html:175)
   at Object.b (tools.html:189) // 在Object.b函数中运行，执行log的位置是189
   at tools.html:192

我们再对e.stack进行优化处理一下，就可以获取到我们想要的信息了，完整的代码如下：

function log(msg){
    var $body = document.querySelector('body');

    if( !$body.querySelector('.info_wz_852') ){
        $body.innerHTML += '<div class="info_wz_852" style="position:fixed;top:0;left:0;z-index:99999; background:#000;color:#f00;"></div>';
    }

    var $info = $body.querySelector('.info_wz_852');
    var date = new Date(),
        minute = ('00'+date.getMinutes()).slice(-2),
        second = ('00'+date.getSeconds()).slice(-2);

    try{
        throw new Error();
    }catch(e){
        var loc = (e.stack.replace(/Error\n/).split(/\n/)[1]).replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,'');

        // var arr = loc.split(':'),
        //     col = parseInt(arr.pop()),
        //     line = parseInt(arr.pop());

        $info.innerHTML += '<p>['+minute+':'+second+'] '+loc+'</p><p>'+msg+'</p><br/>';
    }
}

输出的结果是：

[47:47] at foo (http://xxx.com/test/index.html:165:5)

123

[47:47] at http://xxx.com/test/index.html:171:1

456

当然，如果需要更复杂的功能，也可以继续添加，比如ajax传给后端等。

原文地址：http://www.xiabingbao.com/phone/2016/09/09/phone-log.html
博客：http://www.xiabingbao.com