vConsole解決的三個關(guān)鍵問題
- 如何捕捉錯誤
- 如何輸出循環(huán)定義對象
- 如何捕捉ajax請求
如何捕捉錯誤
使用window.onerror = function(message, source, lineno, colno, error) { ... }來捕捉JavaScript運(yùn)行時錯誤（包括語法錯誤）羡宙。
以下信息來自MDN
函數(shù)參數(shù)為：
- message：錯誤信息（字符串）绍移。Available as event (sic!) in HTML onerror="" handler.
- source：發(fā)生錯誤的腳本URL（字符串）
- lineno：發(fā)生錯誤的行號（數(shù)字）
- colno：發(fā)生錯誤的列號（數(shù)字）
- error：Error對象（對象)
若該函數(shù)返回true，則阻止執(zhí)行默認(rèn)事件處理函數(shù)药蜻。
跨域腳本的錯誤捕捉
對跨域腳本需加crossorigin屬性正压，比如這個樣子<script crossorigin />欣福。
然后對js文件添加跨域header屬性，比如這個樣子Access-Control-Allow-Origin: *焦履。添加方法點我
如何輸出循環(huán)定義對象
循環(huán)定義的對象輸出拓劝，原生APIJSON.Stringify()會報錯，報錯信息為Uncaught TypeError: Converting circular structure to JSON嘉裤。
判斷對象是否循環(huán)定義的思路是郑临，子節(jié)點的引用跟其祖先的引用相同。
參考vConsole的tool.js的JSONStringify方法屑宠。
如何捕捉ajax請求
最基本的ajax代碼如下：
var httpRequest = null;
httpRequest = new XMLHttpRequest();
httpRequest.overrideMimeType('text/json');
httpRequest.onreadystatechange = function(){
/*
0 UNSENT (未打開) open()方法還未被調(diào)用.
1 OPENED (未發(fā)送) send()方法還未被調(diào)用.
2 HEADERS_RECEIVED (已獲取響應(yīng)頭) send()方法已經(jīng)被調(diào)用, 響應(yīng)頭和響應(yīng)狀態(tài)已經(jīng)返回.
3 LOADING (正在下載響應(yīng)體) 響應(yīng)體下載中; responseText中已經(jīng)獲取了部分?jǐn)?shù)據(jù).
4 DONE (請求完成) 整個請求過程已經(jīng)完畢.
*/
if (httpRequest.readyState == 4) {
// 200(OK)
// 404(Not Found) or 500(Internal Error)
if (httpRequest.status == 200) {
var responseText = httpRequest.responseText;
} else {
}
} else {
}
};
httpRequest.open('GET', 'xxx.json', true);
httpRequest.send(null);
這里涉及到ajax相關(guān)信息有厢洞，請求地址(url)，請求方法(method)典奉，請求參數(shù)躺翻，請求狀態(tài)，請求時間卫玖，請求Headers信息公你，響應(yīng)內(nèi)容。
獲取上述信息的途徑有：
- 在
window.XMLHttpRequest.prototype.open方法中可以獲取到請求地址(url)假瞬，請求方法(method)信息陕靠。 - 在
window.XMLHttpRequest.prototype.send方法中可以獲取到POST請求的請求參數(shù)信息迂尝。
如果是GET請求，需對請求地址(url)的查詢字符串進(jìn)行解析處理剪芥。 -
window.XMLHttpRequest.prototype.status屬性即為請求狀態(tài)垄开。 - 獲取ajax請求所消耗時間，只需在
onreadystatechange方法中的DONE階段聲明的時間 減去 在UNSENT階段聲明的時間即可税肪。 - 通過
window.XMLHttpRequest.prototype.getAllResponseHeaders方法可獲取到請求Headers信息说榆。 -
window.XMLHttpRequest.prototype.response屬性即為響應(yīng)內(nèi)容。
根據(jù)響應(yīng)內(nèi)容的類型responseType的值text,json,blob,document,arraybuffer做對應(yīng)的字符串格式化寸认。
參考vConsole的newtwork.js的mockAjax方法签财。
其它
chrome跑example頁面發(fā)現(xiàn)報Cannot read property 'trigger' of undefined錯誤。
原因是zepto.touch.min.js使用了pointer事件偏塞。
關(guān)于pointer事件唱蒸，參考這個鏈接
pointer事件用來統(tǒng)一鼠標(biāo)（mouse）、觸摸屏（touch）灸叼、觸控筆（pen）三者的交互事件神汹。
chrome未完善支持，導(dǎo)致報錯古今。
- 判斷網(wǎng)頁文檔準(zhǔn)備情況屁魏。
if (document !== undefined) {
if (document.readyState == 'complete') {
_onload();
} else {
$.bind(window, 'load', _onload);
}
} else {
// if document does not exist, wait for it
let _timer;
let _pollingDocument = function() {
if (document && document.readyState == 'complete') {
_timer && clearTimeout(_timer);
_onload();
} else {
_timer = setTimeout(_pollingDocument, 1);
}
};
_timer = setTimeout(_pollingDocument, 1);
}
可參考這個鏈接
render panel DOM
把core.html里面的節(jié)點渲染到頁面上。
這里有個element.insertAdjacentElement方法捉腥，詳細(xì)參考此鏈接
log輸出三種形式氓拼，如果是function，直接通過其toString方法輸出抵碟。如果是字符串桃漾，需經(jīng)過htmlEncode后輸出。
如果是對象或者數(shù)組拟逮。
首先輸出類型名稱和預(yù)覽（少于26個字符）
遍歷對象下屬的key和對應(yīng)的vlaue撬统，value類型。
獲取對象的prototype name敦迄，Object.prototype.toString.call(obj).replace('[object ', '').replace(']', '');
