pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

IE10 Error.stack 讓腳本調(diào)試更加方便快捷_html5教程技

IE10 Error.stack 讓腳本調(diào)試更加方便快捷_html5教程技巧HTML5中文學(xué)習(xí)網(wǎng),是中國最大的HTML5中文門戶,為廣大HTML5愛好者提供各種HTML5資料,包括HTML5網(wǎng)站、HTML5資訊、HTML5應(yīng)用、HTML5游戲、H
點(diǎn)評:在IE10中已經(jīng)新加入了Error.stack 的支持,可以加快開發(fā)人員的腳本調(diào)試,并更正錯(cuò)誤。尤其是一些難以重現(xiàn)的錯(cuò)誤,如異步操作等

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

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

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

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

復(fù)制代碼
代碼如下:

(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)整組件間的差異。因此,對于某些輸入而言,pointDistance 函數(shù)將返回錯(cuò)誤的結(jié)果;而在其他情況中,該腳本將導(dǎo)致錯(cuò)誤發(fā)生。為了理解堆棧跟蹤的含義,讓我們一同來查看 F12 開發(fā)人員工具中的錯(cuò)誤,并查看其腳本選項(xiàng)卡:

屏幕截圖中的 F12 開發(fā)人員工具顯示了一個(gè)由調(diào)用 console.log(e.stack) 記錄的堆棧跟蹤,其中 e 是傳遞至 try/catch 數(shù)據(jù)塊中 catch 子句的錯(cuò)誤對象。

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

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

DOM 異常與 Error.stack

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

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

復(fù)制代碼
代碼如下:

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

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

性能注意事項(xiàng)

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

異步異常

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

復(fù)制代碼
代碼如下:

(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)的上下文,因此您可能無法確定調(diào)用回調(diào)的內(nèi)容。如果在某一應(yīng)用場景中,系統(tǒng)注冊了某一回調(diào)來處理許多不同按鈕的 click 事件,那么您將無法分辨注冊將引用哪一回調(diào)。話雖如此,這一限制作用畢竟有限,因?yàn)樵诖蠖鄶?shù)情況中,堆棧頂部可能將突出顯示問題區(qū)域。

觀看體驗(yàn)演示

Explore Error.stack 體驗(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 值。

如欲查看參考材料,請瀏覽有關(guān) Error.stackstackTraceLimit 的 MSDN 文檔。


【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測試外,其他素材未做測試,不保證完整性,網(wǎng)站上部分源碼僅限學(xué)習(xí)交流,請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。

相關(guān)文檔推薦

基于IE10/HTML5 開發(fā)_html5教程技巧HTML5中文學(xué)習(xí)網(wǎng),是中國最大的HTML5中文門戶,為廣大HTML5愛好者提供各種HTML5資料,包括HTML5網(wǎng)站、HTML5資訊、HTML5應(yīng)用、HTML5游戲、HTML5教程、HTML5視頻、
主站蜘蛛池模板: 带锯机|木工带锯机圆木推台锯|跑车带锯机|河北茂业机械制造有限公司| | 执业药师报名时间,报考条件,考试时间-首页入口 | 考试试题_试卷及答案_诗词单词成语 - 优易学 | 液压油缸-液压缸厂家价格,液压站系统-山东国立液压制造有限公司 液压油缸生产厂家-山东液压站-济南捷兴液压机电设备有限公司 | 贝朗斯动力商城(BRCPOWER.COM) - 买叉车蓄电池上贝朗斯商城,价格更超值,品质有保障! | 北京遮阳网-防尘盖土网-盖土草坪-迷彩网-防尘网生产厂家-京兴科技 | 便携式谷丙转氨酶检测仪|华图生物科技百科 | 一体化净水器_一体化净水设备_一体化水处理设备-江苏旭浩鑫环保科技有限公司 | 密度电子天平-内校-外校电子天平-沈阳龙腾电子有限公司 | 高速龙门架厂家_监控杆_多功能灯杆_信号灯杆_锂电池太阳能路灯-鑫世源照明 | 企典软件一站式企业管理平台,可私有、本地化部署!在线CRM客户关系管理系统|移动办公OA管理系统|HR人事管理系统|人力 | 代理记账_公司起名核名_公司注册_工商注册-睿婕实业有限公司 | 汽液过滤网厂家_安平县银锐丝网有限公司 | 医院专用门厂家报价-医用病房门尺寸大全-抗菌木门品牌推荐 | 过跨车_过跨电瓶车_过跨转运车_横移电动平车_厂区转运车_无轨转运车 | 全温恒温摇床-水浴气浴恒温摇床-光照恒温培养摇床-常州金坛精达仪器制造有限公司 | Honsberg流量计-Greisinger真空表-气压计-上海欧臻机电设备有限公司 | 除尘器布袋骨架,除尘器滤袋,除尘器骨架,电磁脉冲阀膜片,卸灰阀,螺旋输送机-泊头市天润环保机械设备有限公司 | 长沙印刷厂-包装印刷-画册印刷厂家-湖南省日大彩色印务有限公司 青州搬家公司电话_青州搬家公司哪家好「鸿喜」青州搬家 | 立式_复合式_壁挂式智能化电伴热洗眼器-上海达傲洗眼器生产厂家 理化生实验室设备,吊装实验室设备,顶装实验室设备,实验室成套设备厂家,校园功能室设备,智慧书法教室方案 - 东莞市惠森教学设备有限公司 | 智能门锁电机_智能门锁离合器_智能门锁电机厂家-温州劲力智能科技有限公司 | 食品质构分析仪-氧化诱导分析仪-瞬态法导热系数仪|热冰百科 | 合肥升降机-合肥升降货梯-安徽升降平台「厂家直销」-安徽鼎升自动化科技有限公司 | 低噪声电流前置放大器-SR570电流前置放大器-深圳市嘉士达精密仪器有限公司 | 耐高温风管_耐高温软管_食品级软管_吸尘管_钢丝软管_卫生级软管_塑料波纹管-东莞市鑫翔宇软管有限公司 | 电解抛光加工_不锈钢电解抛光_常州安谱金属制品有限公司 | 老房子翻新装修,旧房墙面翻新,房屋防水补漏,厨房卫生间改造,室内装潢装修公司 - 一修房屋快修官网 | 恒压供水控制柜|无负压|一体化泵站控制柜|PLC远程调试|MCGS触摸屏|自动控制方案-联致自控设备 | 打孔器,打孔钳厂家【温州新星德牌五金工具】 | 钢制暖气片散热器_天津钢制暖气片_卡麦罗散热器厂家 | 航空连接器,航空插头,航空插座,航空接插件,航插_深圳鸿万科 | 重庆波纹管|重庆钢带管|重庆塑钢管|重庆联进管道有限公司 | 网带通过式抛丸机,,网带式打砂机,吊钩式,抛丸机,中山抛丸机生产厂家,江门抛丸机,佛山吊钩式,东莞抛丸机,中山市泰达自动化设备有限公司 | 雷达液位计_超声波风速风向仪_雨量传感器_辐射传感器-山东风途物联网 | 淘气堡_室内儿童乐园_户外无动力儿童游乐设备-高乐迪(北京) | 烟雾净化器-滤筒除尘器-防爆除尘器-除尘器厂家-东莞执信环保科技有限公司 | 自动化改造_智虎机器人_灌装机_贴标机-上海圣起包装机械 | 扒渣机,铁水扒渣机,钢水扒渣机,铁水捞渣机,钢水捞渣机-烟台盛利达工程技术有限公司 | 济南画室培训-美术高考培训-山东艺霖艺术培训画室 | 洛阳防爆合格证办理-洛阳防爆认证机构-洛阳申请国家防爆合格证-洛阳本安防爆认证代办-洛阳沪南抚防爆电气技术服务有限公司 | 网站建设-高端品牌网站设计制作一站式定制_杭州APP/微信小程序开发运营-鼎易科技 |