这是我参与「第四届青训营 」笔记创作活动的第6天。
前端必须知道的开发调试知识：
一：Bug与Debug
特点：
1. 多平台：浏览器、小程序
2. 多环境：本地开发环境、线上环境
3. 多工具：Charles、Whistle
4. 多技巧：代理、Console
二：Chrome DevTools
1. 动态修改元素和样式
可以使用以下2种方式强制激活伪代码：
选中具有伪类的元素，点击hov
Dom树右键菜单，选择Force Stste
2. Console：左侧可以选择等级，对日志进行分类查看。
3. Break Point 与Watch
a) 使用关键字debugger或代码预览区域的行号可以设置断电
b) 执行到断点处时代码暂停执行
c) 展开Breakpoints列表可以查看断点列表，勾选或取消可以被激活或禁用对应断点
d) 暂停条件下，鼠标hover变量可以查看变量的值
e) 在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值
4. Scope 与 Call Stack
a) 展开Scope可以查看作用域列表（包含闭包）
b) 展开Call Stack可以查看当前JavaScript代码的调用栈
5. Application：展示与本地储存相关的信息。
6. Performance：页面卡顿->查看FPS指标->寻找性能瓶颈->优化代码
7. Lighthouse：核心web指标：LCP、FID、CLS
三：移动端H5调试
1. iOs(真机调试)
a) 使用Lightning 数据线将iPhone与Mac相连
b) iPhone开启Web检查器(设置-> Safari >高级->开启Web检查器)
c) iPhone使用Safari 浏览器打开要调试的页面
d) Mac打开Safari浏览器调试(菜单栏- >开发-> iPhone设备名->选择调试页面)
e) 在弹出的Safari Developer Tools中调试
2. Android：（真机调试）
a) 使用USB数据线将手机与电脑相连
b) 手机进入开发者模式，勾选USB调试，并允许调试
c) 电脑打开Chrome浏览器，在地址栏输入: chrome:/ /inspect/#devices并勾选Discover USB devices 选项
d) 手机允许远程调试，并访问调试页面
e) 电脑点击inspect 按钮
f) 进入调试界面
3. VConsole：
a) 日志(Logs):console. loglinfolerror
b) 网络(Network): XML Ht tpReques t,Fetch, s endBeacon
c) 节点(Element): HTML 节点树
d) 存储(Storage): Cookies,L oca lstorage, Sess i onStor age
e) 手动执行JS命令行
f) 自定义插件
4. 使用代理工具调试
a) 原理:
i. 电脑作为代理服务器
ii. 手机通过HTTP代理连接到电脑
iii. 手机上的请求都经过代理服务器
b) 以Charles为例:
1.安装Charles
2.查看电脑P和端口
3.将P、端口号填入手机HTTP代理
- Charles允许授权
5.使用SwitchHosts! 软件给Mac电脑配Hosts
6.手机访问开发环境页面
5. 常用代理工具：
Charles:适合查看、控制网络请求，分析数据
Fiddler:与Charles 类似适合windows平台
spy-debugger远程调试手机页面，抓包
Whistle:基于Node实现的跨平台Web调试代理工具
四：Nodejs调试
1. 执行命令node - -inspect 8888 index.js
2. chrome浏览器访问服务
3. 点击绿色node图标打开node调试面板(在chrome://inspect/#devices中配置network target)
4. 在node调试面板中使用断点调试
五：常用开发调试技巧：
1. 线上即时修改Overrides：
a) 打开Sources面板下的的Overrides
b) 点击Select folders for Overrides。选择一个本地的空文件夹目录。
c) 允许授权
d) 在page中修改代码，修改完成后command + s保存
e) 打开devTools，点击右上角的三个小点-> More tools ->Changes,就能看到所有修改了
2. 启用本地source map：线上不存在Source Map时可以使用Map Local网络映射功能来访问本地的Source Map文件。
3. 使用代理工具Mock数据：
a) 右键选中要mock数据的接口，选择save response，保存文件到本地。
b) 本地打开保存的文件，编辑想mock的数据并保存。
c) 右键选中第一 步的接口，选择Map Local, Local Path选择第二步的文件。
4. 小黄鸭调试大法：传说中程序大师随身携带只小黄鸭，在调试代码的时候会在桌上放上这只小黄鸭，然后详细地向鸭子解释每行代码，然后很快就将问题定位修复了。
《程序员修炼之道》 \
