调试
调度能力为什么重要?
- js 工程师对质量重视程度欠佳(无单元测试、缺少异常捕获)
- 浏览器强大兼容性、容错
- 后端异常抛到前端,需要协助和定位
日志收集
断言
- 仅不满足条件时打印错误信息
- 可以用来减少
console
打印,仅打印异常
js
let a = 2
console.assert(a === 3, 'a 的值不是 3')
onerror
当一个 JS 运行环境错误(包括语法错误)发生时,一个全局错误事件发生并且唤起window.error()
当资源加载失败,发生元素上的错误事件,唤起元素上的onerror()
,这些事件不会传播到window
js
window.onerror = function(message, source, lineno, colno, error) { ... }
element.onerror = function(event) { ... }
window.onerror = function (errorMsg, url, lineNumber) {
alert('Error: ' + errorMsg + ' Script: ' + url + ' Line: ' + lineNumber);
}
调试工具
保持等待
js
function waitForever() {
return new Promise(r => {})
}
// Usage:
await waitForever()
打到页面上
js
function log(msg) {
var elem = document.createElement('div')
elem.innerHTML = msg
document.querySelector('body').appendChild(elem)
}
log('Running...')
开发、线上兼顾
线上不应该输出过多 console
新功能初期不稳定,希望打出来,线上通过 url 参数
js!isProd && console.log('\n \x1b[44m', 'RELOADING', '\x1b[0m\n')
sourcemap