Console
对象提供对浏览器控制台的接入。不同浏览器上它的工作方式是不一样的。Console
对象可以在任何全局对象中访问,如 Window。它被浏览器定义为 Window.Console,也可被简单的 Console 调用。
最常用的方法就是 console.log()
就是在控制台输出内容。console 对象还有除了 log
之外的其他方法。
注意:因为 Console 对象提供对浏览器控制台的接入 ,所以在不同浏览器中的支持以及表现方法可能不太一样,但是调试内容只有开发者会看,所以保证在开发环境用这些方法就可以。
分类输出
- 不同类别信息的输出。
1 | console.log('文字信息') |
表格输出
- 使用
console.table()
可以将传入的对象,或数组以表格形式输出。适合排列整齐的元素。还可以只获取指定字段的数据.
1 | var Obj = { |
查看对象
- 使用
Console.dir()
显示一个对象的所有属性和方法。 - 在 Chrome 中
Console.dir()
和Console.log()
效果相同。
1 | var CodeDeer = { |
计次输出
- 使用
Console.count()
输出内容和被调用的次数。
1 | for (var i = 0; i < 3; i++) { |
计时功能
- 使用
Console.time()
和Console.timeEnd()
包裹需要计时的代码片段,输出运行这段代码消耗的时间。
Console.time('登录用时')
中的参数作为计时器的标识,具有唯一性。Console.timeEnd('登录用时')
中的参数来结束此标识的计时器,并以毫秒为单位返回运行时间。- 最多同时运行 10000 个计时器。
1 | // console.time(参数标识) 必须和 console.timeEnd(参数) 一致 |
Console.log()
- 最后再来介绍一下强大的
Console.log()
,这个方法有很多的用法(其他输出方法的用法,如error()
等,可以参照log()
使用)。提示输出 可以再输出的对象、变量前加上提示信息,增加辨识度。
1 | var ans = 12345 |
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
17let 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))