Js调试命令

Console对象提供对浏览器控制台的接入。不同浏览器上它的工作方式是不一样的。Console 对象可以在任何全局对象中访问,如 Window。它被浏览器定义为 Window.Console,也可被简单的 Console 调用。

最常用的方法就是 console.log() 就是在控制台输出内容。console 对象还有除了 log 之外的其他方法。
注意:因为 Console 对象提供对浏览器控制台的接入 ,所以在不同浏览器中的支持以及表现方法可能不太一样,但是调试内容只有开发者会看,所以保证在开发环境用这些方法就可以。

分类输出

  • 不同类别信息的输出。
1
2
3
4
console.log('文字信息')
console.info('提示信息')
console.warn('警告信息')
console.error('错误信息')

CONSOLE1

表格输出

  • 使用 console.table()可以将传入的对象,或数组以表格形式输出。适合排列整齐的元素。还可以只获取指定字段的数据.
1
2
3
4
5
6
7
8
9
var Obj = {
Obj1: { a: 'aaa', b: 'bbb', c: 'ccc'},
Obj2: { a: 'aaa', b: 'bbb', c: 'ccc'},
Obj3: { a: 'aaa', b: 'bbb', c: 'ccc'},
Obj4: { a: 'aaa', b: 'bbb', c: 'ccc'}
}
console.table(Obj)
var Arr = [['aa', 'bb', 'cc'], ['dd', 'ee', 'ff'], ['gg', 'hh', 'ii']]
console.table(Arr)

CONSOLE1

查看对象

  • 使用 Console.dir()显示一个对象的所有属性和方法。
  • 在 Chrome 中 Console.dir()Console.log()效果相同。
1
2
3
4
5
6
7
8
var CodeDeer = {
name: '张三',
blog: 'www.google.com'
}
console.log('console.dir(CodeDeer)')
console.dir(CodeDeer)
console.log('console.log(CodeDeer)')
console.log(CodeDeer)

CONSOLE1

计次输出

  • 使用 Console.count()输出内容和被调用的次数。
1
2
3
for (var i = 0; i < 3; i++) {
console.count('运行次数:')
}

CONSOLE1

计时功能

  • 使用 Console.time()Console.timeEnd()包裹需要计时的代码片段,输出运行这段代码消耗的时间。
  1. Console.time('登录用时')中的参数作为计时器的标识,具有唯一性。
  2. Console.timeEnd('登录用时')中的参数来结束此标识的计时器,并以毫秒为单位返回运行时间。
  3. 最多同时运行 10000 个计时器。
1
2
3
4
// console.time(参数标识) 必须和 console.timeEnd(参数) 一致
console.time('Chrome中循环1000次的时间')
for (var i = 0; i < 1000; i++) {}
console.timeEnd('Chrome中循环1000次的时间')

CONSOLE1

Console.log()

  • 最后再来介绍一下强大的 Console.log(),这个方法有很多的用法(其他输出方法的用法,如error()等,可以参照log()使用)。提示输出 可以再输出的对象、变量前加上提示信息,增加辨识度。
1
2
var ans = 12345
console.log('这是临时变量ans的值:', ans)

CONSOLE1

debugger

  • 调试 js 代码时 可以在需要调试的地方打断点,然后在浏览器中打开在运行到这一段的代码时会在打断点的地方停止,在 Chrome 中可以按 F10 继续下一步,然后在 开发者工具–>Sources 中可以看到具体内容,也可以用 鼠标 放到某个 变量上 看具体值。使用debugger检查页面hover后出现的弹窗,鼠标移入后在console控制台输入debugger然后回车,页面就卡住了就可以愉快的进行检查元素了
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    let nums1 = [4, 9, 5]
    let nums2 = [9, 4, 9, 8, 4]

    const solution2 = (arr1, arr2) => {
    let result = []
    for (let item of arr1) {
    debugger
    if (arr2.includes(item)) {
    debugger
    result.push(item)
    }
    }

    return [...new Set(result)]
    }

    console.log('solution2', solution2(nums1, nums2))

CONSOLE1

-------------本文结束感谢您的阅读-------------
0%