做前端和移动端联调的老朋友应该都有这种体验在电脑上鼠标一按 F12DOM、Console、Network 一目了然什么问题都能现场抓出来。可一旦切换到手机浏览器想调试一个页面第一反应往往是在键盘上找 F12——找半天才意识到手机根本没有这个按键。我去过不少团队见过有人为此抱着一台笔记本满屋子转也有人干脆把全部问题都盲调靠 alert 弹窗一点一点猜。这个场景太常见了而手机浏览器调试网页这个需求也远比想象中复杂它不只是换个设备看页面而是要解决响应式布局、真机特性、网络请求、登录态、性能监控等一系列问题。这篇文章我就用实际的踩坑经历把手机端 F12 开发者模式的几种完整玩法串一遍。1. 为什么手机上没有按一下 F12这种操作桌面浏览器之所以有 F12是因为桌面端的用户群体里开发者比例高产品形态也愿意为专业用户保留复杂的调试入口。而移动端浏览器的产品逻辑是越简单越好绝大多数用户打开浏览器就是看资讯、看视频、买东西他们不关心什么 DOM、Console、Network。从内核层面看移动版 Chromium 其实保留了 DevTools 的底层代码但默认关闭且入口被移除所以你在绝大多数手机浏览器里翻遍菜单也找不到开发者工具。但这并不意味着移动端网页不需要调试恰恰相反移动端是大多数线上产品的主战场真机上的崩溃率、白屏率、交互卡顿和桌面完全不是一回事。我整理了一下在手机浏览器里做调试核心需求无非这几类查看页面 DOM 结构和元素样式排查布局错乱、元素遮挡查看 Console 报错定位 JS 运行异常和兼容性问题查看 Network 请求和响应排查接口跨域、响应格式、资源加载失败查看 localStorage、sessionStorage、Cookie确认登录态与缓存状态模拟弱网、断网、异常机型验证边界场景检查性能数据比如首屏加载耗时、资源优先级、TLS 握手时间。从需求出发去看方案你会发现移动端调试并不是只有一条路有完全不需要电脑的手机浏览器内置方案有连接电脑获得完整 DevTools的远程调试方案也有页面里注入调试面板的轻量方案。每种方案解决的需求不同适用场景也不同。我这里先把主流的几条路线罗列一下调试方式代表工具是否需要电脑主要优点主要限制手机浏览器内置 DevToolsKiwi Browser、X 浏览器不需要随时随地调样式看控制台功能与桌面版有差异仅限安卓注入式调试面板vConsole、eruda不需要部署简单线上也能用侵入业务代码安全性需注意桌面远程调试Chrome DevToolschrome://inspect需要与桌面 DevTools 一致体验最完整需要数据线或同一局域网代理抓包whistle、Charles、Fiddler需要能看全量请求适合接口联调需要配置代理和证书WebKit 远程调试Safari Web Inspector需要iOS 真机调试唯一主流路径仅限 iPhone Mac 组合如果你刚接触这块我的建议很简单临时看报错先在页面上注入 vConsole 或 eruda30 秒搞定做正式的移动端开发调试优先用 Chrome 远程调试要排查接口、登录态、资源加载这类问题直接上抓包工具。下面我把这几个方案逐个讲透包括实际操作和踩过的坑。2. 手机上直接调出开发者工具Kiwi 和 X 浏览器的两种路子2.1 Kiwi Browser把 DevTools 完整搬进手机Kiwi Browser 是 Android 平台上基于 Chromium 内核的浏览器它最大的卖点就是内置了开发者工具而且支持 Chrome 扩展。对调试来说这就意味着你可以直接在手机上打开一个类似电脑 DevTools 的界面随时随地进行调试完全不用依赖电脑。开启方式很简单安装 Kiwi Browser在应用商店或官网下载 APK点击右上角菜单三个点进入设置往下拉找到开发者选项打开启用开发者工具重新打开网页点击菜单就能看到开发者工具入口。打开之后你会发现这个 DevTools 和桌面 Chrome 的布局非常像有 Elements、Console、Sources、Network、Application 等面板可以实时选中元素、修改样式、查看请求。我实际使用中它的 Elements 面板对移动端页面特别有用——就像在桌面上一样点选页面元素右侧直接改 CSS实时看效果排查那种展开后多了一块内容把按钮挤下去的布局问题非常快。这里有个细节值得说Kiwi 的 DevTools 在手机上是双栏布局屏幕小的时候会有点挤。我的使用习惯是横屏然后把缩放比例调成 80% 左右操作空间会大很多。另外它支持扩展你可以装 adblock 类扩展也可以装一些辅助调试的扩展这让它的生态比普通手机浏览器强不少。不过 Kiwi 也有明显局限。一是它的 Sources 面板在调试断点时不方便手机上不存在 F10、F11 快捷键只能点按钮效率比桌面低不少二是它是独立浏览器如果你要调试的是微信内置浏览器或 App 里的 WebViewKiwi 帮不上忙三是它的内核更新有一定滞后偶尔会遇到某个新 API 在 Chrome 桌面能跑、在 Kiwi 里不支持的情况。适合人群前端开发者外出时的快速查看、产品经理和技术支持人员验证页面问题、以及需要在手机上进行小范围样式调整的场景。2.2 X 浏览器体积小但开发者选项齐全X 浏览器是 Android 上一款体积很小但功能很全的浏览器很多用户看中的是它的扩展能力和轻量。它的开发者模式相对低调但确实存在。在设置里打开开发者模式后你可以查看页面源代码、控制台输出、Cookie 管理等功能。实际操作中我比较常用的功能有两个。一是查看源码适合快速确认页面最终渲染的 HTML排查某些脚本是否生效、某个标签是不是被框架吞掉了二是 Cookie 管理因为做移动端联调时经常需要手动修改登录态或模拟会话这个功能比很多桥接工具都方便。X 浏览器还有一个天然优势它支持不少扩展和脚本比如有人会用到 IDM 扩展来做资源嗅探调试流媒体站点时可以直接看到网络请求里的 m3u8 地址。这里要提醒一句这类能力只能用于调试自己开发或有权限测试的资源别拿来做违规用途。从调试角度看X 浏览器的定位更像轻量辅助工具适合快速验证和日常排查复杂的断点调试还是得靠远程调试方案。2.3 微信、App 内置 WebView 的调试困境很多人实际要调试的页面并不运行在独立浏览器里而是跑在微信、支付宝或 App 的 WebView 中。这类场景靠手机浏览器本身是看不到的需要借助桌面端的远程调试安卓端微信基于 X5/XWeb 内核可以使用 vConsole 注入或者对应的调试工具iOS 端微信则可以用 Safari Web Inspector 调试。这里先给一个结论WebView 调试的最通用办法是让前端在代码里内置 vConsole 或 eruda并只在 debug 模式下启用。即使上线了也可以通过 URL 参数开关。这也是为什么我强烈建议团队至少把其中一个工具集成进项目里——尤其是 iOS 环境没有 Mac 的情况下注入式调试面板几乎是唯一能直接看到 Console 报错的办法。3. USB 连电脑用 Chrome DevTools 远程调试手机网页3.1 为什么团队调试的主流方案仍然是远程调试虽然手机上可以直接用 Kiwi 这类工具但做着做着你会发现等到要打断点调试复杂逻辑、要看完整的 Network 瀑布图、要编辑文件进行调试时手机上那套还是不够用。这时候把手机连上电脑用 Chrome DevTools 远程调试体验会和桌面开发几乎一致手机上打开网页电脑上操作 DevTools改动样式实时反馈Console 和 Network 实时同步。这是目前效率最高的移动端调试方式也是大多数前端团队的标配。3.2 首次连接完整步骤从开发者模式到 chrome://inspect具体步骤如下打开手机设置找到关于手机连续点击版本号7 次直到提示已进入开发者模式回到设置首页找到开发者选项打开USB 调试用数据线把手机连接电脑手机上会弹出一个是否允许 USB 调试的确认框勾选始终允许并确定电脑上打开 Chrome地址栏输入chrome://inspect等待页面出现连接的设备找到你的手机点击设备卡片下方的inspect按钮此时会弹出一个新的 DevTools 窗口等它加载完就能开始调试了。这里有个容易被新手忽视的点手机和电脑最好连接的是同一个 WiFi而且在 chrome://inspect 页面确认 USB 设备已经发现。另外部分安卓手机的 USB 模式默认是仅充电需要手动切换成传输文件MTP否则 Chrome 可能识别不到设备。这个坑我在国产 ROM 上遇到过好几次切到传输文件模式后瞬间就出来了。3.3 无线调试Android 11 的免线方案Android 11 之后系统原生支持了无线调试省去了数据线的麻烦。开启方式手机开发者选项里打开无线调试进入子页面点击使用配对码配对设备记录下配对码电脑上执行adb pair 192.168.x.x:port并输入配对码完成配对回到无线调试页面记录下调试的 IP 地址和端口在电脑 Chrome 的chrome://inspect页面勾选Discover network targets点击Configure...添加刚才记录的IP:端口确认后设备会出现在列表里点击 inspect 就能开始远程调试。需要注意无线调试要求手机和电脑处于同一个局域网且 IP 地址变化后需要重新配置。如果公司网络开启了 AP 隔离无线调试可能连不上这时候老老实实用数据线最稳。3.4 远程调试能做的核心操作地图连接成功之后你获得的不只是一个手机版的 F12而是一整套联调工具。以桌面 DevTools 的五个核心面板为例它们在移动端调试中的主要作用是这样的Elements实时查看和修改 DOM/CSS。移动端最有用的场景是排查响应式布局问题选中元素直接改样式、看效果比反复刷新页面效率高得多。Console查看 JS 报错、console.log 输出、执行任意 JS 表达式。很多兼容性错误只在真机上出现Console 是第一时间定位的地方。Network查看请求列表、请求头、响应体、耗时瀑布图。排查接口跨域、响应格式、图片加载失败、CDN 劫持等问题非常直观也可以右键请求复制为 curl方便在本地复现。Sources打断点、单步调试、查看作用域和调用栈。远程调试的 Sources 和桌面体验基本一致适合处理复杂逻辑和定位线上难题。Application查看 localStorage、sessionStorage、Cookie、IndexedDB、Service Worker。在这个面板里可以手动修改登录态、清空缓存、删除 Service Worker做各种清理操作。实际用的时候我建议把 Network 面板拉大一点看瀑布图——手机上的真实网速、TLS 握手耗时、资源加载顺序都会和桌面有差异这些数据对移动端性能分析特别重要。4. 登录态、Cookie 和网络请求移动端调试的另外两条路热词里有人问手机浏览器如何查看网站登录的 session这确实是很多人在移动端调试时最先遇到的问题——页面打不开、跳转不对、接口 401归根结底往往是登录态的问题。4.1 在手机浏览器里直接查看 Cookie 和 Session最直接的方式是用 Kiwi Browser 的 Application 面板。进入需要登录的页面在 Kiwi 的 DevTools 里切到 Application - Cookies - 选择你的站点域名就能看到所有 Cookie包括 sessionid、token 等关键字段。localStorage 和 sessionStorage 也在这个面板里可以直观地看到键值对和过期时间。如果你想知道当前登录态到底有没有生效看两样东西就够了一是 Cookie 里有没有服务端下发的会话标志二是这个标志有没有带 HttpOnly 标记。如果服务端把 token 放在 Cookie 里且设置了 HttpOnly前端 JS 是拿不到它的这属于正常现象不能说读不到 Cookie 就是没有登录态。4.2 抓包工具把手机所有请求都捞出来Cookie 能看但要联调修改或者想看清请求前后端交互的细节更通用的方式是代理抓包。手机浏览器、App、WebView 的所有 HTTP/HTTPS 流量只要设置了代理都可以被捕获。主流的工具我推荐三个whistle基于 Node.js 的跨平台抓包调试工具规则配置非常灵活适合前端团队。安装命令npm i -g whistle启动用w2 start本地监听 8899 端口。Charles老牌抓包工具GUI 操作直观SSL Proxying 配置方便适合不习惯命令行的新手。FiddlerWindows 平台使用率高功能同样很强但界面相对陈旧。抓包的通用流程电脑和手机连同一个 WiFi电脑上开启抓包工具开启 HTTPS 解密一般会自动生成并安装证书在手机 WiFi 设置里配置 HTTP 代理指向电脑的局域网 IP 和端口默认一般是 8888 或 8899手机访问代理工具提示的证书下载地址下载并安装证书并去系统设置里信任该证书打开手机浏览器或 App所有请求都会出现在抓包工具里可以查看完整的请求头、请求体、响应内容。用 whistle 这类工具还有个额外好处可以直接编辑请求、设置规则、mock 数据。比如本地要联调一个线上接口可以通过规则把线上接口重定向到自己的开发机这在排查线上问题时非常高效。4.3 移动端流媒体和下载类场景热词里有人问手机版 QQ 浏览器下载文件有数量限制吗和手机 X 浏览器 idm 扩展 m3u8。这类问题本质上是手机浏览器对下载场景的处理策略不同。某些内置下载管理器的浏览器可能会有任务数、并发数限制这是产品策略问题而调试 m3u8 这类流媒体用抓包工具可以看到视频的分片地址和播放协议属于网络请求层面的调试。如果遇到浏览器下载限制可以换个思路用远程调试的 Network 面板找到文件下载请求的真实地址然后在手机浏览器里访问该地址手动下载或者换用支持断点续传的浏览器下载工具。当然这仅限于你有权限下载的资源。4.4 调试时修改请求头的小技巧有时候需要往请求里注入自定义 Header比如自定义 UA、token在手机浏览器里没法直接操作。抓包工具就可以派上用场whistle 支持在规则文件里写reqHeaders修改请求头Charles 也有 Rewrite 功能。这个技巧在对接第三方平台时非常省事不用改代码就能模拟不同设备、不同登录状态强烈建议试一下。5. 那些年踩过的调试坑完整排查链路5.1 chrome://inspect 一直找不到设备这个问题几乎每个人都遇到过我整理出一条完整的排查链路确认手机已开启开发者模式和 USB 调试检查 USB 连接模式是否为传输文件很多国产 ROM 默认仅充电这是最常见的坑更换数据线有些线只支持充电不支持数据传输在chrome://inspect页面确认 USB 设备已出现如果没有拔掉重插、重启 Chrome如果仍然不行检查电脑的 USB 驱动Windows 上可能需要安装手机厂商驱动或 Google USB Driver最后换台电脑或换根线测试排除硬件问题。5.2 页面能打开但 inspect 白屏这种情况通常是 DevTools 和目标页面的版本不匹配常见于 Chrome 版本跨度过大。解决方法是把电脑 Chrome 和手机 Chrome 都更新到最新版。如果你用的是 Kiwi 这类第三方浏览器inspect 入口没有弹出那就先试试 Kiwi 自带的 DevTools 入口不必死磕远程调试。5.3 代理抓包时 HTTPS 全是乱码或显示明文先检查证书是否安装并信任。特别注意Android 7.0 开始App 默认不信任用户级 CA 证书很多 App 抓包抓不到明文就是这个原因。需要在抓包工具里导出并安装证书同时如果是调试自己的 App还需要在 network_security_config 里允许信任用户证书。这不是浏览器的问题是系统安全策略网上很多教程没提这点导致新手以为抓包工具坏了。5.4 手机上复现不了桌面模拟器的问题反过来才常见桌面 Chrome 的设备模拟模式已经很强了但它模拟不了真实硬件、真实网速、真实触摸事件和系统 WebView。遇到桌面模拟一切正常、手机却白屏的情况先打开真机远程调试的 Console 看报错绝大多数是兼容性语法或媒体查询宽度没控制好导致的。还有一个隐蔽点部分国产手机浏览器默认启用了夜间模式或智能字体调整会让 CSS 渲染结果和桌面完全不同调试时记得先关掉这些功能。5.5 DevTools 语言被改成中文了怎么改回英文这是热词里很典型的一个问题。很多人在调试时误点了 DevTools 的设置把界面语言切换成了中文想改回来却找不到入口。方法其实很简单打开 DevTools按 F1 进入 Settings或者点右上角齿轮图标在 Preferences 里找到语言选项切换回 English然后重启 DevTools 即可。手机端 Kiwi 的原理类似去浏览器的设置里调整语言项就行。6. 按场景选方案个人调试、团队协作与线上问题排查6.1 场景与方案对照很多人看完前面几章会问到底该用哪个我的建议是按场景来而不是按工具来。这里整理一个更直接的对照表场景首选方案备选方案临时看报错注入 vConsole/erudaX 浏览器控制台本地开发联调Chrome 远程调试Kiwi DevTools定位接口/请求whistle 抓包Charles查看登录态Kiwi Application抓包工具复现线上问题vConsole 埋点远程调试 抓包iOS 真机Safari Web InspectorvConsole 注入6.2 我自己的组合拳做移动端项目时我的固定做法是这样的开发阶段默认在页面集成 eruda仅在本地和测试环境启用需要复杂调试时用 Chrome 远程调试。联调阶段开 whistle电脑和手机都挂代理接口问题直接看请求和响应效率很高。线上问题在 URL 后面加一个debug1之类的参数动态加载 eruda快速看真实用户报错和关键操作日志。iOS 设备Mac Safari Web Inspector没有 Mac 就用 eruda 兜底。这套组合拳让我很少再遇到不知道手机里发生了什么的窘境。尤其是 eruda 的 URL 参数开关等于给每个人发了一个移动端 F12团队里的测试同学也能自己排查简单问题不用每次都来找开发。6.3 值得长期关注的小工具和扩展除了前面提到的还有一些小工具可以备着vConsole腾讯开源的移动端调试面板体积小接入简单API 很稳定eruda另一个很轻的调试面板支持按需引入 console、网络、资源、信息等模块Chrome device mode开发阶段快速预览不同屏幕尺寸的利器adb 命令行除了配合 Chrome 调试还能看设备日志、装应用、模拟按键是进阶玩家绕不开的工具。最后分享一个我自己的习惯不管用什么方案调试我都会先在页面里埋一个全局错误捕获把window.onerror和unhandledrejection的错误信息输出到 vConsole同时上报到日志系统。这样做的好处是即便问题无法当场复现也能靠用户侧的日志逐步定位而不是反复麻烦客户配合操作。这个习惯帮我解决过不少偶尔白屏的疑难杂症也推荐给大家试试。
手机端F12开发者模式全解：从Kiwi到Chrome远程调试
做前端和移动端联调的老朋友应该都有这种体验在电脑上鼠标一按 F12DOM、Console、Network 一目了然什么问题都能现场抓出来。可一旦切换到手机浏览器想调试一个页面第一反应往往是在键盘上找 F12——找半天才意识到手机根本没有这个按键。我去过不少团队见过有人为此抱着一台笔记本满屋子转也有人干脆把全部问题都盲调靠 alert 弹窗一点一点猜。这个场景太常见了而手机浏览器调试网页这个需求也远比想象中复杂它不只是换个设备看页面而是要解决响应式布局、真机特性、网络请求、登录态、性能监控等一系列问题。这篇文章我就用实际的踩坑经历把手机端 F12 开发者模式的几种完整玩法串一遍。1. 为什么手机上没有按一下 F12这种操作桌面浏览器之所以有 F12是因为桌面端的用户群体里开发者比例高产品形态也愿意为专业用户保留复杂的调试入口。而移动端浏览器的产品逻辑是越简单越好绝大多数用户打开浏览器就是看资讯、看视频、买东西他们不关心什么 DOM、Console、Network。从内核层面看移动版 Chromium 其实保留了 DevTools 的底层代码但默认关闭且入口被移除所以你在绝大多数手机浏览器里翻遍菜单也找不到开发者工具。但这并不意味着移动端网页不需要调试恰恰相反移动端是大多数线上产品的主战场真机上的崩溃率、白屏率、交互卡顿和桌面完全不是一回事。我整理了一下在手机浏览器里做调试核心需求无非这几类查看页面 DOM 结构和元素样式排查布局错乱、元素遮挡查看 Console 报错定位 JS 运行异常和兼容性问题查看 Network 请求和响应排查接口跨域、响应格式、资源加载失败查看 localStorage、sessionStorage、Cookie确认登录态与缓存状态模拟弱网、断网、异常机型验证边界场景检查性能数据比如首屏加载耗时、资源优先级、TLS 握手时间。从需求出发去看方案你会发现移动端调试并不是只有一条路有完全不需要电脑的手机浏览器内置方案有连接电脑获得完整 DevTools的远程调试方案也有页面里注入调试面板的轻量方案。每种方案解决的需求不同适用场景也不同。我这里先把主流的几条路线罗列一下调试方式代表工具是否需要电脑主要优点主要限制手机浏览器内置 DevToolsKiwi Browser、X 浏览器不需要随时随地调样式看控制台功能与桌面版有差异仅限安卓注入式调试面板vConsole、eruda不需要部署简单线上也能用侵入业务代码安全性需注意桌面远程调试Chrome DevToolschrome://inspect需要与桌面 DevTools 一致体验最完整需要数据线或同一局域网代理抓包whistle、Charles、Fiddler需要能看全量请求适合接口联调需要配置代理和证书WebKit 远程调试Safari Web Inspector需要iOS 真机调试唯一主流路径仅限 iPhone Mac 组合如果你刚接触这块我的建议很简单临时看报错先在页面上注入 vConsole 或 eruda30 秒搞定做正式的移动端开发调试优先用 Chrome 远程调试要排查接口、登录态、资源加载这类问题直接上抓包工具。下面我把这几个方案逐个讲透包括实际操作和踩过的坑。2. 手机上直接调出开发者工具Kiwi 和 X 浏览器的两种路子2.1 Kiwi Browser把 DevTools 完整搬进手机Kiwi Browser 是 Android 平台上基于 Chromium 内核的浏览器它最大的卖点就是内置了开发者工具而且支持 Chrome 扩展。对调试来说这就意味着你可以直接在手机上打开一个类似电脑 DevTools 的界面随时随地进行调试完全不用依赖电脑。开启方式很简单安装 Kiwi Browser在应用商店或官网下载 APK点击右上角菜单三个点进入设置往下拉找到开发者选项打开启用开发者工具重新打开网页点击菜单就能看到开发者工具入口。打开之后你会发现这个 DevTools 和桌面 Chrome 的布局非常像有 Elements、Console、Sources、Network、Application 等面板可以实时选中元素、修改样式、查看请求。我实际使用中它的 Elements 面板对移动端页面特别有用——就像在桌面上一样点选页面元素右侧直接改 CSS实时看效果排查那种展开后多了一块内容把按钮挤下去的布局问题非常快。这里有个细节值得说Kiwi 的 DevTools 在手机上是双栏布局屏幕小的时候会有点挤。我的使用习惯是横屏然后把缩放比例调成 80% 左右操作空间会大很多。另外它支持扩展你可以装 adblock 类扩展也可以装一些辅助调试的扩展这让它的生态比普通手机浏览器强不少。不过 Kiwi 也有明显局限。一是它的 Sources 面板在调试断点时不方便手机上不存在 F10、F11 快捷键只能点按钮效率比桌面低不少二是它是独立浏览器如果你要调试的是微信内置浏览器或 App 里的 WebViewKiwi 帮不上忙三是它的内核更新有一定滞后偶尔会遇到某个新 API 在 Chrome 桌面能跑、在 Kiwi 里不支持的情况。适合人群前端开发者外出时的快速查看、产品经理和技术支持人员验证页面问题、以及需要在手机上进行小范围样式调整的场景。2.2 X 浏览器体积小但开发者选项齐全X 浏览器是 Android 上一款体积很小但功能很全的浏览器很多用户看中的是它的扩展能力和轻量。它的开发者模式相对低调但确实存在。在设置里打开开发者模式后你可以查看页面源代码、控制台输出、Cookie 管理等功能。实际操作中我比较常用的功能有两个。一是查看源码适合快速确认页面最终渲染的 HTML排查某些脚本是否生效、某个标签是不是被框架吞掉了二是 Cookie 管理因为做移动端联调时经常需要手动修改登录态或模拟会话这个功能比很多桥接工具都方便。X 浏览器还有一个天然优势它支持不少扩展和脚本比如有人会用到 IDM 扩展来做资源嗅探调试流媒体站点时可以直接看到网络请求里的 m3u8 地址。这里要提醒一句这类能力只能用于调试自己开发或有权限测试的资源别拿来做违规用途。从调试角度看X 浏览器的定位更像轻量辅助工具适合快速验证和日常排查复杂的断点调试还是得靠远程调试方案。2.3 微信、App 内置 WebView 的调试困境很多人实际要调试的页面并不运行在独立浏览器里而是跑在微信、支付宝或 App 的 WebView 中。这类场景靠手机浏览器本身是看不到的需要借助桌面端的远程调试安卓端微信基于 X5/XWeb 内核可以使用 vConsole 注入或者对应的调试工具iOS 端微信则可以用 Safari Web Inspector 调试。这里先给一个结论WebView 调试的最通用办法是让前端在代码里内置 vConsole 或 eruda并只在 debug 模式下启用。即使上线了也可以通过 URL 参数开关。这也是为什么我强烈建议团队至少把其中一个工具集成进项目里——尤其是 iOS 环境没有 Mac 的情况下注入式调试面板几乎是唯一能直接看到 Console 报错的办法。3. USB 连电脑用 Chrome DevTools 远程调试手机网页3.1 为什么团队调试的主流方案仍然是远程调试虽然手机上可以直接用 Kiwi 这类工具但做着做着你会发现等到要打断点调试复杂逻辑、要看完整的 Network 瀑布图、要编辑文件进行调试时手机上那套还是不够用。这时候把手机连上电脑用 Chrome DevTools 远程调试体验会和桌面开发几乎一致手机上打开网页电脑上操作 DevTools改动样式实时反馈Console 和 Network 实时同步。这是目前效率最高的移动端调试方式也是大多数前端团队的标配。3.2 首次连接完整步骤从开发者模式到 chrome://inspect具体步骤如下打开手机设置找到关于手机连续点击版本号7 次直到提示已进入开发者模式回到设置首页找到开发者选项打开USB 调试用数据线把手机连接电脑手机上会弹出一个是否允许 USB 调试的确认框勾选始终允许并确定电脑上打开 Chrome地址栏输入chrome://inspect等待页面出现连接的设备找到你的手机点击设备卡片下方的inspect按钮此时会弹出一个新的 DevTools 窗口等它加载完就能开始调试了。这里有个容易被新手忽视的点手机和电脑最好连接的是同一个 WiFi而且在 chrome://inspect 页面确认 USB 设备已经发现。另外部分安卓手机的 USB 模式默认是仅充电需要手动切换成传输文件MTP否则 Chrome 可能识别不到设备。这个坑我在国产 ROM 上遇到过好几次切到传输文件模式后瞬间就出来了。3.3 无线调试Android 11 的免线方案Android 11 之后系统原生支持了无线调试省去了数据线的麻烦。开启方式手机开发者选项里打开无线调试进入子页面点击使用配对码配对设备记录下配对码电脑上执行adb pair 192.168.x.x:port并输入配对码完成配对回到无线调试页面记录下调试的 IP 地址和端口在电脑 Chrome 的chrome://inspect页面勾选Discover network targets点击Configure...添加刚才记录的IP:端口确认后设备会出现在列表里点击 inspect 就能开始远程调试。需要注意无线调试要求手机和电脑处于同一个局域网且 IP 地址变化后需要重新配置。如果公司网络开启了 AP 隔离无线调试可能连不上这时候老老实实用数据线最稳。3.4 远程调试能做的核心操作地图连接成功之后你获得的不只是一个手机版的 F12而是一整套联调工具。以桌面 DevTools 的五个核心面板为例它们在移动端调试中的主要作用是这样的Elements实时查看和修改 DOM/CSS。移动端最有用的场景是排查响应式布局问题选中元素直接改样式、看效果比反复刷新页面效率高得多。Console查看 JS 报错、console.log 输出、执行任意 JS 表达式。很多兼容性错误只在真机上出现Console 是第一时间定位的地方。Network查看请求列表、请求头、响应体、耗时瀑布图。排查接口跨域、响应格式、图片加载失败、CDN 劫持等问题非常直观也可以右键请求复制为 curl方便在本地复现。Sources打断点、单步调试、查看作用域和调用栈。远程调试的 Sources 和桌面体验基本一致适合处理复杂逻辑和定位线上难题。Application查看 localStorage、sessionStorage、Cookie、IndexedDB、Service Worker。在这个面板里可以手动修改登录态、清空缓存、删除 Service Worker做各种清理操作。实际用的时候我建议把 Network 面板拉大一点看瀑布图——手机上的真实网速、TLS 握手耗时、资源加载顺序都会和桌面有差异这些数据对移动端性能分析特别重要。4. 登录态、Cookie 和网络请求移动端调试的另外两条路热词里有人问手机浏览器如何查看网站登录的 session这确实是很多人在移动端调试时最先遇到的问题——页面打不开、跳转不对、接口 401归根结底往往是登录态的问题。4.1 在手机浏览器里直接查看 Cookie 和 Session最直接的方式是用 Kiwi Browser 的 Application 面板。进入需要登录的页面在 Kiwi 的 DevTools 里切到 Application - Cookies - 选择你的站点域名就能看到所有 Cookie包括 sessionid、token 等关键字段。localStorage 和 sessionStorage 也在这个面板里可以直观地看到键值对和过期时间。如果你想知道当前登录态到底有没有生效看两样东西就够了一是 Cookie 里有没有服务端下发的会话标志二是这个标志有没有带 HttpOnly 标记。如果服务端把 token 放在 Cookie 里且设置了 HttpOnly前端 JS 是拿不到它的这属于正常现象不能说读不到 Cookie 就是没有登录态。4.2 抓包工具把手机所有请求都捞出来Cookie 能看但要联调修改或者想看清请求前后端交互的细节更通用的方式是代理抓包。手机浏览器、App、WebView 的所有 HTTP/HTTPS 流量只要设置了代理都可以被捕获。主流的工具我推荐三个whistle基于 Node.js 的跨平台抓包调试工具规则配置非常灵活适合前端团队。安装命令npm i -g whistle启动用w2 start本地监听 8899 端口。Charles老牌抓包工具GUI 操作直观SSL Proxying 配置方便适合不习惯命令行的新手。FiddlerWindows 平台使用率高功能同样很强但界面相对陈旧。抓包的通用流程电脑和手机连同一个 WiFi电脑上开启抓包工具开启 HTTPS 解密一般会自动生成并安装证书在手机 WiFi 设置里配置 HTTP 代理指向电脑的局域网 IP 和端口默认一般是 8888 或 8899手机访问代理工具提示的证书下载地址下载并安装证书并去系统设置里信任该证书打开手机浏览器或 App所有请求都会出现在抓包工具里可以查看完整的请求头、请求体、响应内容。用 whistle 这类工具还有个额外好处可以直接编辑请求、设置规则、mock 数据。比如本地要联调一个线上接口可以通过规则把线上接口重定向到自己的开发机这在排查线上问题时非常高效。4.3 移动端流媒体和下载类场景热词里有人问手机版 QQ 浏览器下载文件有数量限制吗和手机 X 浏览器 idm 扩展 m3u8。这类问题本质上是手机浏览器对下载场景的处理策略不同。某些内置下载管理器的浏览器可能会有任务数、并发数限制这是产品策略问题而调试 m3u8 这类流媒体用抓包工具可以看到视频的分片地址和播放协议属于网络请求层面的调试。如果遇到浏览器下载限制可以换个思路用远程调试的 Network 面板找到文件下载请求的真实地址然后在手机浏览器里访问该地址手动下载或者换用支持断点续传的浏览器下载工具。当然这仅限于你有权限下载的资源。4.4 调试时修改请求头的小技巧有时候需要往请求里注入自定义 Header比如自定义 UA、token在手机浏览器里没法直接操作。抓包工具就可以派上用场whistle 支持在规则文件里写reqHeaders修改请求头Charles 也有 Rewrite 功能。这个技巧在对接第三方平台时非常省事不用改代码就能模拟不同设备、不同登录状态强烈建议试一下。5. 那些年踩过的调试坑完整排查链路5.1 chrome://inspect 一直找不到设备这个问题几乎每个人都遇到过我整理出一条完整的排查链路确认手机已开启开发者模式和 USB 调试检查 USB 连接模式是否为传输文件很多国产 ROM 默认仅充电这是最常见的坑更换数据线有些线只支持充电不支持数据传输在chrome://inspect页面确认 USB 设备已出现如果没有拔掉重插、重启 Chrome如果仍然不行检查电脑的 USB 驱动Windows 上可能需要安装手机厂商驱动或 Google USB Driver最后换台电脑或换根线测试排除硬件问题。5.2 页面能打开但 inspect 白屏这种情况通常是 DevTools 和目标页面的版本不匹配常见于 Chrome 版本跨度过大。解决方法是把电脑 Chrome 和手机 Chrome 都更新到最新版。如果你用的是 Kiwi 这类第三方浏览器inspect 入口没有弹出那就先试试 Kiwi 自带的 DevTools 入口不必死磕远程调试。5.3 代理抓包时 HTTPS 全是乱码或显示明文先检查证书是否安装并信任。特别注意Android 7.0 开始App 默认不信任用户级 CA 证书很多 App 抓包抓不到明文就是这个原因。需要在抓包工具里导出并安装证书同时如果是调试自己的 App还需要在 network_security_config 里允许信任用户证书。这不是浏览器的问题是系统安全策略网上很多教程没提这点导致新手以为抓包工具坏了。5.4 手机上复现不了桌面模拟器的问题反过来才常见桌面 Chrome 的设备模拟模式已经很强了但它模拟不了真实硬件、真实网速、真实触摸事件和系统 WebView。遇到桌面模拟一切正常、手机却白屏的情况先打开真机远程调试的 Console 看报错绝大多数是兼容性语法或媒体查询宽度没控制好导致的。还有一个隐蔽点部分国产手机浏览器默认启用了夜间模式或智能字体调整会让 CSS 渲染结果和桌面完全不同调试时记得先关掉这些功能。5.5 DevTools 语言被改成中文了怎么改回英文这是热词里很典型的一个问题。很多人在调试时误点了 DevTools 的设置把界面语言切换成了中文想改回来却找不到入口。方法其实很简单打开 DevTools按 F1 进入 Settings或者点右上角齿轮图标在 Preferences 里找到语言选项切换回 English然后重启 DevTools 即可。手机端 Kiwi 的原理类似去浏览器的设置里调整语言项就行。6. 按场景选方案个人调试、团队协作与线上问题排查6.1 场景与方案对照很多人看完前面几章会问到底该用哪个我的建议是按场景来而不是按工具来。这里整理一个更直接的对照表场景首选方案备选方案临时看报错注入 vConsole/erudaX 浏览器控制台本地开发联调Chrome 远程调试Kiwi DevTools定位接口/请求whistle 抓包Charles查看登录态Kiwi Application抓包工具复现线上问题vConsole 埋点远程调试 抓包iOS 真机Safari Web InspectorvConsole 注入6.2 我自己的组合拳做移动端项目时我的固定做法是这样的开发阶段默认在页面集成 eruda仅在本地和测试环境启用需要复杂调试时用 Chrome 远程调试。联调阶段开 whistle电脑和手机都挂代理接口问题直接看请求和响应效率很高。线上问题在 URL 后面加一个debug1之类的参数动态加载 eruda快速看真实用户报错和关键操作日志。iOS 设备Mac Safari Web Inspector没有 Mac 就用 eruda 兜底。这套组合拳让我很少再遇到不知道手机里发生了什么的窘境。尤其是 eruda 的 URL 参数开关等于给每个人发了一个移动端 F12团队里的测试同学也能自己排查简单问题不用每次都来找开发。6.3 值得长期关注的小工具和扩展除了前面提到的还有一些小工具可以备着vConsole腾讯开源的移动端调试面板体积小接入简单API 很稳定eruda另一个很轻的调试面板支持按需引入 console、网络、资源、信息等模块Chrome device mode开发阶段快速预览不同屏幕尺寸的利器adb 命令行除了配合 Chrome 调试还能看设备日志、装应用、模拟按键是进阶玩家绕不开的工具。最后分享一个我自己的习惯不管用什么方案调试我都会先在页面里埋一个全局错误捕获把window.onerror和unhandledrejection的错误信息输出到 vConsole同时上报到日志系统。这样做的好处是即便问题无法当场复现也能靠用户侧的日志逐步定位而不是反复麻烦客户配合操作。这个习惯帮我解决过不少偶尔白屏的疑难杂症也推荐给大家试试。
