像专业人士一样操纵它!

开发人员总是充满好奇心。 几乎我们所有人都在猜测-那段代码将返回什么? 该变量内的值是什么? 哪一行引发了此异常,什么没有引发……调试工具回答了这些奇怪的问题,使我们的生活变得轻松而无负担。

并非所有语言都具有如此强大的工具来进行调试,大多数情况下,开发人员的本能有助于发现实际原因。 JavaScript总是有警报语句来回答上面提到的所有棘手的问题。 但是通过警报进行调试仍然很烦人且麻烦。 那时,当一个人的内在想法耗尽时,警报似乎是唯一的调试方法。

让我们尝试了解使用alert语句所涉及的困难:

  • 它停止执行流程和所有其他交互。
  • 在非调试环境中无法抑制它。
  • 警报关闭后就无法访问输出(无历史记录)。
  • 很难检查对象内容并在其中遍历。
  • 调试是否需要检查多个对象是一件令人讨厌的事情。
  • 如果任何警报语句泄漏到生产代码中,最终用户将受到影响。

值得庆幸的是,有一个控制台对象可提供对现代浏览器开发人员控制台的访问,以消除痛苦。 主机环境提供控制台对象以完成ECMAScript的执行。 按F12 在现代浏览器(如Chrome,Firefox,Safari,Opera或更高版本的Internet Explorer)中,将打开带有控制台的开发人员工具。 在两种情况下,输出都显示在浏览器控制台窗口中,控制台对象可以在javascript中使用,也可以直接在浏览器控制台上执行。 因此,让我们走一小段路来探索控制台API可以给我们的调试技能带来的威力。

console.log()和console.debug()

  • console.debug()console.debug()的别名,用于保留旧浏览器的向后兼容性。 但是,不鼓励使用console.debug()
  • 它打印出一个toString表示形式(Chrome大部分时间都打印出一个类似HTML的树结构)。 假设您有一个存储在数组中的天列表:
 令周= ['mon','tue','wed','thu','fri','sat','sun']; 

传递此数组时,console.log将以格式正确的方式显示数组的元素:

console.info()

与console.log()大致相同。 在控制台中的项目旁边显示'i'图标。

console.dir()

它打印出可导航的类似JSON的树结构。 当传递给console.dir()时,上述weeks数组会产生树视图,这对于调试对象的内容非常有帮助:

想象一下,您有年龄列表的人:

  var people = [
                {name:'Mark',age:23},      
                {name:'Jacob',age:18},      
                {name:'Steve',年龄:40}, 
              ]; 

people树形结构看起来像:

console.table()

  • console.dir()获得的树形视图有助于遍历对象的详细信息,但是我发现扩展每个折叠的对象以查看其内容仍然很麻烦。
  • console.table()提供具有可排序列的数据的表格视图。 使用console.table() people对象看起来像:
  • 可以通过传递键数组作为第二个参数来选择特定的列:

console.count()

这有助于了解执行特定行的次数。 如果您想知道循环执行了多少次,请调用console.count()并在其中传递可选标签:

console.time()和console.timeEnd()

  • 它有助于了解执行一段代码所需的时间。 重要的是要知道这样的时间,因为不同的浏览器花费不同的时间来执行相同的任务。
  • 首次使用唯一的计时器名称调用console.timeEnd()时,除非计时器使用相同的唯一计时器名称呈现console.timeEnd()调用,否则计时器将开始运行。
  • 执行console.timeEnd() ,浏览器以毫秒为单位记录经过时间time。

console.trace()

  • 有助于跟踪方法调用的流程,以跟踪到达添加console.trace()的特定点。
  • 按调用顺序记录方法。

console.assert()

  • 将第一个参数作为返回布尔值的表达式,将另一个作为可选对象(主要是断言失败的消息)。
  • 仅当表达式结果为false时,才记录通过的对象。 — Chrome输出带有堆栈跟踪的消息。

console.group(),console.groupCollapsed()和console.groupEnd()

  • 提供控制台日志的分组。
  • 最初打开console.groupCollapsed()日志,而最初折叠在console.groupCollapsed()日志。
  • console.group()console.collapsed()都可以任意嵌套。

明确()

  • 清除控制台上的所有日志,提供一个完整的工作表。
  • 在chrome中,如果启用了“ 保留日志”复选框,则禁用console.clear() 。 但是,按clear console 按钮或在控制台处于焦点状态时键入快捷键Ctrl+L仍然有效。

我更喜欢使用chrome的dev工具来调试几乎所有内容,但是最近Firefox的开发人员版进行了很多改进,看起来很有希望,值得尝试(我❤️黑色主题)。

希望您调试愉快。 在下面留下您的评论,并告诉您您将要尝试的…

“让我们来处理它,没有两个浏览器的行为方式相同。 console API也是如此。”

— Akshay Gundewar