vConsole解决的三个关键问题
- 如何捕捉错误
- 如何输出循环定义对象
- 如何捕捉ajax请求
如何捕捉错误
使用window.onerror = function(message, source, lineno, colno, error) { ... }来捕捉JavaScript运行时错误（包括语法错误）。
以下信息来自MDN
函数参数为：
- message：错误信息（字符串）。Available as event (sic!) in HTML onerror="" handler.
- source：发生错误的脚本URL（字符串）
- lineno：发生错误的行号（数字）
- colno：发生错误的列号（数字）
- error：Error对象（对象)
若该函数返回true，则阻止执行默认事件处理函数。
跨域脚本的错误捕捉
对跨域脚本需加crossorigin属性，比如这个样子。
然后对js文件添加跨域header属性，比如这个样子Access-Control-Allow-Origin: *。添加方法点我
如何输出循环定义对象
循环定义的对象输出，原生APIJSON.Stringify()会报错，报错信息为Uncaught TypeError: Converting circular structure to JSON。
判断对象是否循环定义的思路是，子节点的引用跟其祖先的引用相同。
参考vConsole的tool.js的JSONStringify方法。
如何捕捉ajax请求
最基本的ajax代码如下：
var httpRequest = null;
httpRequest = new XMLHttpRequest();
httpRequest.overrideMimeType('text/json');
httpRequest.onreadystatechange = function(){
/*
0 UNSENT (未打开) open()方法还未被调用.
1 OPENED (未发送) send()方法还未被调用.
2 HEADERS_RECEIVED (已获取响应头) send()方法已经被调用, 响应头和响应状态已经返回.
3 LOADING (正在下载响应体) 响应体下载中; responseText中已经获取了部分数据.
4 DONE (请求完成) 整个请求过程已经完毕.
*/
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相关信息有，请求地址(url)，请求方法(method)，请求参数，请求状态，请求时间，请求Headers信息，响应内容。
获取上述信息的途径有：
- 在
window.XMLHttpRequest.prototype.open方法中可以获取到请求地址(url)，请求方法(method)信息。 - 在
window.XMLHttpRequest.prototype.send方法中可以获取到POST请求的请求参数信息。
如果是GET请求，需对请求地址(url)的查询字符串进行解析处理。 -
window.XMLHttpRequest.prototype.status属性即为请求状态。 - 获取ajax请求所消耗时间，只需在
onreadystatechange方法中的DONE阶段声明的时间 减去 在UNSENT阶段声明的时间即可。 - 通过
window.XMLHttpRequest.prototype.getAllResponseHeaders方法可获取到请求Headers信息。 -
window.XMLHttpRequest.prototype.response属性即为响应内容。
根据响应内容的类型responseType的值text,json,blob,document,arraybuffer做对应的字符串格式化。
参考vConsole的newtwork.js的mockAjax方法。
其它
chrome跑example页面发现报Cannot read property 'trigger' of undefined错误。
原因是zepto.touch.min.js使用了pointer事件。
关于pointer事件，参考这个链接
pointer事件用来统一鼠标（mouse）、触摸屏（touch）、触控笔（pen）三者的交互事件。
chrome未完善支持，导致报错。
- 判断网页文档准备情况。
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里面的节点渲染到页面上。
这里有个element.insertAdjacentElement方法，详细参考此链接
log输出三种形式，如果是function，直接通过其toString方法输出。如果是字符串，需经过htmlEncode后输出。
如果是对象或者数组。
首先输出类型名称和预览（少于26个字符）
遍历对象下属的key和对应的vlaue，value类型。
获取对象的prototype name，Object.prototype.toString.call(obj).replace('[object ', '').replace(']', '');