本篇文章為大家展示了如何理解IE10 Error.stack讓腳本調(diào)試更加方便快捷，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)建站堅(jiān)信：善待客戶(hù)，將會(huì)成為終身客戶(hù)。我們能堅(jiān)持多年，是因?yàn)槲覀円恢笨芍档眯刨?lài)。我們從不忽悠初訪客戶(hù)，我們用心做好本職工作，不忘初心，方得始終。十載網(wǎng)站建設(shè)經(jīng)驗(yàn)創(chuàng)新互聯(lián)建站是成都老牌網(wǎng)站營(yíng)銷(xiāo)服務(wù)商,為您提供成都網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、html5、網(wǎng)站制作、品牌網(wǎng)站建設(shè)、成都小程序開(kāi)發(fā)服務(wù),給眾多知名企業(yè)提供過(guò)好品質(zhì)的建站服務(wù)。

  在IE10中已經(jīng)新加入了Error.stack 的支持，可以加快開(kāi)發(fā)人員的腳本調(diào)試，并更正錯(cuò)誤。尤其是一些難以重現(xiàn)的錯(cuò)誤，如異步操作等。以下內(nèi)容來(lái)自于微軟IE團(tuán)隊(duì)，對(duì)于這個(gè)特性描述的非常詳細(xì)。

調(diào)試應(yīng)用程序

JavaScript 中的結(jié)構(gòu)化錯(cuò)誤處理依賴(lài)于throw 和try/catch，開(kāi)發(fā)人員將在其中聲明一個(gè)錯(cuò)誤，并將控制流傳遞至處理錯(cuò)誤的程序的某一部分。當(dāng)某一錯(cuò)誤被引發(fā)時(shí)，Chakra，即 Internet Explorer 中的 JavaScript 引擎將捕獲引發(fā)該錯(cuò)誤的調(diào)用鏈，這一過(guò)程也被稱(chēng)為調(diào)用堆棧。如果被引發(fā)的對(duì)象是一個(gè)Error（或者是一個(gè)函數(shù)，且其原型鏈將導(dǎo)致Error），那么 Chakra 將創(chuàng)建一個(gè)堆棧跟蹤，即可人工讀取的調(diào)用堆棧列表。該列表將被表示為一種屬性，即Error 對(duì)象中的stack。stack 包含錯(cuò)誤消息、函數(shù)名稱(chēng)和該函數(shù)的源文件位置信息。這些信息將有助于開(kāi)發(fā)人員了解所調(diào)用的函數(shù)，甚至查看錯(cuò)誤的代碼行，從而迅速診斷缺陷。例如，這些信息可能表明傳遞至函數(shù)的某一參數(shù)為空，或?yàn)闊o(wú)效類(lèi)型。

讓我們一同來(lái)查看一個(gè)簡(jiǎn)單的腳本，并以此展開(kāi)深入討論。該腳本試圖計(jì)算(0, 2) 和(12, 10) 兩點(diǎn)間的距離：

代碼如下:

(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);
}
})();

該腳本中包含一個(gè)缺陷，其未調(diào)整組件間的差異。因此，對(duì)于某些輸入而言，pointDistance 函數(shù)將返回錯(cuò)誤的結(jié)果；而在其他情況中，該腳本將導(dǎo)致錯(cuò)誤發(fā)生。為了理解堆棧跟蹤的含義，讓我們一同來(lái)查看 F12 開(kāi)發(fā)人員工具中的錯(cuò)誤，并查看其腳本選項(xiàng)卡：

堆棧跟蹤將轉(zhuǎn)儲(chǔ)至catch 子句中的控制臺(tái)，由于其位于堆棧的頂部，因此起源于squareRoot 函數(shù)的錯(cuò)誤將變得顯而易見(jiàn)。為了調(diào)試這一問(wèn)題，開(kāi)發(fā)人員無(wú)需深入查看堆棧跟蹤；系統(tǒng)已違反squareRoot 的前置條件，而且只需查看堆棧的上一級(jí)，原因?qū)⒆兊檬置髁耍?code>squareRoot 調(diào)用內(nèi)的子表達(dá)式自身應(yīng)該為square 的參數(shù)。

調(diào)試過(guò)程中，stack 屬性將有助于識(shí)別用于設(shè)置斷點(diǎn)的代碼。請(qǐng)記住：您還可使用其它方法來(lái)查看調(diào)用堆棧：例如，如果您將腳本調(diào)試程序設(shè)置為“捕獲異常即中斷”的模式，那么您可使用該調(diào)試程序來(lái)檢查調(diào)用堆棧。對(duì)于部署的應(yīng)用程序，您可考慮在try/catch 內(nèi)合并問(wèn)題代碼，以捕獲失敗的調(diào)用，并將其記錄于服務(wù)器中。隨后，開(kāi)發(fā)人員可查看調(diào)用堆棧，以隔離問(wèn)題區(qū)域。

DOM 異常與 Error.stack

此前，我曾注意到被引發(fā)的對(duì)象必須為Error 或通過(guò)其原型鏈導(dǎo)致Error。這是有意而為之；JavaScript 可支持引發(fā)任何對(duì)象，甚至包括作為異常的基元。盡管系統(tǒng)可捕獲和檢查所有這些對(duì)象，但是它們的全部用途并非包含錯(cuò)誤或診斷信息。因此，引發(fā)過(guò)程中僅將更新錯(cuò)誤的stack 屬性。

即便對(duì)象為 DOM 異常，它們也不包含可導(dǎo)致Error 的原型鏈，因此它們將不包含stack 屬性。在某些應(yīng)用場(chǎng)景中，您需要執(zhí)行 DOM 操作，并希望暴露 JavaScript 兼容的錯(cuò)誤，那么您可能希望在try/catch數(shù)據(jù)塊內(nèi)合并您的 DOM 操作代碼，并在catch 子句中引發(fā)一個(gè)新的Error 對(duì)象：

代碼如下:

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

然而，您可能將考慮是否要使用該模式。這可能是最適用于實(shí)用工具庫(kù)開(kāi)發(fā)的模式，特別是在您考慮代碼的意圖是否為隱藏 DOM 操作或簡(jiǎn)單地實(shí)施某一任務(wù)的時(shí)候。如果其目的為隱藏 DOM 操作，那么合并操作并引發(fā)Error 可能是我們需要選擇的正確方式。性能注意事項(xiàng)

堆棧跟蹤的構(gòu)造始于錯(cuò)誤對(duì)象被引發(fā)之時(shí)；構(gòu)造堆棧跟蹤需要查看當(dāng)前執(zhí)行堆棧。為了防止遍歷特大堆棧過(guò)程中出現(xiàn)性能問(wèn)題（甚至可能出現(xiàn)的遞歸堆棧鏈），默認(rèn)情況下，IE 僅將收集前十位的堆棧幀。然而該設(shè)置可通過(guò)將靜態(tài)屬性Error.stackTraceLimit 設(shè)置為另一數(shù)值而得以配置。該設(shè)置是全局性的，而且必須在引發(fā)錯(cuò)誤之前 進(jìn)行變更，否則其將對(duì)堆棧跟蹤無(wú)效。

異步異常

當(dāng)某一堆棧是由異步回調(diào)（例如timeout、interval 或XMLHttpRequest）生成，那么異步回調(diào)（而非由異步回調(diào)創(chuàng)建的代碼）將位于調(diào)用堆棧的底部。這將對(duì)跟蹤有問(wèn)題的代碼產(chǎn)生某些潛在影響：如果您對(duì)多個(gè)異步回調(diào)使用相同的回調(diào)函數(shù)，那么您將難于通過(guò)單獨(dú)檢查而確定是哪一回調(diào)產(chǎn)生了錯(cuò)誤。讓我們對(duì)此前的示例稍作修改，我們將避免直接調(diào)用sample()，而是將其放入超時(shí)回調(diào)：

代碼如下:

(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);
})();

一旦執(zhí)行該代碼段，您將發(fā)現(xiàn)堆棧跟蹤將出現(xiàn)稍許延遲。此時(shí)，您將同時(shí)發(fā)現(xiàn)堆棧底部并非全局性代碼，而是Anonymous function。事實(shí)上，這并非同一匿名函數(shù)，而是傳遞至setTimeout 的回調(diào)函數(shù)。由于您丟失了與掛起回調(diào)有關(guān)的上下文，因此您可能無(wú)法確定調(diào)用回調(diào)的內(nèi)容。如果在某一應(yīng)用場(chǎng)景中，系統(tǒng)注冊(cè)了某一回調(diào)來(lái)處理許多不同按鈕的click 事件，那么您將無(wú)法分辨注冊(cè)將引用哪一回調(diào)。話雖如此，這一限制作用畢竟有限，因?yàn)樵诖蠖鄶?shù)情況中，堆棧頂部可能將突出顯示問(wèn)題區(qū)域。觀看體驗(yàn)演示

了解 Windows 8 Consumer Preview 中 IE10 的使用情況。您可在eval 的上下文中執(zhí)行代碼，如果發(fā)生錯(cuò)誤，您便可檢查出該錯(cuò)誤。如果您在 IE10 內(nèi)運(yùn)行代碼，由于您可將錯(cuò)誤代碼行懸停于堆棧跟蹤中，因此您也可突出顯示您的代碼行。您可自行將代碼輸入到代碼區(qū)域，或者從列表中的數(shù)個(gè)示例中進(jìn)行選擇。此外，您還可在運(yùn)行代碼示例時(shí)設(shè)置Error.stackTraceLimit 值。上述內(nèi)容就是如何理解IE10 Error.stack讓腳本調(diào)試更加方便快捷，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文題目：如何理解IE10Error.stack讓腳本調(diào)試更加方便快捷-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://weahome.cn/article/djggdh.html