快速上手

本教程将帮助你在 5 分钟内掌握 WebDebugX 的基本功能，开始调试移动设备上的网页应用。无论你调试的是 iOS Safari、Android Chrome 还是 WebView 应用，本教程都能帮你快速入门。

手机开启网页检查器

要调试手机设备（如 Android 和 iOS）中的浏览器，需要开启网页检查器开关，允许对手机上的浏览器进行调试和网页检查。如果设备尚未开启浏览器远程调试，请先参阅开启网页检查器的方法。

连接设备

首先，将移动设备连接到电脑：

1. 启动 WebDebugX 应用
2. 使用 USB 数据线将移动设备连接到电脑
3. 在移动设备上允许 USB 调试（如果提示）；iOS 如果弹出「信任此电脑」，点击「信任」
4. WebDebugX 将自动检测到你的设备并显示在设备列表中

提示：如果你希望使用 WiFi 进行调试，请参考 WiFi 调试移动端页面教程。如果检测不到设备，安装克魔助手修复 iOS 驱动。

选择调试目标

连接设备后，选择要调试的网页或应用：

1. 在 WebDebugX 左侧的设备列表中，点击你的设备
2. 点击旁边的刷新按钮获取页面列表，你将看到可调试的 WebView 列表和浏览器列表，以及它们的页面清单
3. 选择你想要调试的网页或应用，即可开始调试

使用 WebDebugX 调试网页

WebDebugX 提供了与 Chrome DevTools 类似的调试界面，主要包括以下功能。

元素检查

检查页面元素的结构和样式：

1. 在调试界面中，点击左上角的「元素」标签
2. 你可以看到页面的 DOM 结构
3. 点击元素可以查看其 CSS 样式
4. 使用「选择元素」工具（左上角的箭头图标）可以在页面上直接选择元素
5. 你可以在元素面板中修改 CSS 样式和 HTML 内容，更改会立即应用到移动设备上

控制台调试

使用 JavaScript 控制台进行调试：

1. 点击「控制台」标签
2. 你可以查看 JavaScript 错误和日志
3. 在控制台中输入 JavaScript 代码并执行
4. 使用 console.log()、console.error()、alert() 等方法输出调试信息

网络分析

监控网络请求和响应：

1. 点击「网络」标签
2. 你可以看到所有的网络请求
3. 点击请求可以查看详细信息，包括请求头、响应头和响应内容
4. 使用过滤器筛选特定类型的请求

源码调试

调试 JavaScript 代码。WebDebugX 支持实时调试，这意味着你在 WebDebugX 上的操作会立即反映在手机端的页面中。

1. 点击「源码」标签
2. 在文件树中找到要调试的 JavaScript 文件
3. 点击行号添加断点
4. 当代码执行到断点时，你可以查看变量值并逐步执行代码

下一步

现在你已经掌握了 WebDebugX 的基本功能，可以继续学习更高级的调试技巧：网络调试 · 性能分析 · WiFi 调试