JavaScript 调试技巧

console

在 JavaScript 的语言标准中, 是没有内置调试工具的. 由于 JS 是附属于浏览器中, 所有浏览器为它提供了一些调试的方法. console 就是其中的一个代表. 在不同的浏览器中 console 方法可能会出现略微的差别, 但是总体一致的.

输出

像 Python 的 print, PHP 的 echo. JavaScript 往控制台打印输出使用的方法就是 console.log. 不同在于 console 比起 print、echo ... 要更加的强大, 就针对信息的输入而言, 它为我们定义了一些 信息的级别.

console.log('正常输入')
console.info('普通级别')
console.warn('警告级别')
console.error('错误级别')

/*
 打印的信息都输出到浏览器的 “Developer Tools” 的 console 栏目
 拿 “Chrome 浏览器” 举例, console 栏目里有一个 Levels 选项可以帮助我们过滤打印的信息级别, 更方便我们定位错误
*/

断言

断言是一种常见的调试技巧, 它的用法就是我们提前预判程序的结果, 如果执行之后不符合我们的预判, 那么就报错.

function f(n) {
 console.assert(n !== 0, '零不能作为被除数') // 这里就是断言 | 提前预判
 return 10 / n
}

console.log(f(1)) // 10
console.log(f(2)) // 5
console.log(f(0)) // 报错 | Assertion failed: 零不能作为被除数

堆栈追踪

function f() { 
  console.trace() // 输出 f 函数的调用地址
}

f()

计时

这种方法是帮助我们计算一段代码的执行时间的.

console.time('time') // 开始
for (var i = 0; i < 1000; i++) {
  for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('time') // 结束


// time: 5.11181640625ms (运行时间)
// ('time')  这个名字是这两组方法的标示, 名字可以是任意的, 相互对应为一组

计数

统计执行的次数.

for (var i = 0; i < 5; i++) {
    console.count('count')
  }

// count 1
// count 2
// count 3
// count 4
// count 5

对象信息

传入一个对象, 打印出这个对象的一些信息, 属性方法等... 非常有用.

console.dir(Object)
console.dir(Array)
...

格式化

信息显示到控制台的一些排版方式.

/* 
 分组显示
*/

console.group('一级')
 console.group('二级')
  
  console.log('error')

 console.groupEnd()
console.groupEnd()

/*
 表格显示
*/

console.table({
 name: '简明教程',
 url: 'jmjc.tech'
})