以下是使用 Chrome 远程调试 Android 手机上网页的 4 个关键步骤:
"前提条件:"
1. "确保手机和电脑连接在同一个 Wi-Fi 网络"下。
2. "在手机上安装了 Chrome 浏览器"。
3. "在电脑上安装了最新版本的 Chrome 浏览器"。
4. "手机已开启开发者模式":
进入 `设置` -> `关于手机`。
连续点击 `版本号` 七次左右,直到出现“您已处于开发者模式”的提示。
返回 `设置` 主菜单,找到并进入 `开发者选项`。
在 `开发者选项` 中,开启 `USB 调试`。 (可选,但有时需要)
5. "电脑上已安装 USB 驱动程序",确保电脑能识别手机。通常安装 Android SDK 时会自带驱动。
"关键步骤:"
1. "在电脑 Chrome 中开启远程调试:"
打开你的电脑上的 Chrome 浏览器。
在地址栏输入 `chrome://inspect` 并按 Enter。
在页面上方,通常会有一个选项卡或按钮,叫做 ""发现连接的设备 (Discover connected devices)"" 或类似的文字。点击它。
Chrome 会开始扫描同一网络下的设备。稍等
相关内容:
先给电脑搭个“模拟手机”环境
想在电脑上调试手机网页,第一步得有个安卓模拟器。目前主流的选择有两种:Android Studio自带模拟器(适合开发环境,功能全但启动慢)和Genymotion(第三方轻量模拟器,启动快且流畅)。以Android Studio为例,打开AVD Manager(工具栏“Tools”→“AVD Manager”),点击“Create Virtual Device”,选择设备型号(比如Pixel 7)和Android系统版本(建议Android 11及以上,确保兼容性),最后点击“Finish”完成创建。
给模拟器装个Chrome浏览器
大部分模拟器默认不带Chrome,需要手动安装。先在电脑上下载Chrome APK(推荐从APKMirror下载,选择与模拟器架构匹配的版本,如arm64-v8a),然后直接拖拽APK到模拟器窗口,会自动弹出安装提示。以Genymotion为例,安装完成后在模拟器桌面就能看到Chrome图标,点击打开并完成初始化设置(同意服务条款、登录Google账号等)。
Genymotion-ARM-Translation_v1.1.zip),同样拖拽到模拟器安装,解决兼容性问题(引自CSDN博客《Remote Debugging Chrome 结合Genymotion模拟器的移动端web真机调试》)。
用ADB架起“调试桥梁”
ADB(Android Debug Bridge)是连接电脑和模拟器的核心工具,相当于给两者开了条“直连通道”。先在电脑上安装Android SDK Platform Tools,将其路径添加到系统环境变量(比如Windows用户解压后将“platform-tools”文件夹路径加入Path),然后打开命令提示符,输入adb devices,如果显示类似“emulator-5554 device”,说明模拟器已成功连接。
https://developer.android.com/studio/run/emulator-networking)。
用Chrome DevTools实时调试网页
一切准备就绪后,打开电脑Chrome,在地址栏输入chrome://inspect,勾选“Discover USB devices”,稍等几秒就能看到模拟器中的Chrome标签页。点击对应页面下方的“inspect”,会弹出DevTools窗口,此时你在电脑上的操作会实时同步到模拟器:• 改样式:在Elements面板双击CSS属性,修改颜色或尺寸,模拟器页面会即时更新;• 抓请求:Network面板能看到所有网络请求,包括手机端特有的3G/4G网络延迟(可在DevTools设置网络节流为“Slow 3G”);• 调JS:Sources面板设置断点,单步调试JavaScript,Console面板直接输入代码执行(如document.body.style.backgroundColor='red')。

chrome-devtools-frontend.appspot.com)或使用代理(引自掘金《移动端真机调试指南》)。