移動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)
:p
真夠機智