react如何在手机上调试

在手机上调试 React 应用的方法

使用 Chrome 开发者工具远程调试

在 Android 设备上启用 USB 调试模式，通过 USB 连接电脑。打开 Chrome 浏览器，访问 chrome://inspect，选择已连接的设备。确保 React 应用在手机浏览器中运行，即可通过电脑端的 Chrome 开发者工具进行调试。

使用 React Developer Tools

安装 React Developer Tools 浏览器扩展。在手机上运行 React 应用，通过 Chrome 远程调试功能连接到手机后，开发者工具中会显示 React 组件树，可以查看和修改组件状态。

使用 Flipper 工具

Flipper 是 Facebook 开发的跨平台调试工具，支持 React Native 和 React 应用。安装 Flipper 桌面客户端，在应用中集成 flipper-plugin，通过 Wi-Fi 或 USB 连接手机即可调试。

使用 Eruda 控制台

在 React 应用中引入 Eruda（一个移动端调试控制台库），通过以下代码初始化：

import eruda from 'eruda';
eruda.init();

在手机上打开应用时，会显示一个可拖动的调试面板，包含 Console、Elements、Network 等工具。

使用 Weinre 远程调试

Weinre 是一个网页检查工具，适用于不支持远程调试的旧设备。全局安装 weinre：

npm install -g weinre

启动服务后，在 React 应用中插入脚本标签，通过电脑浏览器访问调试界面。

使用 React Native Debugger（针对 React Native 应用）

对于 React Native 应用，可以安装 React Native Debugger 独立应用。启动调试器后，在应用中摇动设备调出菜单，选择“Debug”即可连接。

使用 Safari 调试 iOS 设备

在 iOS 设备的设置中启用 Web 检查器。通过 USB 连接 Mac 电脑，打开 Safari 的“开发”菜单，选择设备进行调试。需要确保 React 应用在 Safari 中运行。

使用 VS Code 调试

配置 VS Code 的调试环境，安装 Debugger for Chrome 扩展。创建 .vscode/launch.json 文件，配置远程调试参数。启动调试会话后，可以设置断点和检查变量。

使用代理工具调试网络请求

配置手机网络代理到电脑，使用 Charles 或 Fiddler 捕获 React 应用的网络请求。这种方法适合调试 API 调用和网络相关问题。

使用浏览器同步工具

使用 BrowserSync 或其他同步工具，在开发时实时将电脑上的更改同步到手机浏览器。方便快速验证样式和交互在不同设备上的表现。