欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

IE10 Error.stack 让剧本调试越发利便快捷

发布时间:2016-11-28  编辑:杨雨个人博客网站   点击:   

  在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 子句的错误工具。

仓库跟踪将转储至 catch 子句中的节制台,因为其位于仓库的顶部,因此发源于 squareRoot 函数的错误将变得显而易见。为了调试这一题目,开拓职员无需深入查察仓库跟踪;体系已违背 squareRoot 的前置前提,并且只需查察仓库的上一级,缘故起因将变得十理解了:squareRoot 挪用内的子表达式自身应该为 square 的参数。

调试进程中,stack 属性将有助于辨认用于配置断点的代码。请记着:您还可行使其余要领来查察挪用仓库:譬喻,假如您将剧本调试措施配置为“捕捉非常即间断”的模式,那么您可行使该调试措施来搜查挪用仓库。对付陈设的应用措施,您可思量在 try/catch 内归并题目代码,以捕捉失败的挪用,并将其记录于处事器中。随后,开拓职员可查察挪用仓库,以断绝题目地区。

DOM 非常与 Error.stack

此前,我曾留意到被激发的工具必需为 Error 或通过其原型链导致 Error。这是故意而为之;JavaScript 可支持激发任何工具,乃至包罗作为非常的基元。尽量体系可捕捉和搜查全部这些工具,可是它们的所有效途并非包括错误或诊断信息。因此,激发进程中仅将更新错误的 stack 属性。

即便工具为 DOM 非常,它们也不包括可导致 Error 的原型链,因此它们将不包括 stack 属性。在某些应用场景中,您必要执行 DOM 操纵,并但愿袒露 JavaScript 兼容的错误,那么您也许但愿在 try/catch 数据块内归并您的 DOM 操纵代码,并在 catch 子句中激发一个新的 Error 工具:


代码如下:
function causesDomError() {
try {
var div = document.createElement('div');
div.appendChild(div);
} catch (e) {
throw new Error(e.toString());
}
}

然而,您也许将思量是否要行使该模式。这大噶鲱合用于适用器材库开拓的模式,出格是在您思量代码的意图是否为潜匿 DOM 操纵或简朴地实验某一使命的时辰。假如其目标为潜匿 DOM 操纵,那么归并操纵并激发 Error 也许是我们必要选择的正确方法。

机能留意事项

仓库跟踪的结构始于错误工具被激发之时;结构仓库跟踪必要查察当前执行仓库。为了防备遍历特大仓库进程中呈现机能题目(乃至也许呈现的递归仓库链),默认环境下,IE 仅将网络前十位的仓库帧。然而该配置可通过将静态属性 Error.stackTraceLimit 配置为另一数值而得以设置。该配置是全局性的,并且必需在激发错误之前 举办改观,不然其将对仓库跟踪无效。

异步非常

当某一仓库是由异步回调(譬喻 timeoutintervalXMLHttpRequest)天生,那么异步回调(而非由异步回调建设的代码)将位于挪用仓库的底部。这将对跟踪有题目的代码发生某些隐藏影响:假如您对多个异步回调行使沟通的回调函数,那么您将难于通过单独搜查而确定是哪一回调发生了错误。让我们对此前的示例稍作修改,我们将停止直接挪用 sample(),而是将其放入超时回调:


代码如下:
(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));
}
setTimeout(function () {
try {
sample();
}
catch (e) {
console.log(e.stack);
}
}, 2500);
})();

一旦执行该代码段,您将发明仓库跟踪将呈现稍许耽误。此时,您将同时发明仓库底部并非全局性代码,而是Anonymous function。究竟上,这并非统一匿名函数,而是转达至 setTimeout 的回调函数。因为您丢失了与挂起回调有关的上下文,因此您也许无法确定挪用回调的内容。假如在某一应用场景中,体系注册了某一回调来处理赏罚很多差异按钮的 click 变乱,那么您将无法判别注册将引用哪一回调。话虽云云,这一限定浸染事实有限,由于在大大都环境中,仓库顶部也许将突出表现题目地区。

寓目体验演示

Explore Error.stack 体验演示的屏幕截图

相识 Windows 8 Consumer Preview 中 IE10 的行使环境。您可在 eval 的上下文中执行代码,假如产生错误,您便可搜查出该错误。假如您在 IE10 内运行代码,因为您可将错误代码行悬停于仓库跟踪中,因此您也可突出表现您的代码行。您可自行将代码输入到代码地区,可能从列表中的数个示例中举办选择。另外,您还可在运行代码示例时配置 Error.stackTraceLimit 值。

如欲查察参考原料,请赏识有关 Error.stackstackTraceLimit 的 MSDN 文档。

本文地址:http://itbyc.com/web/html5/13646.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1