14 个你可能不知道的 JavaScript 调试技巧

了解你的工具可以极大的帮助你完成任务。尽管 JavaScript 的调试非常麻烦,但在掌握了技巧 (tricks) 的情况下,你依然可以用尽量少的的时间解决这些错误 (errors) 和问题 (bugs) 。

我们会列出14个你可能不知道的调试技巧, 但是一旦知道了,你就会迫不及待的想在下次需要调试 JavaScript 代码的时候使用它们!

现在开始

虽然许多技巧也可以用在别的检查工具上,但大部分的技巧是用在 Chrome Inspector 和 Firefox 上的。

1. ‘debugger;’

‘debugger’ 是 console.log 之外我最喜欢的调试工具,简单暴力。只要把它写到代码里,Chrome 运行的时候就会自动自动停在那。你甚至可以用条件语句把它包裹起来,这样就可以在需要的时候才执行它。

2. 把 objects 输出成表格

有时候你可能有一堆对象需要查看。你可以用 console.log 把每一个对象都输出出来,你也可以用 console.table 语句把它们直接输出为一个表格!

输出结果:143409_009E_2896879

3. 试遍所有的尺寸

虽然把各种各样的手机都摆在桌子上看起来很酷,但这却很不现实。为什么不选择直接调整界面大小呢? Chrome 浏览器提供了你所需要的一切。 进入检查面板点击 ‘切换设备模式’ 按钮,这样你就可以调整视窗的大小了!

143447_xg3C_2896879

4. 如何快速定位 DOM 元素

在元素面板上标记一个 DOM 元素并在 concole 中使用它。Chrome Inspector 的历史记录保存最近的五个元素,最后被标记的元素记为 $0,倒数第二个被标记的记为 $1,以此类推。

如果你像下面那样把元素按顺序标记为 ‘item-4′, ‘item-3’, ‘item-2’, ‘item-1’, ‘item-0’ ,你就可以在 concole 中获取到 DOM 节点:

143503_nbBY_2896879

5. 用 console.time() 和 console.timeEnd() 测试循环耗时

当你想知道某些代码的执行时间的时候这个工具将会非常有用,特别是当你定位很耗时的循环的时候。你甚至可以通过标签来设置多个 timer 。demo 如下:

运行结果:

143549_h4Oe_2896879

6.获取函数的堆栈轨迹信息

你可能知道 JavaScript 框架会产生很多的代码–迅速的。

它创建视图触发事件而且你最终会想知道函数调用是怎么发生的。

因为 JavaScript 不是一个很结构化的语言,有时候很难完整的了解到底发生了什么以及什么时候发生的。 这个时候就轮到 console.trace(在终端的话就只有 trace )出场来调试 JavaScript了 。

假设你现在想看 car 实例在第33行调用 funcZ 函数的完整堆栈轨迹信息: