网页调试器

抓包看到的是「网络上跑了什么」，网页调试器看到的是「页面里发生了什么」。用数据线把手机连上电脑，就能在电脑的大屏幕上，对 手机浏览器里的网页、甚至 App 内嵌的网页做完整的调试：看元素、改样式、跑脚本、下断点、翻 Cookie 和本地存储。 不用装证书、不用配代理、不用给 App 加任何东西。

一、和普通抓包工具的区别

抓包工具停在「请求和响应」这一层；网页调试器直接进到页面内部。

抓包和调试互为补充：抓包回答「这个请求发了什么、对方回了什么」，调试器回答「这个请求是页面里哪段逻辑发出来的、发之前读了哪些本地数据」。

二、支持哪些目标

三、能看到什么

打开后就是一整套完整的网页调试界面，常用的几块都在：

• 元素（Elements）：页面当前的结构一目了然，选中任意节点即可看到生效的样式、继承关系、盒模型； 改一处马上在设备上生效，用来定位排版问题最快。
• 控制台（Console）：页面的报错和日志全在这里；也可以直接敲一段脚本，在 设备上的这个页面里执行。
• 源码（Sources）：页面加载的脚本、样式一览无余，可以下断点、单步跟踪、查看当前变量。
• 网络（Network）：这个页面发出的每一条请求，按时间瀑布排开——状态码、类型、发起位置、大小、耗时、是否走了缓存，一行行摆清楚；底部还有总请求数、传输量、页面加载完成时间。
• 存储 / 应用（Storage / Application）：Cookie、本地存储、会话存储按域名分组列出，名称、值、域、路径、过期时间、Secure / HttpOnly / SameSite 一列不少，可以直接改。
• 此外还有性能、内存、图层、安全等面板，随手可用。

设备画面同屏：调试 Android 页面时，左侧会实时显示设备上这个页面的画面，可以直接用鼠标在上面点击、滚动—— 不用一手拿手机一手看电脑，操作和调试在同一块屏幕上完成。

四、App 内的网页也能调试

很多 App 的页面其实是内嵌的网页，但默认并不对外开放调试——这类页面在别的工具里通常是个黑盒。

勾选 「同时包含 App 内的网页」，页面列表里就会 连同运行中 App 内部的网页一起列出，选中即可像调试普通网页一样调试它。

• iOS：部分 App 因系统限制无法包含（勾选后会明确告诉你结果）。
• Android：此项需要 已 Root 的设备；未 Root 时勾选会直接提示，不会留下莫名其妙的报错。
• 用完即还原：结束调试后设备会恢复到原来的状态，不会留下任何残留。

不勾选时，列表里只有本身就允许调试的页面（浏览器标签页等），这是默认行为。

五、使用教程

入口统一在 新建抓包 → 选目标 → 方法选「网页调试器」。它不会创建抓包会话，而是直接打开所选页面的调试界面。

5.1 调试 Android 设备上的网页

1. 用数据线连上电脑并 开启 USB 调试；用模拟器的话通常会被自动识别。
2. 新建抓包 → 目标选 Android → 方法选 网页调试器。
3. 在 设备里选中你的手机 / 模拟器（新插上的点「刷新」）。
4. 想连 App 内的网页一起调，勾上 「同时包含 App 内的网页」（需已 Root），再点页面旁的「刷新」。
5. 在 页面下拉里选中要调的那个页面——列表按 App 分组，支持输入关键字筛选。
6. 点 「调试」，调试界面就在浏览器里打开了。

Android 与本机浏览器的调试界面需要用 Chrome、Edge 或 Brave 打开，工具会自动帮你启动；如果这几个都没装，会提示你装一个。

5.2 调试 iPhone / iPad 上的网页

1. 用数据线连上电脑， 保持设备解锁。
2. 在设备上打开网页检查器开关：
   • Safari：设置 → Safari 浏览器 → 高级 → 网页检查器
   • Chrome：Chrome 设置 → 内3333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333容设置 → 网页检查器
3. 新建抓包 → 目标选 iOS → 方法选 网页调试器 → 选中设备。
4. 需要的话勾选 「同时包含 App 内的网页」，再点「刷新」。
5. 在 页面下拉里选中目标页面，点 「调试」。

iOS 的调试界面用任意浏览器打开都能正常工作。

5.3 调试本机浏览器里的页面

1. 以调试模式启动浏览器（Chrome、Edge 均可），即在启动命令后同时加上 --remote-debugging-port=9222 和 --user-data-dir=<一个独立目录>：

   • Windows：

     "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir=C:\chrome-debug

   • macOS：

     "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug

   • Linux：

     google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug

   --user-data-dir 不能省。只写 --remote-debugging-port，如果系统里已经有一个 Chrome 在跑，新命令只会把网址交给那个已有实例，调试端口根本不会打开（页面列表因此一直是空的）。换一个独立的用户数据目录，等于开出一个全新的浏览器实例，端口才会真正监听。目录随便挑一个空目录即可，会自动创建；这个实例里没有你平时的登录状态和插件，属正常现象——想沿用原来的配置，就先把所有 Chrome 窗口彻底退出，再用原来的用户数据目录启动。

2. 新建抓包 → 目标选 本机 → 方法选 网页调试器 → 点「刷新」。

3. 选中页面，点 「调试」。

六、用起来顺手的几个点

• 页面列表随时刷新：设备上新开了标签页、刚启动了一个 App，点一下「刷新」就出现在列表里。
• 可以同时开多个：不同页面各开一个调试窗口，互不干扰；同一个页面开两个窗口也没问题。
• 提示都说人话：设备锁屏了、页面已经关掉了、这台设备上暂时没有可调的网页——都会直接告诉你原因和下一步该干什么，而不是丢一串看不懂的报错。
• 不改动目标：调试期间不需要给 App 打包任何东西，结束后设备恢复原样。

七、什么时候用它

• 手机上的页面样式错位、按钮点不动—— 在电脑上直接改元素和样式，边改边看效果。
• 页面白屏、功能异常——先看 Console 有没有报错，再到 Sources 里下断点跟一遍。
• 想知道某个请求 是页面里哪段逻辑发出来的，以及发之前读了哪些本地数据——抓包看不到的部分，这里能看到。
• 排查登录态问题——直接翻 Cookie / 本地存储，看看到底存了什么、什么时候过期。
• App 里那个页面到底加载了些什么——勾上「同时包含 App 内的网页」，把内嵌页面也纳入调试。