网页调试器，手机网页和 App 内嵌页面，插线就能调

bcbnb
152 阅读8分钟

网页调试器

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

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

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

你想做的事普通抓包工具本产品的网页调试器
看请求 URL / 头 / 响应体可以可以
看页面当前的元素结构与生效样式看不到可以实时查看，还能直接改
看 Console 里的报错、执行一段脚本看不到可以
给页面脚本下断点、单步跟做不到可以
看 Cookie / 本地存储里到底存了什么只能从请求头里猜可以成表列出，可改可删
调试手机上的网页要先配代理、装证书插上数据线即可，无需证书与代理
调试 App 内嵌的网页混在流量里，分不清是哪个页面按 App 分组列出，点名选中即可

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

二、支持哪些目标

目标调试对象需要什么
本机浏览器电脑上浏览器打开的页面以调试模式启动浏览器（见下方教程）
iOSiPhone / iPad 上 Safari、Chrome 里打开的网页，以及 App 内的网页数据线连接、设备已解锁、开启网页检查器开关
Android手机 / 模拟器上浏览器里的网页，以及 App 内的网页数据线连接并开启 USB 调试（模拟器通常自动识别）

三、能看到什么

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

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

android 网页调试

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

android 网络面板

iOS 网络面板

iOS 存储面板

四、App 内的网页也能调试

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

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

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

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

五、使用教程

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

5.1 调试 Android 设备上的网页

新建android抓包

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

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

5.2 调试 iPhone / iPad 上的网页

新建 iOS 抓包

  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 内的网页」，把内嵌页面也纳入调试。
avatar
文章
阅读
粉丝