了解你的工具可以极大的帮助你完成任务。尽管JavaScript的调试非常麻烦,但在掌握了技巧(tricks)的情况下,你依然可以用尽量少的的时间解决这些错误(errors)和问题(bugs)。
JavaScript的调试技巧
现在开始。
虽然许多技巧也可以用在别的检查工具上,但大部分的技巧是用在ChromeInspector和Firefox上的。
1.‘debugger;’
‘debugger’是console.log之外我最喜欢的调试工具,简单暴力。只要把它写到代码里,Chrome运行的时候就会自动自动停在那。你甚至可以用条件语句把它包裹起来,这样就可以在需要的时候才执行它。
2.把objects输出成表格
有时候你可能有一堆对象需要查看。你可以用console.log把每一个对象都输出出来,你也可以用console.table语句把它们直接输出为一个表格!
输出结果:
3.试遍所有的尺寸
虽然把各种各样的手机都摆在桌子上看起来很酷,但这却很不现实。为什么不选择直接调整界面大小呢?Chrome浏览器提供了你所需要的一切。进入检查面板点击‘切换设备模式’按钮,这样你就可以调整视窗的大小了!
4.如何快速定位DOM元素
在元素面板上标记一个DOM元素并在concole中使用它。ChromeInspector的历史记录保存最近的五个元素,最后被标记的元素记为$0,倒数第二个被标记的记为$1,以此类推。
如果你像下面那样把元素按顺序标记为‘item-4′,‘item-3’,‘item-2’,‘item-1’,‘item-0’,你就可以在concole中获取到DOM节点:
JavaScript的调试还有什么
用console.time()和console.timeEnd()测试循环耗时
当你想知道某些代码的执行时间的时候这个工具将会非常有用,特别是当你定位很耗时的循环的时候。你甚至可以通过标签来设置多个timer。demo如下:
运行结果:
的话就只有trace)出场来调试JavaScript了。
假设你现在想看car实例在第33行调用funcZ函数的完整堆栈轨迹信息:
总之,我们列出你可能不知道的调试技巧,但是一旦知道了,你就会迫不及待的想在下次需要调试JavaScript代码的时候使用它们!