这是我参与「第五届青训营」伴学笔记创作活动的第 12 天
课程重要知识点：
devtools 的使用【Element（元素）、Console（控制台）、Source（源代码）、Performance（性能）、Network（网络）等面板的具体作用和基本使用方法】
Element
- 选中元素后，点击
.cls按钮能够快速编辑元素的class属性
- 选中元素后，点击
:hov按钮能够选择元素不同的状态，快速预览样式
Computed 已计算面板中，能够看到元素最终应用的样式，也能够看到样式的来源
事件侦听器面板中，能够看到元素绑定的所有事件，并且能快速跳转到对应函数位置
- 元素位置右键菜单 “强制状态” 的子菜单中，也能够对元素状态进行操作。
Console
这个面板会显示网页的日志信息和报错信息。浏览器提供了一个 Console 类，让开发者能够操作日志信息
常用的方法有下面这些
console.log : 最常用的控制台输出方法，能够格式化输出常见的Javascript类型，提供多个参数的话，会依次输出
同时，也支持占位符
%s - 字符串占位符
%o - 对象占位符
%c - 样式占位符
%d - 数字占位符
console.warn : 输出警告, 会呈现黄色背景，其他和log一致
console.error : 输出错误，红色背景，能够输出Error对象
console.table : 输出表格，能够展示 json 和 数组
