这是我参与「第五届青训营 」伴学笔记创作活动的第 十 天
前端技术栈之前端开发调试 PC 移动端｜ 青训营笔记
Bug 和 Debug
各个工具的简单介绍。
Bug的产生
- First bug（第一个错误）
- Bug or Feature（错误或功能）
- Node Code，No Bug(节点代码，无Bug)
前端Debug的特点
- 多平台 （浏览器，Hybrid，NodeJs，小程序，桌面应用等）
- 多环境（本地开发环境，线上环境）
- 多工具
- 多技巧
pc端 Chrome DevTools
动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号，颜色，宽度高度等）可以进行编辑，浏览器内容区域实时预览
Console
- console.log
- console.warn
- console.table(具像的展示JSON和数组数据)
- console。dir（通过类似文件树的方式展示对象的属性）
- 占位符（给日志添加样式，可以突出重要的信息 %s：字符串; %o：对象占位符;%d：数字占位符；%c：样式占位符）
Break Point 与 Watch
- 使用关键字 debugger 或代码预览区的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开Breakpoints列表可以查看段爹列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标hover变量可以查看变量的值
- 在调试器watch 右侧点击+可以添加对变量的监控，查看该变量的值。
Scope与Call Stack
- 展开Scope可以查看作用域列表（包含闭包）
- 展开 Call Stack 可以查看当前JavaScript代码的调用栈
Lighthouse
核心Web指标
- LCP:最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.4秒内发生。
- FID：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
- CLS：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1.或更少。
移动端 H5 调试
真机调试
1.ios：
- Lightning 数据线将iPhone与Mac相连
- iPhone开启Web检查器
- iPhone 使用Safari浏览器打开要调试的页面
- Mac打开Safari浏览器调试
- 在弹出 Safari Developer Tools 中调试 2.Android：
- 使用USB数据线将手机与电脑相连
- 机进入开发者模式，勾选usb调试，并允许调试
- 电脑打开Chrome浏览器，在地址输入：chrome：//inspect/#devices并勾选Discover USB devices 选项
- 手机允许远程调试，并访问调试页面
- 电脑点击inspect按钮
- 进入调试界面
使用代理工具调试
原理：
- 电脑作为代理服务器
- 手机通过HTTP代理连接到电脑
- 手机上的请求都经过代理服务器 以Charles为例：
- 安装Charles
- 查看电脑IP和端口
- 将ip端口号填入手机HTTP代理
- Charles 允许授权
- 使用SwtchHosts软件给Mac电脑配Hosts
- 手机访问开发环境页面
本章只是大概记录本课笔记。
