上門一對一計算機家教
當前位置: 首頁 > Web前端家教 >

Javascript自學筆記第16節 錯誤處理與調試

點擊: 時間:2016-10-26 來源:北京家教網
JavaScript在錯誤處理調試上一直是它的軟肋,如果腳本出錯,給出的提示經常也讓人摸不著頭腦。ECMAScript第3版為了解決這個問題引入了try...catch和throw語句以及一些錯誤類型,讓開發人員更加適時的處理錯誤。 一. 瀏覽器錯誤報告 隨著
JavaScript在錯誤處理調試上一直是它的軟肋,如果腳本出錯,給出的提示經常也讓人摸不著頭腦。ECMAScript第3版為了解決這個問題引入了try...catch和throw語句以及一些錯誤類型,讓開發人員更加適時的處理錯誤。
 
一.瀏覽器錯誤報告
隨著瀏覽器的不斷升級,JavaScript代碼的調試能力也逐漸變強。IE、Firefox、Safari、Chrome和Opera等瀏覽器,都具備報告JavaScript錯誤的機制。只不過,瀏覽器一般面向的是普通用戶,默認情況下會隱藏此類信息。
IE:在默認情況下,左下角會出現錯誤報告,雙擊這個圖標,可以看到錯誤消息對話框。如果開啟禁止腳本調試,那么出錯的時候,會彈出錯誤調試框。設置方法為:工具->Internet Options選項->高級->禁用腳本調試,取消勾選即可。
Firefox:在默認情況下,錯誤不會通過瀏覽器給出提示。但在后臺的錯誤控制臺可以查看。查看方法為:工具->[Web開發者]->Web控制臺|錯誤控制臺。除了瀏覽器自帶的,開發人員為Firefox提供了一個強大的插件:Firebug。它不但可以提示錯誤,還可以調試JavaScript和CSS、DOM、網絡鏈接錯誤等。
Safari:在默認情況下,錯誤不會通過瀏覽器給出提示。所以,我們需要開啟它。查看方法為:顯示菜單欄->編輯->偏好設置->高級->在菜單欄中顯示開發->顯示Web檢查器|顯示錯誤控制器。
Opera:在默認情況下,錯誤會被隱藏起來。打開錯誤記錄的方式為:顯示菜單欄->查看->開發者工具->錯誤控制臺。
Chrome:在默認情況下,錯誤會被隱藏起來。打開錯誤記錄的方法為:工具->JavaScript控制臺。
 
二.錯誤處理
良好的錯誤處理機制可以及時的提醒用戶,知道發生了什么事,而不會驚慌失措。為此,作為開發人員,我們必須理解在處理JavaScript錯誤的時候,都有哪些手段和工具可以利用。
 
try-catch語句
ECMA262第3版引入了try-catch語句,作為JavaScript中處理異常的一種標準方式。
       try {                                                                //嘗試著執行try包含的代碼
       window.abcdefg();                                     //不存在的方法
} catch (e) {                                                    //如果有錯誤,執行catch,e是異常對象
       alert('發生錯誤啦,錯誤信息為:' + e);     //直接打印調用toString()方法
}
 
在e對象中,ECMA-262還規定了兩個屬性:message和name,分別打印出信息和名稱。
alert('錯誤名稱:' + e.name);
alert('錯誤名稱:' + e.message);
 
PS:Opera9之前的版本不支持這個屬性。并且IE提供了和message完全相同的description屬性、還添加了number屬性提示內部錯誤數量。Firefox提供了fileName(文件名)、lineNumber(錯誤行號)和stack(棧跟蹤信息)。Safari添加了line(行號)、sourceId(內部錯誤代碼)和sourceURL(內部錯誤URL)。所以,要跨瀏覽器使用,那么最好只使用通用的message。
 
finally子句
finally語句作為try-catch的可選語句,不管是否發生異常處理,都會執行。并且不管try或是catch里包含return語句,也不會阻止finally執行。
       try {
              window.abcdefg();
       } catch (e) {
              alert('發生錯誤啦,錯誤信息為:' + e.stack);
       } finally {                                                       //總是會被執行
              alert('我都會執行!');
       }
 
PS:finally的作用一般是為了防止出現異常后,無法往下再執行的備用。也就是說,如果有一些清理操作,那么出現異常后,就執行不到清理操作,那么可以把這些清理操作放到finally里即可。
 
錯誤類型
執行代碼時可能會發生的錯誤有很多種。每種錯誤都有對應的錯誤類型,ECMA-262定義了7種錯誤類型:
1.Error
2.EvalError
3.RangeError
4.ReferenceError
5.SyntaxError
6.TypeError
7.URIError
其中,Error是基類型(其他六種類型的父類型),其他類型繼承自它。Error類型很少見,一般由瀏覽器拋出的。這個基類型主要用于開發人員拋出自定義錯誤。
 
PS:拋出的意思,就是當前錯誤無法處理,丟給另外一個人,比如丟給一個錯誤對象。
 
new Array(-5);                                                        //拋出RangeError(范圍)
錯誤信息為:RangeError: invalid array length(無效的數組的長度)
PS:RangeError錯誤一般在數值超出相應范圍時觸發
 
var box = a;                                                     //拋出ReferenceError(引用)
錯誤信息為:ReferenceError: a is not defined(a是沒有定義的)
PS:ReferenceError通常訪問不存在的變量產生這種錯誤
 
a $ b;                                                              //拋出SyntaxError(語法)
錯誤信息為:SyntaxError: missing ; before statement(失蹤;語句之前)
PS:SyntaxError通常是語法錯誤導致的
 
new 10;                                                           //拋出TypeError(類型 )
錯誤信息為:TypeError: 10 is not a constructor(10不是一個構造函數)
PS:TypeError通常是類型不匹配導致的
 
PS:EvalError類型表示全局函數eval()的使用方式與定義的不同時拋出,但實際上并不能產生這個錯誤,所以實際上碰到的可能性不大。
PS:在使用encodeURI()和decodeURI()時,如果URI格式不正確時,會導致URIError錯誤。但因為URI的兼容性非常強,導致這種錯誤幾乎見不到。
alert(encodeURI('李炎恢'));
 
利用不同的錯誤類型,可以更加恰當的給出錯誤信息或處理。
try {
       new 10;
} catch (e) {
       if (e instanceof TypeError) {                      //如果是類型錯誤,那就執行這里
              alert('發生了類型錯誤,錯誤信息為:' + e.message);
       } else {
              alert('發生了未知錯誤!');
       }
}
 
善用try-catch
在明明知道某個地方會產生錯誤,可以通過修改代碼來解決的地方,是不適合用try-catch的。或者是那種不同瀏覽器兼容性錯誤導致錯誤的也不太適合,因為可以通過判斷瀏覽器或者判斷這款瀏覽器是否存在此屬性和方法來解決。
try {
       var box = document.getElementbyid('box');  //單詞大小寫錯誤,導致類型錯誤
} catch (e) {                                                    //這種情況沒必要try-catch
       alert(e);
}
 
try {
       alert(innerWidth);                                      //W3C支持,IE報錯
} catch (e) {
       alert(document.documentElement.clientWidth);   //兼容IE
}
PS:常規錯誤和這種瀏覽器兼容錯誤,我們都不建議使用try-catch。因為常規錯誤可以修改代碼即可解決,瀏覽器兼容錯誤,可以通過普通if判斷即可。并且try-catch比一般語句消耗資源更多,負擔更大。所以,在萬不得已,無法修改代碼,不能通過普通判斷的情況下才去使用try-catch,比如后面的Ajax技術。
 
拋出錯誤
使用catch來處理錯誤信息,如果處理不了,我們就把它拋出丟掉。拋出錯誤,其實就是在瀏覽器顯示一個錯誤信息,只不過,錯誤信息可以自定義,更加精確和具體。
try {
       new 10;
} catch (e) {
       if (e instanceof TypeError) {
              throw new TypeError('實例化的類型導致錯誤!');    //直接中文解釋錯誤信息
       } else {
              throw new Error('拋出未知錯誤!');
       }
}
PS:IE瀏覽器只支持Error拋出的錯誤,其他錯誤類型不支持。
 
三.錯誤事件
error事件是當某個DOM對象產生錯誤的時候觸發。
addEvent(window, 'error', function () {
       alert('發生錯誤啦!')
});
 
new 10;                                                           //寫在后面
 
<img src="123.jpg" onerror="alert('圖像加載錯誤!')" />
 
四.錯誤處理策略
由于JavaScript錯誤都可能導致網頁無法使用,所以何時搞清楚及為什么發生錯誤至關重要。這樣,我們才能對此采取正確的應對方案。
 
常見的錯誤類型
因為JavaScript是松散弱類型語言,很多錯誤的產生是在運行期間的。一般來說,需要關注3種錯誤:
1.類型轉換錯誤;2.數據類型錯誤;3.通信錯誤,這三種錯誤一般會在特定的模式下或者沒有對值進行充分檢查的情況下發生。
 
類型轉換錯誤
在一些判斷比較的時候,比如數組比較,有相等和全等兩種:
alert(1 == '1');                                                  //true
alert(1 === '1');                                                //false
alert(1 == true);                                               //true
alert(1 === true);                                             //false
PS:由于這個特性,我們建議在這種會類型轉換的判斷,強烈推薦使用全等,以保證判斷的正確性。
 
var box = 10;                                                   //可以試試0
if (box) {                                                         //10自動轉換為布爾值為true
       alert(box);
}
PS:因為0會自動轉換為false,其實0也是數值,也是有值的,不應該認為是false,所以我們要判斷box是不是數值再去打印。
var box = 0;
if (typeof box == 'number') {                             //判斷box是number類型即可
       alert(box);
}
PS:typeof box == 'number'這里也是用的相等,沒有用全等呀?原因是typeof box本身返回的就是類型的字符串,右邊也是字符串,那沒必要驗證類型,所以相等就夠了。
 
數據類型錯誤
由于JavaScript是弱類型語言,在使用變量和傳遞參數之前,不會對它們進行比較來確保數據類型的正確。所以,這樣開發人員必須需要靠自己去檢測。
function getQueryString(url) {                          //傳遞了非字符串,導致錯誤
       var pos = url.indexOf('?');
       return pos;
}
alert(getQueryString(1));
PS:為了避免這種錯誤的出現,我們應該使用類型比較。
 
function getQueryString(url) {
       if (typeof url == 'string') {                          //判斷了指定類型,就不會出錯了
              var pos = url.indexOf('?');
              return pos;
       }
}
alert(getQueryString(1));
 
對于傳遞參數除了限制數字、字符串之外,我們對數組也要進行限制。
function sortArray(arr) {
       if (arr) {                                                   //只判斷布爾值遠遠不夠
              alert(arr.sort());
       }
}
 
var box = [3,5,1];
sortArray(box);
PS:只用if (arr)判斷布爾值,那么數值、字符串、對象等都會自動轉換為true,而這些類型調用sort()方法比如會產生錯誤,這里提一下:空數組會自動轉換為true而非false。
 
function sortArray(arr) {
       if (typeof arr.sort == 'function') {                //判斷傳遞過來arr是否有sort方法
              alert(arr.sort());                                  //就算這個繞過去了
alert(arr.reverse());                             //這個就又繞不過去了
       }
}
 
var box = {                                                      //創建一個自定義對象,添加sort方法
       sort : function () {}
};
sortArray(box);
PS:這斷代碼本意是判斷arr是否有sort方法,因為只有數組有sort方法,從而判斷arr是數組。但忘記了,自定義對象添加了sort方法就可以繞過這個判斷,且arr還不是數組。
 
function sortArray(arr) {
       if (arr instanceof Array) {                          //使用instanceof判斷是Array最為合適
              alert(arr.sort());                                 
       }
}
 
var box = [3,5,1];
sortArray(box);
 
通信錯誤
在使用url進行參數傳遞時,經常會傳遞一些中文名的參數或URL地址,在后臺處理時會發生轉換亂碼或錯誤,因為不同的瀏覽器對傳遞的參數解釋是不同的,所以有必要使用編碼進行統一傳遞。
比如:?user=李炎恢&age=100
var url = '?user=' + encodeURIComponent('李炎恢') + '&age=100';    //編碼
 
PS:在AJAX章節中我們會繼續探討通信錯誤和編碼問題。
 
五.調試技術
在JavaScript初期,瀏覽器并沒有針對JavaScript提供調試工具,所以開發人員就想出了一套自己的調試方法,比如alert()。這個方法可以打印你懷疑的是否得到相應的值,或者放在程序的某處來看看是否能執行,得知之前的代碼無誤。
var num1 = 1;
var num2 = b;                                                  //在這段前后加上alert('')調試錯誤
var result = num1 + num2;
alert(result);
 
PS:使用alert('')來調試錯誤比較麻煩,重要裁剪和粘貼alert(''),如果遺忘掉沒有刪掉用于調試的alert('')將特別頭疼。所以,我們現在需要更好的調試方法。
 
將消息記錄到控制臺
IE8、Firefox、Opera、Chrome和Safari都有JavaScript控制臺,可以用來查看JavaScript錯誤。對于Firefox,需要安裝Firebug,其他瀏覽器直接使用console對象寫入消息即可。
 
console對象的方法
方法名 說明
error(message) 將錯誤消息記錄到控制臺
info(message) 將信息性消息記錄到控制臺
log(message) 將一般消息記錄到控制臺
warn(message) 將警告消息記錄到控制臺
 
 
console.error('錯誤!');                                     //紅色帶叉
console.info('信息!');                                      //白色帶信息號
console.log('日志!');                                       //白色
console.warn('警告!');                                     //黃色帶感嘆號
 
PS:這里以Firefox為標準,其他瀏覽器會稍有差異。
 
var num1 = 1;
console.log(typeof num1);                                 //得到num1的類型
var num2 = 'b';                                                
console.log(typeof num2);                                 //得到num2的類型
var result = num1 + num2;
alert(result);                                                     //結果是1b,匪夷所思
 
PS:我們誤把num2賦值成字符串了,其實應該是數值,導致最后的結果是1b。那么傳統調試就必須使用alert(typeo num1)來看看是不是數值類型,比較麻煩,因為alert()會阻斷后面的執行,看過之后還要刪,刪完估計一會兒又忘了,然后又要alert(typeof num1)來加深印象。如果用了console.log的話,所有要調試的變量一目了然,也不需要刪除,放著也沒事。
 
將錯誤拋出
之前已經將結果錯誤的拋出,這里不在贅述。
if (typeof num2 != 'number') throw new Error('變量必須是數值!');
 
六.調試工具
IE8、Firefox、Chrome、Opera、Safari都自帶了自己的調試工具,而開發人員只習慣了Firefox一種,所以很多情況下,在Firefox開發調試,然后去其他瀏覽器做兼容。其實Firebug工具提供了一種Web版的調試工具:Firebug lite。
 
以下是網頁版直接調用調試工具的代碼:直接復制到瀏覽器網址即可。
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
 
還有一種離線版,把firebug-lite下載好,載入工具即可,導致最終工具無法運行,其他瀏覽器運行完好。雖然Web版本的Firebug Lite可以跨瀏覽器使用Firebug,但除了Firefox原生的之外,都不支持斷點、單步調試、監視、控制臺等功能。好在,其他瀏覽器自己的調試器都有。
 
PS:Chrome瀏覽器必須在服務器端方可有效。測試也發現,只能簡單調試,如果遇到錯誤,系統不能自動拋出錯誤給firebug-lite。
 
1.設置斷點
我們可以選擇Script(腳本),點擊要設置斷點的JS腳本處,即可設置斷點。當我們需要調試的時候,從斷點初開始模擬運行,發現代碼執行的流程和變化。
 
2.單步調試
設置完斷點后,可以點擊單步調試,一步步看代碼執行的步驟和流程。上面有五個按鈕:
重新運行:重新單步調試
斷繼:正常執行代碼
單步進入:一步一步執行流程
單步跳過:跳到下一個函數塊
單步退出:跳出執行到內部的函數
 
3.監控
單擊“監控”選項卡上,可以查看在單步進入是,所有變量值的變化。你也可以新建監控表達式來重點查看自己所關心的變量。
 
4.控制臺
顯示各種信息。之前已了解過。
 
PS:其他瀏覽器除IE8以上均可實現以上的調試功能,大家可以自己常識下。而我們主要采用Firebug進行調試然后兼容到其他瀏覽器的做法以提高開發效率。
 
------分隔線----------------------------
30选5开奖查询