移動Web開發過程中,在真機測試時,往往會遇到一些PC調試無法重現的問題,這時候我們需要在手機上攔截錯誤,並有相應的輸出。
公司和網上都有類似的工具/類庫,但如果純粹一個簡單的調試,或許不需要引入工具或類庫,我們只需要知道全域攔截的原理。
其實很簡單,就是window.onerror
文法:
onerror=handleErr
function handleErr(msg,url,l)
{
//Handle the error here
return true or false
}
瀏覽器是否顯示標準的錯誤訊息,取決於 onerror 的傳回值。如果傳回值為 false,則在控制台 (JavaScript console) 中顯示錯誤訊息。反之則不會。
執行個體:
下面的例子展示如何使用 onerror 事件來捕獲錯誤:
<html>
<head>
<script type="text/javascript">
onerror=handleErr
var txt=""
function handleErr(msg,url,l)
{
txt="There was an error on this page.\n\n"
txt+="Error: " + msg + "\n"
txt+="URL: " + url + "\n"
txt+="Line: " + l + "\n\n"
txt+="Click OK to continue.\n\n"
alert(txt)
return true
}
function message()
{
adddlert("Welcome guest!")
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>
另外,如果我們想在chrome控制台中直接類比這個過程,會發現,直接使用throw new Error,無法觸發這個onerror,這個可能是因為控制台的環境跟頁面環境不一樣。
但換一個方式,就可以觸發了:
setTimeout(function(){throw new Error}, 1000)
真夠機智