Console——控制台面板

开发用来调试的时候，会用的比较多。对测试来说，某个功能不好使的时候，开发会说，“可以看下控制台有没有报错”，控制台面板中一般会打印一些报错信息，类似于APP的日志一样，可以定位到时哪个文件，在报bug的时候将相关信息附上~
另外可以通过让开发打印相关信息，帮助我们定位问题或者计算一些性能数据，比如下图的简书的控制台 ↓

打开简书后的控制台展示 打开百度的控制台展示

1、打印一些信息，console.log()

2、过滤日志级别，类似于Android studio中的日志过滤

• Verbose：从Chromium58开始，仅显示 console.debug() 的输出
• Info：仅显示 console.info() 的输出
• Warnning：仅显示 console.warn() 的输出
• Errors：仅显示 console.error() 的输出
• Default：默认勾选Info、Warnings、Errors

3、filter过滤

输入 url:https://www.jianshu.com/ 显示jianshu相关的信息

输入 -url:https://www.jianshu.com/ 隐藏jianshu相关的信息

4、控制台侧栏过滤，点击可展开侧边栏，也可以进行过滤相关信息

5、设置中的内容，可以根据是否勾选进行开启

• Preserve log，勾选后，刷新页面后仍然保留控制台记录，比如我们在测试一个页面的时候，避免因为刷新导致之前的相关信息丢失，可以将此选项进行勾选
• Group similar，勾选后，类似的消息折叠到一起显示，可以看到消息后面有具体的数量，比如我们在测试的时候，避免消息太多找不到重点，可以将此选项进行勾选

6、点击 "Create Live Expression" 眼睛图标，打开动态表达式界面

1. 输入要监控的表达式，比如查看当前的时间戳，输入 Date.now()
2. 会发现当前时间戳会一直变动。也就是表示式被重新计算了，Live Expression 的执行频率是250毫秒。

快捷链接：
Chrome开发者工具——Elements
Chrome开发者工具——Network

参考资料：
https://developers.google.com/web/tools/chrome-devtools?hl=zh-cn