今天一個客戶說他們的一個同事用OPPO R11的手機訪問不了我們的項目,打開后一片空白,雖然后面發現你的手機網絡斷了,但是想起來畢竟手機端沒有調試的工具可以查看拋出的錯誤信息,方便我們追蹤問題,后端的大牛同事提示我們看看vconsole.js.寫這個js的大牛的github地址是:https://github.com/Tencent/vConsole
實現效果地址(可能時間久了就訪問不了,各位見諒):https://www.w3cways.com/demo/vconsole/
vConsole:一個輕量、可拓展、針對手機網頁的前端開發者調試面板。
vConsole:一個輕量、可拓展、針對手機網頁的前端開發者調試面板。
特性：
1. 查看 console 日志
2. 查看網絡請求
3. 手動執行 JS 命令行
4. 自定義插件
第一步:
推薦使用npm安裝vconsole.js:npm install vconsole
第二步:引用模塊
<script src="path/to/vconsole.min.js"></script>
<script>
console.log('Hello world');
// 然后點擊右下角 vConsole 按鈕即可查看到 log
</script>
第三步:
<html>
<head>
<script src='https://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.0.0.0'></script>
<script type="text/javascript">
window.vConsole = new window.VConsole();
window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) {
console.log("錯誤信息：" , errorMessage);
console.log("出錯文件：" , scriptURI);
console.log("出錯行號：" , lineNumber);
console.log("出錯列號：" , columnNumber);
console.log("錯誤詳情：" , errorObj);
}
throw new Error("出錯了！");
</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()" />
</body>
</html>
詳細的教程參考:https://github.com/Tencent/vConsole/blob/dev/doc/tutorial_CN.md
后面一頓百度搜索.發現還有牛人封裝了提交到后端的js,也分享出來給大家看看.
github上：https://github.com/xianyulaodi/badJsReport
這位牛人封裝了原生ajax,還有將上報的參數對象合並。並暴露了一個全局方法 badJsReport
使用方法:
1、將badJsReport.js加載到其他的js之前
2、簡單的使用方法：（這個執行方法要放在其他代碼執行之前）
badJsReport({
url:'http://www.baidu.com', //發送到后台的url *必須
})
3、如果需要新增上報參數，或者要知道發送給后台的回調。可以用下面的方法
badJsReport({
url:'http://www.baidu.com', //發送到后台的url *必須
data:{}, //自定義添加上報參數，比如app版本，瀏覽器版本 -可省略
successCallBack:function(response, xml){
// 發送給后台成功的回調，-可省略
},
failCallBack:function(error){
// 發送給后台失敗的回調，-可省略
}
})
注意點：
1、對於跨域的JS資源，window.onerror拿不到詳細的信息，需要往資源的請求添加額外的頭部。靜態資源請求需要加多一個Access-Control-Allow-Origin頭部，也就是需要后台加一個Access-Control-Allow-Origin，同時script引入外鏈的標簽需要加多一個crossorigin的屬性。這樣就可以獲取准確的出錯信息。
2、因為代碼的最后return true，所以如果有錯誤信息，瀏覽器不會console出來，如果需要瀏覽器console，可以注釋掉最后的return true
無意之間:突然發現了這個網站:https://fundebug.com/監控平台.有條件的還是最好搭建自己的監控平台.