IE10 Error.stack 让脚本调试更加方便快捷

2019-01-28 18:49:22刘景俊

  在IE10中已经新加入了Error.stack 的支持,可以加快开发人员的脚本调试,并更正错误。尤其是一些难以重现的错误,如异步操作等。以下内容来自于微软IE团队,对于这个特性描述的非常详细。

调试应用程序

JavaScript 中的结构化错误处理依赖于 throwtry/catch,开发人员将在其中声明一个错误,并将控制流传递至处理错误的程序的某一部分。当某一错误被引发时,Chakra,即 Internet Explorer 中的 JavaScript 引擎将捕获引发该错误的调用链,这一过程也被称为调用堆栈。如果被引发的对象是一个 Error(或者是一个函数,且其原型链将导致 Error),那么 Chakra 将创建一个堆栈跟踪,即可人工读取的调用堆栈列表。该列表将被表示为一种属性,即 Error 对象中的 stackstack 包含错误消息、函数名称和该函数的源文件位置信息。这些信息将有助于开发人员了解所调用的函数,甚至查看错误的代码行,从而迅速诊断缺陷。例如,这些信息可能表明传递至函数的某一参数为空,或为无效类型。

让我们一同来查看一个简单的脚本,并以此展开深入讨论。该脚本试图计算 (0, 2)(12, 10) 两点间的距离:

复制代码

(function () {
'use strict';
function squareRoot(n) {
if (n < 0)
throw new Error('Cannot take square root of negative number.');
return Math.sqrt(n);
}
function square(n) {
return n * n;
}
function pointDistance(pt1, pt2) {
return squareRoot((pt1.x - pt2.x) + (pt1.y - pt2.y));
}
function sample() {
var pt1 = { x: 0, y: 2 };
var pt2 = { x: 12, y: 10 };
console.log('Distance is: ' + pointDistance(pt1, pt2));
}
try {
sample();
}
catch (e) {
console.log(e.stack);
}
})();

该脚本中包含一个缺陷,其未调整组件间的差异。因此,对于某些输入而言,pointDistance 函数将返回错误的结果;而在其他情况中,该脚本将导致错误发生。为了理解堆栈跟踪的含义,让我们一同来查看 F12 开发人员工具中的错误,并查看其脚本选项卡:

屏幕截图中的 F12 开发人员工具显示了一个由调用 console.log(e.stack) 记录的堆栈跟踪,其中 e 是传递至 try/catch 数据块中 catch 子句的错误对象。