Shulou(Shulou.com)06/03 Report--

This article shows you how to understand IE10 Error.stack to make script debugging more convenient, concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Error.stack support has been added to IE10 to speed up developers' script debugging and correct errors. Especially some errors that are difficult to reproduce, such as asynchronous operations. The following is from the Microsoft IE team, which describes this feature in great detail.

Debug the application

Structured error handling in JavaScript relies on throw and try/catch, where the developer declares an error and passes the control flow to some part of the program that handles the error. When an error is thrown, the Chakra, the JavaScript engine in Internet Explorer, captures the call chain that caused the error, a process also known as the call stack. If the object being thrown is an Error (or a function whose prototype chain will cause Error), Chakra creates a stack trace, a list of calls that can be read manually. The list will be represented as an attribute, the stack in the Error object. Stack contains the error message, the name of the function, and the source file location information for the function. This information will help developers understand the functions being called and even look at the wrong lines of code to diagnose defects quickly. For example, this information may indicate that a parameter passed to the function is empty or is of an invalid type.

Let's take a look at a simple script and discuss it in depth. The script attempts to calculate the distance between (0,2) and (12,10) points:

The code is as follows:

(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 开发人员工具中的错误，并查看其脚本选项卡：

The stack trace is dumped to the console in the catch clause, and because it is at the top of the stack, errors originating from the squareRoot function will become obvious. To debug this problem, developers do not need to drill down into the stack trace; the system has violated the precondition of squareRoot and only needs to look one level up the stack, and the reason becomes clear: the subexpression within the squareRoot call should itself be an argument to square.

During debugging, the stack property will help identify the code used to set the breakpoint. Remember: you can also use other methods to view the call stack: for example, if you set the script debugger to break by catching an exception, you can use the debugger to check the call stack. For deployed applications, consider merging the problem code within try/catch to capture failed calls and record them on the server. The developer can then view the call stack to isolate the problem area.

DOM exception and Error.stack

Previously, I have noticed that the object being thrown must be Error or cause Error through its prototype chain. This is intentional; JavaScript can support throwing any object, even as an exception primitive. Although all these objects can be captured and checked by the system, their full use does not contain errors or diagnostic information. Therefore, only the wrong stack property will be updated during the throw.

Even if the objects are DOM exceptions, they do not contain the prototype chain that can cause Error, so they will not contain the stack property. In some application scenarios where you need to perform DOM operations and want to expose JavaScript compatibility errors, you may want to merge your DOM operation code in the try/catch data block and raise a new Error object in the catch clause:

The code is as follows:

Function causesDomError () {

Try {

Var div = document.createElement ('div')

Div.appendChild (div)

} catch (e) {

Throw new Error (e.toString ())

}

}

However, you may want to consider whether to use this pattern. This is probably the best pattern for utility library development, especially when you consider whether the code is intended to hide DOM operations or simply perform a task. If the goal is to hide the DOM operation, then merging the operation and raising the Error may be the right way to choose. Performance consideration

The construction of a stack trace begins when the error object is thrown; to construct a stack trace, you need to look at the current execution stack. To prevent performance problems (and even possible recursive stack chains) during traversing large stacks, IE collects only the top ten stack frames by default. However, this setting can be configured by setting the static property Error.stackTraceLimit to another value. This setting is global and must be changed before an error is raised, otherwise it will have no effect on the stack trace.

Asynchronous exception

When a stack is generated by an asynchronous callback (such as timeout, interval, or XMLHttpRequest), the asynchronous callback (rather than the code created by the asynchronous callback) is located at the bottom of the call stack. This will have some potential impact on tracking problematic code: if you use the same callback function for multiple asynchronous callbacks, it will be difficult for you to determine which callback caused the error by checking separately. Let's modify the previous example slightly. We will avoid calling sample () directly, and instead put it in the timeout callback:

The code is as follows:

(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 事件，那么您将无法分辨注册将引用哪一回调。话虽如此，这一限制作用毕竟有限，因为在大多数情况中，堆栈顶部可能将突出显示问题区域。观看体验演示

Learn about the use of IE10 in Windows 8 Consumer Preview. You can execute code in the context of eval, and if an error occurs, you can detect the error. If you run code within IE10, you can also highlight your lines of code because you can hover the lines of error code in the stack trace. You can enter the code into the code area yourself, or choose from several examples in the list. In addition, you can set the Error.stackTraceLimit value when you run the code example. The above content is how to understand IE10 Error.stack to make script debugging easier and faster, have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.