前端开发调试之 PC 端调试

以下内容来自稀土掘金青训营课程

bug 与 debug

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

console

• console.log
• console.warn
• console.error
• console.debug
• console.info
• console.table 具像化的展示SON和数组数据
• console.dir 通过类以文件树的方式展示对象的属性
• 占位符:给日志添加样式，可以突出重要的信息 %s:字符串占位符；%o:对象占位符，%c:样式占位符；%d:数字占位符

source tab

performance

示例：https://googlechrome.github.io/devtools-samples/jank/

lighthouse