【笔记】调试

Elements面板

作用：动态修改元素和样式

• 点击.cls开启动态修改元素的class
• 输入字符串可以动态的给元素添加类名
• 勾选/取消类名可以动态的查看类名生效效果
• 点击具体的样式值（字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
• Computed下点击样式里的箭头可以跳转到styles面板中的css规则

强制激活伪类（调试伪类）

• 选中具有伪类的元素，点击：hov
• DOM树右键菜单，选择Force state

console左侧可以选择等级，对日志进行分类查看

标题	作用
console.log	输出日志
console.warn	警告
console.error	错误
console.debug	调试
console.info	调试
console.table	具象化的展示JSON和数组数据（通过表格、树形或其他形式展示日志，方便查看数据）

占位符给日志添加样式，可以突出重要的信息
%s：字符串占位符、%o：对象占位符、%c：样式占位符、%d：数字占位符