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

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

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

1. 当前时间，精确到秒或毫秒；

2. 输出想要输出的信息

3. 调试的文件；

4. log输出所在的行数，同一个文件可能有多个log输出，最好每个都能定位到行

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

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

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

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

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

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

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

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

输出的信息是：

COPYBASH
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进行优化处理一下，就可以获取到我们想要的信息了，完整的代码如下：

COPYJAVASCRIPT
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/>';
    }
}

输出的结果是：

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