这是我参与「第四届青训营 」笔记创作活动的的第8天。
一、重点内容：
- Web 应用使用 Chrome devTools 调试
- 移动端 H5 调试
- NodeJs 应用调试
- 常用代理工具的使用
二、详细知识点介绍：
1. Web 应用使用 Chrome devTools 调试
前端Debug的特点
01.多平台
-
浏览器、Hybrid、 NodeJs、小程序、桌面应用... 02.多环境
-
本地开发环境、线上环境
03.多工具
- Console、BreakPoint、sourceMap、代理......
04.多技巧
- Chrome devlools、Charles、Spy-Debugger、Whistle、vConsole ...
Chrome DevTools
Charles 是在 PC 端常用的网络封包截取工具，在做移动开发时，我们为了调试与服务器端的网络通讯协议，常常需要截取网络封包来分析。除了在做移动开发中调试端口外，Charles 也可以用于分析第三方应用的通讯协议。配合 Charles 的 SSL 功能，Charles 还可以分析 Https 协议。
Charles 功能介绍和使用教程 - 掘金 (juejin.cn)
2. 移动端 H5 调试
使用代理工具调试
原理: ·电脑作为代理服务器 手机通过HTTP代理连接到电脑·手机上的请求都经过代理服务器 以Charles为例:
- 安装Charles
- 查看电脑IP和端口
- 将IP、端口号填入手机HTTP代理4.Charles允许授权
- 使用SwitchHosts!软件给Mac电脑配 Hosts6.手机访问开发环境页面
3. NodeJs 应用调试
Inspector Protocol + VS Code
- VS Code点击运行
- 添加配置
- 启动调试
- 添加断点
- 查看变量、堆栈
4. 常用代理工具的使用
线上即时修改Overrides
- 打开Sources面板下的的Overrides
- 点击Select folders for Overrides。选择一个本地的空文件夹目录。
- 允许授权
- 在page中修改代码，修改完成后command +s保存
- 打开devTools，点击右上角的三个小点->More tools ->Changes，就能看到所有修改了
- 线上不存在Source Map时可以使用Map Local网络映射功能来访问本地的SourceMap文件。
使用代理工具Mock 数据
- 右键选中要mock数据的接口，选择save response，保存文件到本地。
- 本地打开保存的文件，编辑想mock的数据并保存。
- 右键选中第一步的接口，选择Map Local, Local Path选择第二步的文件。
