• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > IE10 Error.stack 让脚本调试更加方便快捷

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含IE10,Error.stack,脚本调试等相关知识,佚名 希望在学习及工作中可以帮助到您

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

调试应用程序

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

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

屏幕截图中的 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 对象:

性能注意事项

堆栈跟踪的构造始于错误对象被引发之时;构造堆栈跟踪需要查看当前执行堆栈。为了防止遍历特大堆栈过程中出现性能问题(甚至可能出现的递归堆栈链),默认情况下,IE 仅将收集前十位的堆栈帧。然而该设置可通过将静态属性 Error.stackTraceLimit 设置为另一数值而得以配置。该设置是全局性的,而且必须在引发错误之前 进行变更,否则其将对堆栈跟踪无效。

异步异常

当某一堆栈是由异步回调(例如 timeout、interval 或 XMLHttpRequest)生成,那么异步回调(而非由异步回调创建的代码)将位于调用堆栈的底部。这将对跟踪有问题的代码产生某些潜在影响:如果您对多个异步回调使用相同的回调函数,那么您将难于通过单独检查而确定是哪一回调产生了错误。让我们对此前的示例稍作修改,我们将避免直接调用 sample(),而是将其放入超时回调:

观看体验演示

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

了解 Windows 8 Consumer Preview 中 IE10 的使用情况。您可在 eval 的上下文中执行代码,如果发生错误,您便可检查出该错误。如果您在 IE10 内运行代码,由于您可将错误代码行悬停于堆栈跟踪中,因此您也可突出显示您的代码行。您可自行将代码输入到代码区域,或者从列表中的数个示例中进行选择。此外,您还可在运行代码示例时设置 Error.stackTraceLimit 值。

如欲查看参考材料,请浏览有关 Error.stack 和 stackTraceLimit 的 MSDN 文档。

您可能想查找下面的文章:

  • HTML5在IE10、火狐下中文乱码问题的解决方法
  • 基于IE10/HTML5 开发
  • IE10 Error.stack 让脚本调试更加方便快捷
  • IE10 Error.stack 让脚本调试更加方便快捷_html5教程技巧
  • 基于IE10/HTML5 开发_html5教程技巧
  • HTML5在IE10、火狐下中文乱码问题的解决方法_html5教程技巧

相关文章

  • 2018-12-03svg如何实现坐标系统变换(附代码)
  • 2018-12-03HTML5 canvas实现雪花飘落特效_html5教程技巧
  • 2018-12-03HTML5 js实现拖拉上传文件功能
  • 2018-12-03HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer
  • 2018-12-03canvas实现动态小球重叠的效果代码
  • 2017-08-06HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
  • 2018-12-03HTML5 用来手机建站能不能实现在各种设备上的良好展现?
  • 2018-12-03HTML5 canvas基本绘图之绘制线条
  • 2018-12-03html5中重新加载音频/视频元素的方法load()
  • 2018-12-03HTML页面中添加Canvas标签示例_html5教程技巧

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5学习笔记简明版(9):变化的元素和属性
    • Html5中video标签的用法:如何自动填充满父div标签
    • HTML5的结构和语义(4):语义性的内联元素
    • 移动端中touch事件的详解
    • 关于 HTML5 的七个传说小结
    • 用html5的canvas和JavaScript创建一个绘图程序的简单实例
    • html5生成柱状图(条形图)效果的实例代码
    • Html5实现文件异步上传功能
    • 介绍HTML5+Canvas调用手机拍照功能实现图片上传(下篇)
    • 读了这篇不看好 HTML5 的文章,你有什么感想?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有