这是我参与「第五届青训营 」伴学笔记创作活动的第12天
在程序员的世界中，BUG 一词相信同学们再熟悉不过了，本节课将围绕前端开发中所遇见的 BUG 出发，讲解作为一名合格的前端开发人员，你应该掌握哪些开发调试知识。为了方便大家更好地知悉不同场景下 debug 方法，将分为 PC 端与移动端展开解读。
课堂笔记
视频地址
ppt地址 前端必须知道的开发调试知识.pptx - 飞书云文档 (feishu.cn)
概述
本节课程主要分为四个方面：
- Web 应用使用 Chrome devTools 调试
- 移动端 H5 调试
- NodeJs 应用调试
- 常用代理工具的使用
课前
安装 Chrome 浏览器
【可选】 安装代理工具
- 安装 Charles
一、本堂课重点内容：
PC端调试方法
移动端调试方法
二、详细知识点介绍：
前端Debug的特点
1.多平台
浏览器、Hybrid、NodeJS、小程序、桌面应用等
2.多环境
本地开发环境、线上环境
3.多工具
Chrome DevTools、Charles、Spy-Debugger、Whistle、VConsole ...
4.多技巧
Console、BreakPoint、SourceMap、代理等
Chrome DevTools
Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具
Elements
动态修改元素和样式
- 点击 .cls 开启动态修改元素的 class
- 输入字符串可以动态地给元素添加类名
- 勾选 / 取消类名可以动态地查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
- Computed 下点击样式里的箭头可以跳转到 Styles 面板中的 CSS 规则(有一个箭头说明当前这条样式是真正生效的)
选中body右键选择capture node screenshot可以实现截屏
可以用以下 2 种方式强制激活伪类：
1.选中具有伪类的元素，点击 :hov
2.DOM 树右键菜单，选择 Force State
Console
console.log
console.warn
console.error
console.debug
console.info
占位符 给日志添加样式，可以突出重要信息
%s 字符串占位符
%o 对象占位符
%c 样式占位符
%d 数字占位符
console.table 具象化地展示 JSON 和 数组数据
console.dir 通过类似文件树的方式展示对象的属性
Source
Break Point 与 Watch
- 使用关键字 debugger 或 代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标 hover 变量可以查看变量的值
- 在调试器 Watch 右侧点击 + 可以添加对变量的监控，查看该变量的值
Scope 与 Call Stack
- 展开 Scope 可以查看作用域列表（包含闭包）
- 展开 Call Stack 可以查看当前 JavaScript 代码的调用栈
- 关于调用栈可以参考 developer.mozilla.org/en-US/docs/…
压缩后的代码如何调试？
Source Map 可以映射源码
mappings 字段存储了源文件和 Source Map 的映射
英文，表示源码及压缩代码的位置关联
逗号，分隔一行代码中的内容
分号，代表换行
代码上线的时候，为了安全和缩小体积，是不会上线 Source Map的，在项目打包的时候，会带上 Source Map去build，在上线之前把 Source Map上传到另一个监控平台，上传完之后删除掉Source Map，再上传不带 Source Map的产物，这样别人看到的是压缩后的代码。
Debug工具栏介绍
- 暂停 - 单步跳过 - 进入函数 - 跳出函数 - 刷新 - 连接
Network
与网络请求相关信息的面板
可以模拟弱网环境
Application
Application 面板展示与本地存储相关的信息
Local Storage 本地存储，生命周期永久，仅在浏览器中保存
Session Storage 会话存储，生命周期为关闭浏览器窗口，仅在浏览器中保存
IndexedDB 一个运行在浏览器上的非关系型数据库
Web SQL 一种运行在浏览器中的结构化数据库
Cookie 没有设置 expires 选项时，cookie 的生命周期仅限于当前会话中，关闭浏览器就失效
点击Application下的Stroage面板中的 Clear Site Data 可以清除网页的本地存储数据
Performance
与网页性能相关信息面板
页面卡顿->查看FPS指标->寻找性能瓶颈->优化代码
如何打开FPS指标面板？
Lighthouse
Lighthouse 是 Google 开发的一款工具，用于分析网络应用和网页，收集现代性能指标并提供对开发人员最佳实践的意见。
核心 Web 指标：
Largest Contentful Paint（LCP）：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的 2.5s 内发生
First Input Delay（FID）：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的 FID 应为 100ms或更短
Cumulative Layout Shift（CLS）：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的 CLS 应保持在 0.1 或更少
移动端H5调试
真机调试
iOS
1.使用 Lightning 数据线将 iPhone 与 Mac 相连
2.iPhone 开启 Web 检查器（设置 -> Safari -> 高级 -> 开启 Web 检查器）
3.iPhone 使用 Safari 浏览器打开要调试的页面
4.Mac 打开 Safari 浏览器调试（菜单栏 -> 开发 -> iPhone 设备名 -> 选择调试页面）
5.在弹出的 Safari Developer Tools 中调试
没有 iPhone 设备可以在 Mac App Store 安装 Xcode 使用其内置的 iOS 模拟器
Android
1.使用 USB 数据线将手机与电脑相连
2.手机进入开发者模式，勾选 USB 调试，并允许调试
3.电脑打开 Chrome 浏览器，在地址栏输入 chrome://inspect/#devices 并勾选 Discover USB devices 选项
4.手机允许远程调试，并访问调试页面
5.电脑点击 inspect 按钮
6.进入调试界面
直接使用手机扫码查看，体验更佳。
VConsole
一个轻量、可拓展、针对手机网页的前端开发者调试工具，可以在手机上进行调试
使用代理工具调试
原理：
电脑作为代理服务器
手机通过 HTTP 代理连接到电脑
手机上的请求都通过代理服务器
以 Charles 为例：
1.安装 Charles
2.查看电脑 IP 和 端口
3.将 IP、端口号填入手机 HTTP 代理
4.Charles 允许授权
5.使用 SwitchHosts! 软件给 Mac 电脑配 Hosts
6.手机访问开发环境页面
默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书
常用代理工具
Charles：适合查看、控制网络请求，分析数据
Fiddler：与 Charles 类似，适合 Windows 平台
spy-debugger：远程调试手机页面，抓包
Whistle：基于 Node 实现的跨平台 Web 调试代理工具
Nodejs 调试
Inspector Protocol + Chrome DevTool
执行命令 node --inspect=8888 index.js
Chrome 浏览器访问服务
点击绿色 node 图标打开 node 调试面板（在 chrome://inspect/#devices 中配置 network target）
在 node 调试面板中使用断点调试
Inspector Protocol + VS Code
VS Code 点击运行
添加配置
启动调试
添加断点
查看变量、堆栈
常用开发调试技巧
线上及时修改Overrides
调试过程中修改一个样式，页面刷新后，样式仍然改变
1.打开 Sources 面板下的 Overrides
2.点击 Select folders for Overrides 选择一个本地的空文件夹目录
3.允许授权
4.在 page 中修改代码，修改完成后 command+s 保存
5.打开devTools ，点击右上角的三个小点 -> More tools -> Changes，就能看到所有修改了
利用代理解决开发阶段的跨域问题
启用本地 source map
线上不存在 Source Map 时可以使用 Map Local 网络映射功能来访问本地的 Source Map 文件
使用代理工具 Mock 数据
1.右键选中要 mock 数据的接口，选择 save response ，保存文件到本地
2.本地打开保存的文件，编辑想 mock 的数据并保存
3.右键选中第一步的接口，选择 Map Local ， Local Path 选择第二步的文件
小黄鸭调试大法
三、引用参考：
四、课后
调试技巧实践
- Chrome devtools 各 tab 的运用实践
- 常用代理工具的实践
