元素：看得到，也改得动
页面实时的元素结构，配上生效样式、继承关系和盒模型。改一个值，设备上立刻重绘——定位手机端排版问题最快的一条路。
在电脑上调试手机里的网页
像在电脑上按 F12 查看自己浏览器那样，远程调试 iOS、安卓真机上的网页——浏览器标签页，或是 App 内嵌的 WebView / H5。检查元素、控制台报错、源码断点、网络请求、Cookie 与本地存储。
- 抓 App 内 WebView 的包
- 抓手机浏览器的包
- 设备画面与面板同屏
- App 不用改、不用重新打包
手机网页调试，不用再绕远路
下面每一条都是调手机页面时的日常。左边一列，是平时的做法。
| 你想做的事 | 平时的做法 | 用网页调试器 |
|---|---|---|
| 只有手机上排版错位 | 猜一个改法，重新打包、部署，再看一眼 | 直接改元素和 CSS，手机上立刻变，边改边看 |
| 页面白屏、按钮点了没反应 | 手机上没有控制台，只能到处加 alert 和日志 | Console 里就是页面原样抛出的报错和日志 |
| 想知道这个请求是哪行 JS 发的 | 抓包只看得到请求，看不到是谁发的 | 在源码面板下断点、单步跟，当场看变量 |
| 想看清 Cookie、本地存储里到底存了什么 | 只能从请求头里反推 | 成表列出：名称、值、域、过期时间、Secure、HttpOnly、SameSite，还能改 |
| 调 App 内嵌的 H5 页面 | 混在流量里，根本没有入口接上去 | 按所属 App 分组列出，点名选中，和调普通网页一样 |
| 光是把远程调试跑通 | 各平台开关不同、入口藏得深、步骤琐碎 | 一个对话框：选设备、选页面、点“调试” |
| 想把流量和页面状态对着看 | 抓包工具和调试工具各开一个，互不相干 | 同一个软件里：解密后的请求，和发出它的那段代码 |
不是简化版，是完整的开发者工具
和你在电脑上天天用的那套面板一模一样，只不过接的是手机上那个页面。
控制台：报错与随手执行
页面产生的每一条报错和日志都在，还能敲一段 JS，直接在设备上那个页面里跑。不用再靠 alert 调试。
源码：断点与单步调试
页面加载的脚本和样式一览无余，下断点、看调用栈、单步跟，在出问题的那一刻把变量看清楚。
网络：每条请求，按瀑布排开
状态码、类型、发起位置、大小、耗时、是否命中缓存逐条列出，底部还有总请求数、传输量、DOMContentLoaded 与完整加载时间。
存储：Cookie、本地与会话
Cookie 按域名分组，过期时间、Secure、HttpOnly、SameSite 一列不少，旁边就是 localStorage 和 sessionStorage——查登录态问题最快。
设备画面，就在你屏幕上
调安卓页面时，设备画面实时显示在面板旁边，可以直接用鼠标点击、滚动——调试和操作在同一块屏幕上完成，不用一手拿手机一手敲键盘。
实际长什么样
连着真机跑出来的界面，没有摆拍。
能调哪些
手机、平板、模拟器，加上你自己电脑上的浏览器。
| 本机 | iOS | Android | |
|---|---|---|---|
| 浏览器标签页 | ✓ | ✓ | ✓ |
| App 内嵌网页（WebView / WKWebView / H5） | ✓ | ✓ | ✓ |
| 模拟器 | — | ✓ | ✓ |
| 实时查看并修改元素与样式 | ✓ | ✓ | ✓ |
| 控制台、断点与单步调试 | ✓ | ✓ | ✓ |
| 页面级网络请求瀑布 | ✓ | ✓ | ✓ |
| Cookie / localStorage / sessionStorage | ✓ | ✓ | ✓ |
| 设备画面与面板同屏 | — | — | ✓ |
| 免装证书、免配代理 | ✓ | ✓ | ✓ |
开调前的一次性准备
下面三块是并列的，按你要调的目标做那一块就行，而且只用做一次。
iOS 设备
插上数据线并保持解锁。Safari 打开「设置 → Safari 浏览器 → 高级 → 网页检查器」；用 Chrome 则打开「Chrome 设置 → 内容设置 → 网页检查器」。
安卓设备
插上数据线，在开发者选项里打开 USB 调试。模拟器一般不用插线就会被自动识别。
本机浏览器
用 --remote-debugging-port=9222 启动 Chrome 或 Edge，回到页面列表点一下刷新就能看到。
还要调 App 内嵌的网页？再加这一步
只调浏览器标签页的话不用管这条。调自己的 App：安卓调用一次 setWebContentsDebuggingEnabled(true)，iOS 16.4 起给 WKWebView 设 isInspectable = true。调别人的 App、或者不想改代码：勾上「同时包含 App 内的网页」，运行中 App 里的页面就一并列出——安卓需已 Root，iOS 仅限开发签名的 App。
准备好之后，每次开调就这一串
新建抓包 → 选目标（本机 / iOS / Android）→ 方法选「网页调试器」→ 点刷新 → 选中页面 → 点「调试」。浏览器里就打开完整的开发者工具，想开几个开几个，互不干扰。
藏在 App 里的那些页面，一样能调
现在的 App 大多一半原生、一半网页。最难缠的问题往往就出在内嵌的 H5 页面上，而普通工具在这里什么也给不了你。
按所属 App 分组
页面列表按 App 组织，一眼分得清哪个是 App 内的下单页、哪个是浏览器标签页，想接哪个就接哪个。
一个勾选框的事
勾上“同时包含 App 内的网页”，运行中 App 内部的页面就一并进入列表；取消勾选，又只剩浏览器标签页。
不留痕迹
不用重新打包 App、不用签名、不用往设备里装辅助程序。调试结束，设备就回到原来的样子。
和抓包配合着用
这边调页面，同一个软件里就能抓这个 App 的流量——HTTPS 自动解密，连绑了证书、不走系统代理的 App 也照抓。
手机网页调试常见问题
手机上怎么“检查元素”？
用数据线把手机连上电脑，打开抓包鹰，新建抓包 → 选 iOS 或 Android → 方法选“网页调试器”，选中页面点“调试”，电脑上就会打开完整的元素面板，显示设备上那个页面实时的元素结构和 CSS；在这里改一个值，手机上的页面立刻就变。
不改 App，能调安卓 WebView 吗？
可以。本身就允许调试的 WebView 会直接出现在列表里；没有开放调试的 App，勾上“同时包含 App 内的网页”，运行中 App 内部的页面也会加进列表——这一项需要已 Root 的设备，全程不用重新打包、不用改 App，也不会在设备上长期留下东西。
iPhone / iPad 上的网页怎么调试？
把设备插上电脑并解锁，打开「设置 → Safari 浏览器 → 高级 → 网页检查器」（Chrome 则是「Chrome 设置 → 内容设置 → 网页检查器」）。然后在抓包鹰里选中设备和页面，点“调试”，电脑浏览器里就会打开完整的网页检查器：元素、控制台、源码、网络、存储、图层等面板都在。
这和 chrome://inspect 有什么区别？
同一件事它都能做，还多做了几步。浏览器自带的远程调试页只认安卓上的 Chromium 目标；这里 iOS、安卓和本机浏览器都在同一个选择器里，页面按 App 分组，App 内嵌 H5 勾一下就能加进来，而且旁边就是能把同一个 App 的 HTTPS 流量解密出来的抓包能力。
需要越狱或者 Root 吗？
常规调试不需要：浏览器标签页、以及本身允许调试的 App，在原厂设备上就能调。只有“把第三方 App 内的网页也列出来”这一个可选项需要已 Root 的安卓设备；iOS 上则由系统决定哪些 App 可以包含。
要装证书、配代理，或者在 App 里加 SDK 吗？
三样都不用。真机远程调试走的是 USB 连接，不用配代理、不用在设备上装根证书，App 里也不用加任何 SDK 或库。
它和抓包有什么不一样？
抓包回答“网络上跑了什么”——请求、响应、头和 body，而且是解密后的明文。网页调试器回答“页面里做了什么”——元素结构、样式、Console 报错、这个请求是哪段脚本发的、发之前本地存了些什么。抓包鹰两样都有，来回切不用换工具。
调试窗口用哪个浏览器打开？
安卓和本机浏览器的调试界面用 Chrome、Edge 或 Brave 打开（软件会自动帮你启动）；iOS 的调试界面任意浏览器都能正常工作。
模拟器能用吗？
能。安卓模拟器通常不用插线就会被自动识别，电脑上跑的 iOS 模拟器也能被发现，操作流程和真机完全一样。
网页调试器收费吗？
不收费。和抓包鹰的其它功能一样完全免费，macOS、Windows、Linux 都能用，没有任何功能墙。