在移动端,没有了PC浏览器上调试代码的利器,导致我们很难排查和调试问题,于是我就简单的写了一个可把log输出到页面上的js代码
在移动端,没有了PC浏览器上调试代码的利器,导致我们很难排查和调试问题,于是我就简单的写了一个可把log输出到页面上的js代码。
那么log输出的日志里通常需要包含这些信息:
当前时间,精确到秒或毫秒;
输出想要输出的信息
调试的文件;
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/>'; } }
输出的结果是:
[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传给后端等。