这是我参与「第四届青训营 」笔记创作活动的的第4天 前端Debug特点
1.多平台 2.多环境 3.多环境 4.多技巧
在页面内右键选择检查 ↓
1.Elements
Elements => 页面元素、样式
动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 点击具体的样式值可以进行编辑，实时浏览
伪类调试（强制激活伪类）：右键选择Force state 或者 点击 :hov
2.Console
Console => 控制台
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table => 表格形式展示JSON和数组数据
- console.dir => 通过类似文件树展示
- 占位符 - 给日志添加样式（%s：字符串占位符；%o：对象占位符；%c：样式占位符；%d：数字占位符）
3.Sources
Sources => 展示源代码
页面资源文件目录树 - 代码预览区域 - Debug工具栏 - 断点调试
对于第三个区域（Debug工具栏） - 可以进行程序执行
程序进行暂停状态 -> 在代码中加debugger 或 在目标行直接点击暂停
对于第四个区域
- Watch
- Breakpoints 显示断点
- Scope 作用域
- Call Stack 调用栈
注： 出于安全考虑，代码通常会被压缩，压缩后的代码如何调试？
mappings字段存储了源文件和Source Map的映射
- 英文，表示源码及压缩代码的位置关联
- 逗号，分隔一行代码中的内容。
- 分号，代表换行。
注： Source Map可以映射源码，那压缩后的代码不就又不安全了？ 不上限Source Map，将Source Map放入其他进行监控
4.Network
点击相应请求后会出现请求详情
最下方为总结区域
5.Application
Application => 展示与本地存储相关信息
6.Performance
Performance => 性能相关
控制面板 - 概览面板 - 线程面板 - 统计面板
页面卡顿 -> 查看FPS指标 -> 寻找性能瓶颈 -> 优化代码
常用调试技巧
Sources -> Overrides 覆盖代码
