前端开发调试之 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/