这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
一、本堂课重点内容:
- Web 应用使用 Chrome devTools 调试
- 移动端 H5 调试
- NodeJs 应用调试
- 常用代理工具的使用
二、详细知识点介绍:
2.1 Bug与Debug
2.1.1 Bug的产生
2.1.2 前端Debug的特点
- 多平台
- 浏览器、Hybrid、NodeJs、小程序、桌面应用等.
- 多环境
- 本地开发环境、线上环境
- 多工具
- Chrome devTools、Charles、Spy-Debugger、Whictle vConsole
- 多技巧
- Console、BreakPoint、sourceMap、代理等
2.2 Chrome DevTools
2.2.1 动态修改元素和样式
-
点击.cls开启动态修改元素的class
-
输入字符串可以动态的给元素添加类名
-
勾选/取消类名可以动态的查看类名生效效果
-
点击具体的样式值（字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
-
Computed下点击样式里的箭头可以跳转到styles面板中的css规则
-
可以用以下2种方式强制激活伪类
- 选中具有伪类的元素，点击:hov
- DOM树右键菜单，选择Force State
2.2.2 console
-
console.log
-
console.warn
-
console.error
-
console.debug
-
console info
-
console.table 具像化的展示JSON和数组数据
-
console.dir 通过类似文件树的方式展示对象的属性
-
占位符 给日志添加样式，可以突出重要的信息 %s:字符串占位符;%o:对象占位符;%c:样式占位符;%d:数字占位符
2.2.3 sorce table
- 区域1:页面资源文件目录树
- 区域2:代码预览区域
- 区域3: Debug工具栏从左到右依次为
- 暂停（继续)
- 单步跳过
- 进入函数
- 跳出函数
- 单步执行
- 激活(关闭）所有断点
- 代码执行异常处自动 区域4:断点调试器
- 使用关键字debugger 或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标hover 变量可以查看变量的值
- 在调试器Watch右侧点击＋可以添加对变量的监控，查看该变量的值
-
展开Scope 可以查看作用域列表(包含闭包) 闭包可以参考 developer.mozilla.org/en-US/docs/…
-
展开Call Stack 可以查看当前javaScript代码的调用栈 关于调用栈可以参考 developer.mozilla.org/en-US/docs/…
-
mappings字段存储了源文件和source Map的映射
-
英文，表示源码及压缩代码的位置关联
-
逗号，分隔一行代码中的内容。
-
分号，代表换行。
映射见:
2.2.4 Network
- 区域1:控制面板
- 区域2︰过滤面板
- 区域3:概览区域
- 区域4: Request Table面板
- 区域s:总结面板
- 区域6:请求详情面板
2.2.5 Application
- Application面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
2.2.6 Performance
-
区域1:控制面板
-
区域2:概览面板
- FPS:每秒帧数
- CPU:处理各个任务花费的时间
- NET:各个请求花费时间
-
区域3:线程面板
- Frames:帧线程
- Main:主线程，负责执行Javascript,解析HTML/CSS,完成绘制
- Raster: Raster线程，负责完成某个layer或者某些块(tile)的绘制。
-
区域4:统计面板
2.2.7 Lighthouse
三、引用参考：
- 青训营ppt
