前端调试技巧大全
Debugger
在代码中插入 debugger
可以在其位置触发断点调试。
Console.dir
使用 console.dir
命令,可以打印出对象的结构,而 console.log
仅能打印返回值,在打印 document
属性时尤为有用。
ps: 大部分时候,对象返回值就是其结构
使用辅助工具,语法高亮、linting
它可以帮助我们快速定位问题,其实 flow 与 typescript 也起到了很好的调试作用。
浏览器拓展
使用类似 ReactDTools VueDTools 调试对应框架。
借助 DevTools
Chrome Dev Tools 非常强大,dev-tips 列出了 100 多条它可以做的事。
移动端调试工具
最靠谱的应该是 eruda,可以内嵌在任何 h5 页面,充当 DevTools 控制台的作用。
实时调试
不需要预先埋点,比如 document.activeElement
可以打印最近 focus 过的元素,因为打开控制台导致失去焦点,但我们可以通过此 api 获取它。
结构化打印对象瞬时状态
JSON.stringify(obj, null, 2)
可以结构化打印出对象,因为是字符串,不用担心引用问题。
数组调试
通过 Array.prototype.find
快速寻找某个元素。