在第八章里，我们学习了设备模式——它让你在电脑上模拟手机屏幕，快速测试响应式布局。但有一个问题你可能已经感觉到了：模拟终究是模拟。
有些 bug，在设备模式里死活复现不出来，但一上真机就暴露了。比如：
某个触摸事件在手机上触发不了。
页面在模拟器里很流畅，真机上却卡得要命。
某个 CSS 属性在 Chrome 的移动模拟里正常，但实际手机浏览器表现不同。
这些问题的根源在于：设备模式是在你的电脑上运行的，它只是“模拟”了手机的屏幕尺寸，但代码执行的 CPU、内存、网络环境、触摸交互，全都是你电脑的——和真实手机完全不是一回事。
那怎么办？难道每次调试都要在手机上装一个 DevTools？
答案是：远程调试。
远程调试让你在真实手机上原生运行网页，同时用电脑上的 DevTools 来进行调试。你在电脑的 DevTools 里修改样式、查看网络请求、设置断点，所有操作都会实时反映到手机上——就像你直接在调试手机本身一样。
小提示：这一章是“远程调试三部曲”的第一篇。我们会先建立对远程调试的整体认知，学会最基础的 USB 调试设置。后续两章会深入端口转发和 WebView 调试这两个更进阶的场景。
一、什么是远程调试？
远程调试，简单来说就是：用一台电脑上的 DevTools，去调试另一台设备上运行的网页。
这里的“另一台设备”可以是：
一部 Android 手机。
一台 Android 平板。
另一个 Chrome 实例（比如另一个窗口或另一个用户配置文件）。
甚至是嵌入在原生应用中的 WebView。
调试的过程是这样的：
你在手机上打开 Chrome 浏览器访问页面，然后通过 USB 数据线（或网络）把手机和电脑连接起来。
在电脑 Chrome 的 chrome://inspect 页面中，你会看到手机上所有打开的标签页，点击“inspect”按钮，就能在电脑上打开一个 DevTools 窗口——这个窗口控制的就是手机上的那个页面。
你在电脑 DevTools 里做的任何操作——修改 CSS、查看控制台日志、设置断点——都会实时同步到手机上。反过来，你在手机上点击、滚动、输入，在电脑 DevTools 里也能看到相应的变化。
本质上是把电脑的 DevTools 界面“投射”到了手机页面上——你用的是电脑的键盘和屏幕，但调试的对象是手机的真实环境。
二、为什么需要远程调试？
你可能想问：设备模式已经能模拟手机了，为什么还要费劲搞远程调试？
设备模式跑在电脑上，代码也在电脑上执行。而远程调试中，代码在手机上原生运行——处理器是手机的 ARM 芯片，内存是手机的有限内存，网络是手机的真实网络。这两者之间的差异，恰恰是很多移动端 bug 的根源。
具体来说，远程调试能帮你解决以下问题：
第一，排查设备特有的 bug。 有些 bug 只在特定手机上出现——比如某款 Android 机型的 WebView 对某个 CSS 属性的支持有问题，或者某款手机的触摸事件处理逻辑和标准不一样。这些在设备模式里是复现不出来的。
第二，测试真实的性能表现。 你的电脑可能很强大——16GB 内存、高性能 CPU——但用户的手机可能只有 2GB 内存、中低端处理器。远程调试让你在真实设备上运行代码，看到的是用户在真实场景下的性能表现。
第三，调试复杂的触摸交互。 设备模式用鼠标模拟触摸，但鼠标和手指的物理特性完全不同——手指有面积、有压力、有多点触控。复杂的手势（比如双指缩放、长按拖拽）在模拟中很难精确复现。
第四，测试真实的网络环境。 你的电脑连着 Wi-Fi，速度很快。但用户可能在用 4G 网络，信号不稳定。在真实手机上测试，你能看到页面在真实网络条件下的表现。
小建议：设备模式是你的“第一道防线”，用来快速发现和修复大部分移动端问题。远程调试是你的“第二道防线”，用来验证那些在模拟中无法确认的、只在真机上出现的问题。两道防线结合使用，才能最大程度地保证移动端体验。
三、远程调试的基本流程
远程调试的整体流程可以分为四个步骤：
准备 Android 设备：开启开发者选项和 USB 调试。
连接设备：用 USB 数据线把手机连接到电脑。
打开调试页面：在电脑 Chrome 中访问 chrome://inspect。
开始调试：找到设备，点击“inspect”按钮。
下面我们一步步来看。
四、准备工作：开启 Android 设备的开发者选项
远程调试的第一步，是在你的 Android 手机上开启“开发者选项”。这个选项在出厂时是隐藏的，需要通过一个“隐藏技巧”来激活。
操作步骤：
打开手机的设置（Settings）
找到关于手机（About Phone）——不同品牌手机的位置可能略有不同，有的在“系统”里，有的在“更多设置”里。
在“关于手机”页面中，找到版本号（Build Number）或软件版本号。
连续点击版本号 7 次。
你会看到提示：“您已处于开发者模式！”或“Developer mode has been enabled”。
小建议：不同品牌的 Android 手机，“关于手机”的位置可能不一样。如果找不到，可以在设置里搜索“关于手机”或“版本号”。
五、开启 USB 调试
开启开发者选项之后，你就可以在设置里找到“开发者选项”菜单了。
操作步骤：
回到设置主界面。
找到开发者选项（Developer Options）——通常在“系统”或“更多设置”里。
打开开发者选项 的开关（顶部通常会有一个总开关）。
在开发者选项列表中，找到 USB 调试（USB Debugging）。
打开 USB 调试的开关。
小建议：有些手机还有一个“仅充电模式下允许 ADB 调试”的选项，建议也一并打开，方便在充电时调试。
六、用 USB 连接设备
开启 USB 调试之后，用 USB 数据线把手机连接到电脑。
第一次连接时，手机上会弹出一个提示框：“允许 USB 调试吗？”——点击确定或允许。
如果没看到这个提示，可以检查以下几点：
数据线是否支持数据传输（有些充电线只能充电，不能传数据）。
手机是否解锁了屏幕。
USB 连接模式是否设置为“传输文件”（MTP）而不是“仅充电”。
小建议：建议勾选“始终允许从此计算机进行调试”，这样以后连接同一台电脑就不用重复授权了。
七、在电脑上打开 chrome://inspect
现在轮到电脑这边了。
在电脑的 Chrome 浏览器地址栏中，输入以下地址并回车：
chrome://inspect或者完整地址：
chrome://inspect/#devices你会看到一个页面，上面列出了所有可调试的设备。
确保“发现 USB 设备”（Discover USB devices）是选中状态——默认是选中的，如果没有，手动勾选一下。
如果一切正常，你应该会在 Remote Target（远程目标）部分看到你的手机设备名称。
设备名称下方，Chrome 会列出该设备上所有已打开的 Chrome 标签页（以及可调试的 WebView，我们会在第十二章详细讲）。
八、点击“inspect”开始调试
在设备名称下方，你会看到手机 Chrome 中当前打开的所有标签页列表。每个标签页旁边都有一个 inspect 按钮。
找到你要调试的那个页面，点击 inspect。
电脑上会弹出一个新的 DevTools 窗口。这个窗口和你平时用的 DevTools 看起来几乎一模一样——有元素面板、控制台、源代码、网络等所有你熟悉的面板。
但有一个关键的区别：这个 DevTools 控制的是手机上的页面，而不是电脑上的。
你在 DevTools 里修改样式、执行 JS 代码、查看网络请求，所有操作都会实时同步到手机上。反过来，你在手机上滑动、点击、输入，在 DevTools 里也能看到相应的变化。
九、远程调试的核心功能
一旦连接成功，你可以用这个远程 DevTools 做很多事情：
1. 查看和修改 DOM 与 CSS
在 Elements 面板中，你可以像调试桌面页面一样，查看手机页面的 DOM 结构，实时修改样式，调试响应式布局。所有改动会立刻在手机上生效。
2. 调试 JavaScript
在 Sources 面板中设置断点，代码在手机上执行到断点处时会暂停，你可以单步执行、查看变量值——和桌面调试完全一样。
3. 查看控制台日志
手机页面上所有的 console.log、报错信息、警告，都会显示在电脑 DevTools 的控制台面板中。
4. 分析网络请求
在 Network 面板中，你可以看到手机页面发起的所有网络请求——包括请求的 URL、状态码、耗时、响应内容等。
5. 性能分析
你可以在手机页面上录制性能数据，分析主线程的 JavaScript 执行、布局、绘制等耗时操作。
简单来说：你在电脑上能做的所有调试操作，在远程调试中都能做——只是调试的对象从电脑页面变成了手机页面。
十、远程调试 vs 设备模式
这是很多初中级开发者容易混淆的两个概念。我们用一张表来对比一下：
维度 | 设备模式 | 远程调试 |
|---|---|---|
代码运行位置 | 你的电脑 | 真实的手机 |
CPU 架构 | 电脑的 x86 | 手机的 ARM |
内存/性能 | 电脑的资源 | 手机的真实资源 |
网络 | 电脑的网络 | 手机的真实网络 |
触摸交互 | 鼠标模拟 | 真实手指触摸 |
适用场景 | 快速验证响应式布局 | 排查真机特有的 bug |
是否需要真机 | 不需要 | 需要 |
简单来说：设备模式是“模拟”，远程调试是“真实” 。
在日常开发中，先用设备模式快速迭代和验证布局；当遇到设备模式无法复现的问题时，再用远程调试在真机上深入排查。
十一、注意事项和常见问题
Q1：手机连接后，chrome://inspect 里看不到设备？
按照以下顺序排查：
确认手机的开发者选项已开启。
确认USB 调试已开启。
确认 USB 数据线支持数据传输（不是“仅充电”线）。
确认手机上已授权 USB 调试（第一次连接时会弹出授权提示）。
尝试换一个 USB 接口，或者重启 Chrome 浏览器。
Q2：调试过程中连接突然断开？
检查 USB 数据线是否松动。如果频繁断开，尝试换一根质量更好的数据线。
Q3：可以无线调试吗？
可以。Android 11 及以上版本支持无线 ADB 调试。具体步骤是：
先用 USB 连接一次，在终端运行 adb tcpip 5555。
拔掉 USB，运行 adb connect 手机IP:5555。
然后在 chrome://inspect 中就能看到无线连接的设备。
不过对于初中级开发者来说，建议先从 USB 有线调试开始，更稳定、更容易上手。
Q4：可以调试 iPhone 上的页面吗？
Chrome 的远程调试主要支持 Android 设备。调试 iOS 上的 Safari 或 WebView，需要使用 Safari 的 Web Inspector 功能（在 Mac 上），或者使用第三方工具。这超出了本章的讨论范围。
Q5：远程调试会影响手机性能吗？
有一定影响。开启调试时，Chrome 会向 DevTools 传输大量数据，会消耗一定的 CPU 和电量。调试完成后，建议关闭 DevTools 窗口或断开连接。
总结
在这一章中，我们学习了远程调试的基础知识：
什么是远程调试：用电脑的 DevTools 调试真实手机上运行的网页。
为什么需要远程调试：设备模式是模拟，远程调试是真机——能发现只有真实设备才会出现的问题。
设置步骤：
1.在 Android 手机上开启开发者选项（连续点击版本号 7 次）。
2. 开启 USB 调试。
3. 用 USB 数据线连接手机和电脑。
4. 在电脑 Chrome 中打开 chrome://inspect。
5. 点击设备旁的“inspect”按钮开始调试。
核心功能：和桌面 DevTools 完全一致——调试 DOM、CSS、JS、网络、性能。
与设备模式的区别：设备模式是模拟，远程调试是真机。
本章练习
拿出一部 Android 手机，按照本章的步骤，开启开发者选项和 USB 调试。
用 USB 数据线把手机连接到电脑，在电脑 Chrome 中打开 chrome://inspect，看看是否能识别到你的设备。
在手机 Chrome 中打开一个网页（比如 m.baidu.com），然后在电脑的 chrome://inspect 中找到这个标签页，点击“inspect”打开远程 DevTools。
在远程 DevTools 的元素面板中，修改手机页面上某个元素的背景色——看看手机上的页面是否同步变化。
在远程 DevTools 的控制台中，输入 document.title 并执行——看看能否获取到手机页面的标题。
如果你的手机支持 Android 11 及以上版本，尝试用无线 ADB 的方式连接一次。
