这是我参与「第五届青训营 」笔记创作活动的第8天。

本堂课重点内容

本节课介绍了前端须知的移动端开发调试知识。

详细知识点介绍

真机调试

IOS

0. 使用Lightning数据线将iPhone与Mac相连
1. iPhone开启Web检查器 (设置->Safari->高级->开启Web检查器)
2. iPhone使用Safari浏览器打开要调试的页面
3. Mac打开Safari浏览器调试（菜单栏一>开发->iPhone设备名->选择调试页面)
4. 在弹出的Safari Developer Tools中调试

没有iPhone设备可以在Mac App Store安装Xcode使用其内置的iOS模拟器

Android

0. 使用USB数据线将手机与电脑相连
1. 手机进入开发者模式，勾选USB调试，并允许调试
2. 电脑打开Chrome浏览器，在地址栏输入：chrome:/inspect/#devices并勾选Discover USB devices选项
3. 手机允许远程调试，并访问调试页面
4. 电脑点击inspect按钮
5. 进入调试界面

vConsole

我们可以在页面中注入vConsole组件，它有着类似于Chrome Devtools的功能。

使用代理工具调试

原理：

• 电脑作为代理服务器
• 手机通过HTTP代理连接到电脑
• 手机上的请求都经过代理服务器

以Charles（小花瓶）为例：

0. 安装Charles
1. 查看电脑P和端口
2. 将IP、端口号填入手机HTTP代理
3. Charles允许授权
4. 使用SwitchHosts!软件给Mac电脑配Hosts
5. 手机访问开发环境页面

默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书。

• Map remote 进行远程代理
• Map Local 将资源代理到本地

Node.js调试

devtools调试流程：

• 执行命令，启动调试服务
• 使用浏览器访问服务
• 点击绿色node图标打开node调试面板
• 在node调试面板中使用断点调试

也可以使用VScode打断点进行调试。

调试技巧总结

0. 使用devtools中source的overrides覆盖源代码

   0. 在page中修改代码，修改完成后进行保存
   1. 打开devtools，点击右上角的三个小点->more tools->changes 就能看到所有的修改了

1. 利用代理解决开发阶段的跨域问题

   0. 这里用的是字节自研的工具，羡慕
   1. 部署到线上一般使用nginx配置进行代理

2. 启用本地source map

   0. 主要是配置代理进行转发
   1. 当访问线上代码时通过source map转到本地代码

3. 使用代理工具mock数据

   0. 右键选中要mock数据的接口，选择save response，保存文件到本地
   1. 本地打开保存的文件，编辑想mock的数据并保存
   2. 右键选中第一步的接口，选择Map Local，Local Path选择第二步的文件。