网页调试器

手机上排版错了、按钮点了没反应、H5 页面白屏——这些在电脑上按个 F12 就能查清的问题，到了手机上却只能靠加 alert、重新打包、再看一眼。网页调试器把那套开发者工具接到设备上那个真实页面：数据线一连，元素、控制台、源码、网络、存储全都在电脑上，改一个值手机上立刻就变。

网页调试器调试安卓页面：左侧是实时的手机画面，右侧是元素面板与生效样式

一、它和抓包的分工

两件事都要做，但回答的是不同的问题：

	抓包	网页调试器
回答	网络上跑了什么	页面里做了什么
看到	请求 / 响应、头、body（解密后的明文）	元素结构、生效样式、Console 报错、调用栈、Cookie 与本地存储
典型问题	这个接口返回了什么、参数对不对	这个请求是哪行 JS 发的、为什么样式没生效

抓包只看得到请求本身，看不到是谁发的；调试器能在源码面板下断点、单步跟到发出它的那行代码。两者在同一个软件里，来回切不用换工具。

二、开调前的一次性准备

下面三块是并列的，按你要调的目标做那一块就行，而且只用做一次。

iOS 设备

插上数据线并保持设备解锁，然后打开网页检查器开关：

Safari：设置 → Safari 浏览器 → 高级 → 网页检查器
Chrome：Chrome 设置 → 内容设置 → 网页检查器

这个开关是 iOS 上最容易漏掉的一步。没打开的话，设备能被识别到，但页面列表会是空的。

安卓设备

插上数据线，在开发者选项里打开 USB 调试。安卓模拟器一般不用插线就会被自动识别。

本机浏览器

用 --remote-debugging-port=9222 启动 Chrome 或 Edge，然后回到页面列表点一下刷新：

# macOS
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --remote-debugging-port=9222

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

三、要调 App 内嵌的网页，再加这一步

只调浏览器标签页的话可以跳过这一节。

调你自己的 App，在代码里开一次就行：

// Android：Application 或 Activity 启动时调用一次
WebView.setWebContentsDebuggingEnabled(true);

// iOS 16.4 起：给 WKWebView 打开可检查
webView.isInspectable = true

调别人的 App，或者不方便改代码：在向导里勾上「同时包含 App 内的网页」，运行中 App 内部的页面就会一并进入列表；取消勾选，又只剩浏览器标签页。

	要求	说明
安卓	设备已 Root	对运行中的 App 打开 WebView 调试，不用重新打包
iOS	仅限开发签名的 App	系统限制，App Store 装的 App 无法包含

不管哪种方式，都不用重新打包 App、不用签名、不用往设备里装辅助程序，调试结束设备就回到原来的样子。

四、开始调试

准备好之后，每次开调就这一串：

新建抓包 → 选目标（本机 / iOS / Android）→ 方法选「网页调试器」→ 点刷新 → 选中页面 → 点「调试」

新建抓包对话框：目标选 Android、方法选网页调试器，勾选「同时包含 App 内的网页」后列出设备上可调试的页面

页面按所属 App 分组列出，一眼分得清哪个是 App 内的页面、哪个是浏览器标签页。
点「调试」后，电脑浏览器里立刻打开完整的开发者工具，接的就是设备上那个页面。
想开几个开几个——一个页面一个窗口，同时在线互不干扰。

五、能看到什么

和你在电脑上天天用的那套面板一模一样，只不过接的是手机上那个页面。

面板	能做什么
元素	页面实时的元素结构，配上生效样式、继承关系和盒模型。改一个值，设备上立刻重绘——定位手机端排版问题最快的一条路
控制台	页面产生的每一条报错和日志；还能敲一段 JS，直接在设备上那个页面里跑
源码	页面加载的脚本和样式一览无余，下断点、看调用栈、单步跟，在出问题的那一刻把变量看清楚
网络	这个页面发出的每条请求按瀑布排开：状态码、类型、发起位置、大小、耗时、是否命中缓存，底部还有总请求数、传输量、DOMContentLoaded 与完整加载时间
存储	Cookie 按域名分组，过期时间、Secure、HttpOnly、SameSite 一列不少，旁边就是 localStorage 和 sessionStorage——查登录态问题最快

网页调试器的存储面板：iPhone 上页面的 Cookie 列表，含值、域、过期时间、Secure、HttpOnly 与 SameSite

调安卓页面时，设备画面还会实时显示在面板旁边，可以直接用鼠标点击、滚动——调试和操作在同一块屏幕上完成，不用一手拿手机一手敲键盘。

六、支持范围

	本机	iOS	Android
浏览器标签页	✓	✓	✓
App 内嵌网页（WebView / WKWebView / H5）	✓	✓	✓
模拟器	—	✓	✓
实时查看并修改元素与样式	✓	✓	✓
控制台、断点与单步调试	✓	✓	✓
页面级网络请求瀑布	✓	✓	✓
Cookie / localStorage / sessionStorage	✓	✓	✓
设备画面与面板同屏	—	—	✓
免装证书、免配代理	✓	✓	✓

七、调不到？先查这几条

现象	多半是	怎么办
设备认出来了，页面列表是空的	iOS 没开网页检查器开关，或设备锁屏了	见第二节，开关打开后保持解锁再点刷新
安卓看不到 App 内的页面	那个 WebView 没开调试	自己的 App 加一句 `setWebContentsDebuggingEnabled(true)`；别人的 App 勾「同时包含 App 内的网页」（需已 Root）
iOS 上某个 App 怎么都出不来	系统限制	App Store 安装的 App 无法包含，只有开发签名的可以
本机浏览器列不出页面	没带调试端口启动	用 `--remote-debugging-port=9222` 重新启动 Chrome / Edge，再点刷新
点了「调试」但界面打不开	用了不支持的浏览器	安卓 / 本机的调试界面需要 Chrome、Edge 或 Brave

八、什么时候用它

页面只在手机上出问题：排版错位、点击区域不对、字体渲染异常。
H5 白屏或功能失灵，需要看 Console 报错和调用栈。
想知道某个请求是哪段脚本发的，光看抓包看不出来。
要查登录态、缓存问题：Cookie、localStorage 里到底存了什么。
调 App 内嵌的 H5——普通工具在这里什么也给不了你。

返回快速开始 · 相关：数据查看与解码 · iOS 抓包 · Android 抓包