这是我参与「第五届青训营 」笔记创作活动的第13 天
本堂课重点内容
1. PC 端调试 2. 移动端调试
重点知识点介绍
Chrome DevTools
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态地给元素添加类名
- 勾选/取消类名可以动态地查看类名生效效果
- 点击具体样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到styles面板中的css规则
- 选中具有伪类的元素，例如点击:hover可以强制激活伪类
- 在DOM树右键菜单中可以选择Force State
console
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table：具象化地展示JSON和数组数据
- console.dir：通过类似文件树的方式展示对象的属性
- 占位符: 给日志添加样式
- %s：字符串占位符
- %o：对象占位符
- %c：样式占位符
- %d：数字占位符
Source Tab
Break Point与Watch
- 使用关键字 debugger 或 代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开
Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标hover 变量可以查看变量的值
- 在调试器 Watch 右侧点击 + 可以添加对变量的监控，查看该变量的值
Scope 与 Call Stack
- 展开 Scope 可以查看作用域列表（包含闭包） - 展开 Call Stack 可以查看当前 JavaScript代码的调用栈
Source Map
压缩后的代码如何调试：
--> source Map
- mappings 字段存储了源文件和Source Map的映射 - 英文，表示源码及压缩代码的位置关联 - 逗号，分隔一行代码中的内容 - 分号，代表换行
NetWork
Application
Application 面板展示与本地存储相关的信息
- Local Storage - Session Storage - Indexed DB - Web SQL - Cookie
Performance
Lighthouse
课后个人总结
老师讲了前端调试的知识，很多细节我都未了解过，PC端的调试讲的很全面，移动端的我暂时还不掌握
引用参考
前端必须知道的开发调试知识(feishu.cn)
