对于前端开发人员,在开发过程中经常需要监控某些表达式或变量的值,如果使用用debugger会显得过于笨重,最常用的方法是会将值输出到控制台上方便调试。最常用的语句就是console.log(expression)了。
从早前一道阿里实习生招聘笔试题目入手:
function f1() { console.time('time span'); } function f2() { console.timeEnd('time span'); } setTimeout(f1, 100); setTimeout(f2, 200); function waitForMs(n) { var now = Date.now(); while (Date.now() - now < n) { }//空while } waitForMs(500);//输出什么? //->time span: 0ms //实际测试输出的是 time span: 0.023ms //实际的time是不确定的接近于0ms的,而不是0ms; |
我们先说说关于console的高级操作,最后在一起分析这道题目。
trace
console.trace()用来追踪函数的调用过程。
在大型项目尤其是框架开发中,函数的调用轨迹可以十分复杂,console.trace()方法可以将函数的被调用过程清楚地输出到控制台上。
function tracer(a) {
console.trace();
return a;
}
function foo(a) {
return bar(a);
}
function bar(a) {
return tracer(a);
}
var a = foo('tracer');
输出chrome:
console.trace()
tracer @ VM127:3
bar @ VM127:12
foo @ VM127:8
(anonymous function) @ VM127:15
InjectedScript._evaluateOn @ VM116:895
InjectedScript._evaluateAndWrap @ VM116:828
InjectedScript.evaluate @ VM116:694
table