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

蚊子前端博客
发布于 2016-09-09 00:00
在移动端,没有了PC浏览器上调试代码的利器,导致我们很难排查和调试问题,于是我就简单的写了一个可把log输出到页面上的js代码

在移动端,没有了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/>'; } }

输出的结果是:

[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传给后端等。

标签:
阅读(514)

公众号:

qrcode

微信公众号:前端小茶馆

公众号:

qrcode

微信公众号:前端小茶馆