js调试

GlobalEventHandlers.onError提供了一个全局监控的作用，它可以在JavaScript发生运行时错误时或者某些资源加载失败时触发Error Event的error事件；

1. JavaScript运行时错误：window.onerror；
2. 资源加载失败（<img>或<script/>等）：这些加载元素上的error事件不会冒泡到window，但是可以被window.addEventListener捕获；

window.onerror

window.onerror = function(message, source, lineno, colno, error);

1. message: 字符串格式的错误信息；
2. source: 发生错误脚本的url；
3. lineno: 发生错误的行号；
4. colno: 发生错误的列号；
5. error: Error对象；
6. 返回值为true则阻止默认事件处理函数；

使用：
需要将内联式js代码置于其他外部脚本之前；

window.addEventListener(‘error’, function(event) { … })

跨域脚本

问题：引入跨域脚本时，为了安全考虑限制脚本访问错误信息，使用window.onload部分浏览器打印出的错误信息是Script error，不会打印具体错误信息；不过，在控制台仍然可以看到具体错误信息；对于支持CORS的浏览器，可以添加CORS设置crossorigin使其允许打印跨域脚本的错误信息而不仅仅是打印script error；更好的兼容性写法如下：

window.onload = function (msg, source, lineno, colno, error) {
	var str = msg.toLowerCase();
	if (str.indexOf('script error') > -1) {
		console.log('Script Error: Open Browser Console for Details.');
	} else {
		console.log('error msg: ' msg);
		console.log('error source: ' source);
		console.log('error lineno: ' lineno);
		console.log('error colno: ' colno);
		console.log('error Object: ' error);
	}
	return false;
}

异步代码调试

1. Promise：使用自带的catch捕获；
2. async...await：使用try...catch；
3. 其他：使用try...catch;

---

参考文献

1. https://yuchengkai.cn/docs/frontend/performance.html#%E7%9B%91%E6%8E%A7
2. https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onerror