对于开发人员来说免不了和bug打交道，可以说开发人员80%的时间都在debug，也就是调试错误。
利用浏览器控制台查看错误
以chrome为例：
- 打开chrome的控制台，查看console面板。控制台中显示着错误消息、错误的 URL 和错误的行号
- 单击 JavaScript 控制台中的错误，就可以定位到导致错误的源代码行。
错误分类
- 运行错误
- 资源加载错误
错误捕获
- 代码错误捕获 捕捉一般代码错误
window.onerror=function(message,url,line){
//错误捕获
alert(message)
}
tip：该方法能拦截到大部分的详细报错信息，但是也有例外
* 对于跨域js文件获取是有限制的，如果想获取其他域下的js错误需要在script标签里添加crossorigin属性，
然后服务器端要设置header('Access-Control-Allow-Origin: *');
* 对于某些浏览器可能不会显示调用栈信息，这种情况可以通过 arguments.callee.caller 来做栈递归
- 捕捉异步代码错误
比如 Promise 可以直接使用 catch 函数，async await 可以使用 try catch但是要注意线上运行的代码都是压缩过的，需要在打包时生成 sourceMap 文件便于 debug。
try{
// 可能会导致错误的代码
} catch(error){
//错误捕获
// 在错误发生时怎么处理
}
tip：与 try-catch 语句相配的还有一个 throw 操作符，用于随时抛出自定义错误。
//通用错误
throw new Error("Something bad happened.");
//使用其他错误类型，也可以模拟出类似的浏览器错误
throw new SyntaxError("I don’t like your syntax.");
throw new TypeError("What type of variable do you take me for?");
throw new RangeError("Sorry, you just don’t have the range.");
throw new EvalError("That doesn’t evaluate.");
throw new URIError("Uri, is that you?");
throw new ReferenceError("You didn’t cite your references properly.");
- 资源加载错误捕获
- object.onerror---img和script
var img = document.getElementById('img');
img.onerror = function () {
//错误捕获
console.error("资源加载错误")
}
- performance.getEntries
- Error时间捕获
资源加载错误不支持冒泡，但是可以捕获
window.addEventListener("error",function(e){"捕获",console.log(e)},true)
错误上报
常见错误上报有两种： ajax、image对象（推荐）
- ajax上报就是在上文注释错误捕获的地方发起ajax请求，来向服务器发送错误信息。
- 利用image对象
function logError(sev, msg){
var img = new Image();
img.src = "log.php?sev=" + encodeURIComponent(sev) + "&msg=" + encodeURIComponent(msg);
}
这个 logError() 函数接收两个参数：表示严重程度的数值或字符串（视所用系统而异）及错误消息。
只要是使用 try-catch 语句，就应该把相应错误记录到日志中。比如：
for (var i=0, len=mods.length; i < len; i++){
try {
mods[i].init();
} catch (ex){
logError("nonfatal", "Module init failed: " + ex.message);
}
}
