现在的位置: 首页 > web前端 > 正文

js调试的JavaScript调试技巧

2020年07月06日 web前端 ⁄ 共 984字 ⁄ 字号 评论关闭

  了解你的工具可以极大的帮助你完成任务。尽管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代码的时候使用它们!


  

抱歉!评论已关闭.