这是我参与【第五届青训营】伴学笔记创作活动的第17天。
移动端H5调试
真机调试
iOS
- 使用 Lightning 数据线将 iPhone 与 Mac 相连
- iPhone 开启 Web 检查器(设置 -> Safari ->高级 -> 开启 Web 检查器)
- iPhone 使用 Safari 浏览器打开要调试的页面
- Mac 打开 Safari 浏览器调试(菜单栏 ->开发 -> iPhone 设备名 ->选择调试页面)
- 在弹出的 Safari Developer Tools 中调试
Android
- 使用 USB 数据线将手机与电脑相连
- 手机进入开发者模式，勾选 USB 调试，并允许调试
- 电脑打开 Chrome 浏览器，在地址栏输入:chrome://inspect/#devices 并勾选 Discover USB devices 选项
- 手机允许远程调试，并访问调试页面
- 电脑点击 inspect 按钮
- 进入调试界面 没有 iPhone 设备可以在 Mac App 休验更佳
VConsole
- 日志(Logs): console.log|info|error|
- 网络(Network):XMLHttpRequest, Fetch, sendBeacon
- 节点(Element): HTML 节点树
- 存储(Storage):Cookies,LocalStorage, SessionStorage
- 手动执行 JS 命令行
- 自定义插件
使用代理工具调试
原理:
- 电脑作为代理服务器
- 手机通过 HTTP 代理连接到电脑
- 手机上的请求都经过代理服务器 以Charles 为例:
- 安装 Charles
- 查看电脑 IP 和 端口
- 将 IP、端口号填入手机 HTTP 代理
- Charles 允许授权
- 使用 SwitchHosts! 软件给 Mac 电脑配 Hosts
- 手机访问开发环境页面
Nodejs调试
Inspector Protocol + Chrome Devtool
- 执行命令 node --inspect=8888 index.js
- chrome 浏览器访问服务
- 点击绿色 node 图标打开 node 调试面板(在chrome://inspect/#devices 中配置network target)
- 在 node 调试面板中使用断点调试
常用开发调试技巧
线上即时修改 Overrides
- 打开 Sources 面板下的Overrides
- 点击 Select folders for Overrides。选择一个本地的空文件夹目录。
- 允许授权
- 在 page 中修改代码，修改完成后 command+s保存
- 打开 devTools，点击右上角的三个小点 -> More tools ->Changes，就能看到所有修改了
使用代理工具 Mock 数据
- 右键选中要 mock 数据的接口，选择save response，保存文件到本地。
- 本地打开保存的文件，编辑想mock 的数据并保存。
- 右键选中第一步的接口，选择Map Local，Local Path 选择第二步的文件。
