这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
一、本堂课重点内容：
- 移动端 H5 调试
-
- 真机调试
- 代理调试
- 常用工具
- NodeJS调试
- 常用开发调试技巧
二、详细知识点介绍：
移动端 H5 调试
真机调试
IOS
- 使用 Lightning 数据线将 iPhone 与 Mac 相连
- iPhone 开启 Web 检查器 (设置 ->Safari ->高级->开启 Web 检查器)
- iPhone 使用 Safari 浏览器打开要调试的页面
- Mac 打开 Safari 浏览器调试 (菜单栏一>开发->iPhone 设备名 ->选择调试页面)
- 在弹出的 Safari Developer Tools 中调试
安卓
- 使用 USB 数据线将手机与电脑相连
- 手机进入开发者模式，勾选 USB 调试，并允许调试
- 电脑打开 Chrome 浏览器，在地址栏输入:chrome://inspect/#devices 并勾选Discover USB devices 选项
- 手机允许远程调试，并访问调试页面
- 电脑点击 inspect 按钮
- 进入调试界面
VConsole
- 日志(Logs):console.loglinfolerrorl..
- 网络(Network): XMLHttpRequest,Fetch, sendBeacon
- 节点(Element): HTML 节点树
- 存储(Storage): Cookies, LocalStorage,SessionStorage
- 手动执行 JS 命令行
- 自定义插件
使用代理工具调试
原理
- 电脑作为代理服务器
- 手机通过 HTTP 代理连接到电脑
- 手机上的请求都经过代理服务器
以 Charles 为例:
1.安装 Charles
2.查看电脑IP和端口
3.将IP、端口号填入手机 HTTP 代理
4.Charles 允许授权
5.使用 SwitchHosts! 软件给 Mac 电脑配 Hosts
6.手机访问开发环境页面
注意：默认情况下，Charles 无法抓取到 HTTPS 的请求，需要安装证书。
NodejS调试
Inspector Protocol + Chrome Devtool
- 执行命令 node --inspect=8888 index.js
- chrome浏览器访问服务
- 点击绿色 node 图标打开 node 调试面板 (在chrome://inspect/#devices 中配置network target)
- 在 node 调试面板中使用断点调试
Inspector Protocol + VS Code
VS Code 点击运行
添加配置
启动调试
添加断点
查看变量、堆栈
常用开发调试技巧
线上即时修改 Overrides
因为有的时候在Chrome修改样式的时候不仅要修改一个地方的样式，可能多个地方的样式都要修改，但是一刷新或者一跳转有的修改好的样式就没了，所以这个可以固定修改好的样式
1.打开 Sources 面板下的的Overrides
2.点击 Select folders for选择一个本地的空文Overrides。件夹目录。
3.允许授权
4.在 page 中修改代码，修改完成后 command +s 保存
5.打开 devTools ，点击右上角的三个小点 -> More tools ->Changes，就能看到所有修改了
这里查看变化
利用代理解决开发阶段的跨域问题
、
启用本地source map
线上不存在 Source Map 时可以使用 Map Local 网络映射功能来访问本地的 Source Map 文件。
使用代理工具Mock数据
1.右键选中要 mock 数据的接口，选择save response，保存文件到本地。
2.本地打开保存的文件，编辑想mock 的数据并保存。
3.右键选中第一步的接口，选择Map Local，Local Path 选择第二步的文件。
