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

一、本堂课重点内容：

1. 真机调试
2. 代理调试
3. 常用工具

二、详细知识点介绍：

真机调试

真机调试分为ios调试和Android调试。在不同系统中调试的方法不同，ios设备需要将iPhone和Mac相连，而安卓手机则是使用USB数据线将手机和电脑相连。

VConsole

• 日志：console.log|info|error
• 网络:XMLHttpRequest、Fetch、sendBeacon
• 节点：HTML节点树
• 存储：Cookies、LocalStorage、SessionStorage
• 手动执行JS命令行
• 自定义插件

使用代理工具调试

原理

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

Charles

• 安装Charles
• 查看电脑IP和端口
• 将IP、端口号填入手机HTTP代理
• Charles允许授权
• 使用SwitchHosts!软件给Mac电脑配Hosts

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

常用的代理工具

Charles：适合查看、控制网络请求，分析数据 Fiddler：Charles与其类似，适合Windows平台使用 spy-debugger:远程调试手机页面，抓包 Whistle:基于Node实现的跨平台Web调试代理工具

Node.js调试

Inspect protocal + devtools

执行命令node --inspect=8888 index.js，使用谷歌浏览器访问服务，打开node的调试面板，在调试面板中使用断点调试。

VS code调试

在VScode点击运行，添加配置，启动调试，添加断点，查看变量、堆栈。

常用的开发调试技巧

线上即时修改Override

• 打开资源面板下的Override
• 选择一个本地的空文件夹目录
• 允许授权
• 在page中修改代码，修改完成后command+s来保存
• 打开DevTools，点击右上角的三个小点，在更多工具中选择Changes，就能够看到所有的修改了。

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

浏览器向代理服务器发请求，代理服务器转发请求给真实服务器，真实服务器响应给代理服务器，代理服务器在转发响应给浏览器。

启用本地source map

使用网络映射功能来访问本地source map文件

使用代理工具Mock数据

选择要模拟数据的接口，保存文件到本地。