前端开发调试之PC端调试
这是我参与第五届青训营 创作活动的第10天。
课程重点
- Elements
- Console
- Source
- Performance
- Network
详细知识点
Element
- 点击.cls开启动态修改元素的class,输入字符串可以动态地给元素添加类名，勾选/取消类名可以动态地查看类名生效效果。
- 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览。
- Computed下点击样式里的箭头可以跳转到styles面板中的css规则。
- 可以用2种方式强制激活伪类：选中具有伪类的元素，点击:hov; DOM树右键菜单，选择Force State.
Console
- console.log
- console.warn
- console.error
- console.debug
- console.info
左侧可以选择等级，对日志精选分类查看
- console.table 具像化的展示JSON和数组数据
- console.dir 通过类似文件树的方式展示对象的属性
- 占位符 给日志添加样式，可以突出重要信息 %s:字符串占位符；%o:对象占位符；%c:样式占位符；%d:数字占位符。
Sorce Tab
- 区域1：页面文件资源树
- 区域2：代码预览区域
- 区域3：Debug工具栏，从左到右依次为 暂停(继续)，单步跳过，进入函数，跳出函数，单步执行，激活(关闭)所有断点，代码执行异常处自动。
- 区域4：断点调试器
Break Point与Watch
- 使用关键字debugger或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标hover变量可以查看变量的值
- 在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值。
Scope与Call Stack
展开Scope可以查看作用域列表(包含闭包)，闭包参考
展开Call Stack可以查看当前javaScript代码的调用栈。调用栈参考
压缩后的代码如何调试? 前端代码天生具有“开源”性，出于安全考虑，为了降低代码的可读性，发布之前通常会压缩。Source Map可以映射源码，mappings字段存储了源文件和Source Map的映射。
NetWork
- 区域1：控制面板
- 区域2：过滤面板
- 区域3：概览区域
- 区域4：Request Table面板
- 区域5：总结面板
- 区域6：请求详情面板
Application面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
Performance（性能）
- 区域1：控制面板
- 区域2：概览面板：FPS: 每秒帧数；CPU:处理每个任务花费的时间；NET:各个请求花费的时间。
- 区域3：线程面板：Frames:帧线程；Main:主线程，负责执行JS,解析html/css,完成绘制；Raster:Raster线程负责完成某个layer或者某些块的绘制。
- 区域4：统计面板
Lighthouse
