前端调试技巧大全

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 快速寻找某个元素。