这是我参与「第五届青训营 」笔记创作活动的第9天
真机调试
IOS
- 使用Lightning数据线将iPhone与Mac 相连
- iPhone开启 Web检查器（设置-> Safari ->高级→>开启Web检查器)
- iPhone使用Safari浏览器打开要调试的页面
- Mac打开Safari浏览器调试(菜单栏—>开发-> iPhone设备名->选择调试页面)
- 在弹出的Safari Developer Tools中调试
没有iPhone设备可以在Mac AppStore安装Xcode使用其内置的iOS模拟器
Android
- 使用USB数据线将手机与电脑相连
- 手机进入开发者模式，勾选USB调试，并允许调试
- 电脑打开Chrome浏览器，在地址栏输入: chrome:/nspect/#devices并勾选 Discover USB devices选
- 手机允许远程调试，并访问调试页面
- 电脑点击inspect按钮
- 进入调试界面
直接使用手机扫码查看，体验更佳
VSonsole
- 日志(Logs): console.loglinfolerror]..
- 网络(Network): XMLHttpRequest,Fetch, sendBeacon
- 节点(Element):HTML节点树
- 存储(Storage): Cookies,LocalStorage, Si
- 手动执行JS命令行
- 自定义插件
使用代理工具调试
原理:
- 电脑作为代理服务器
- 手机通过HTTP代理连接到电脑
- 手机上的请求都经过代理服务器
以Charles为例:
- 安装Charles
- 查看电脑IP和端口
- 将IP、端口号填入手机HTTP代理
- Charles允许授权
- 使用SwitchHosts!软件给Mac电脑配Hosts
- 手机访问开发环境页面
默认情况下， Charles无法抓取到HTTPS的请求，需要安装证书。
常用的代理工具
Nodejs调试
Inspector Protocol+VS Code
- vS Code点击运行
- 添加配置
- 启动调试
- 添加断点
- 查看变量、堆栈
常用开发调试技巧
线上即时修改Overrides
- ces面板下的的Overrides
- 点击Select folders for Overrides。选择一个本地的空文件夹目录。
- 允许授权
- 在page中修改代码，修改完成后command +s 保存
- 打开devTools，点击右上角的三个小点->More tools ->es，就能看到所有修改了
利用代理解决开发阶段的跨域问题、
启用本地Source map
线上不存在Source map时可以使用Map Local网络映射功能来访问本地的Source Map 文件。
使用代理工具Mock数据
- 右键选中要mock数据的接口，选择save response，保存文件到本地。
- 本地打开保存的文件，编辑想mock 的数据并保存。
- 右键选中第一步的接口，选择Map Local, Local Path 选择第二步的文件。
小黄鸭调试大法
传说中程序大师随身携带一只小黄鸭，在调试代码的时候会在桌上放上这只小黄鸭，然后详细地然后很快将问题定位修复了。 --《程序员修炼之道》
