ReactNative 学习笔记- Debug

本文介绍如何进行Android设备上的真机调试,包括开启USB调试的方法、使用Chrome浏览器进行远程调试的过程,以及热更新、断点调试等功能的具体操作步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

真机调试

  • 开启USB调试 adb reverse tcp:8081 tcp:8081(Android 5.0以上:不使用设定ip和端口)
  • 摇晃手机,弹出Menu。选择debug (需要安装chrome浏览器)
  • console.log() 打出调试信息
  • breakpoint 断点调试

设备端 Menu

手机摇晃会出现Menu

  1. ReloadJS

    重新加载JS和刷新http://localhost:8081/index.android.bundle?platform=android 同样的效果

    当应用启动运行的时候,会自动拉取这个bundle文件。

    该文件里存放的是应用的全部逻辑代码,在目录中并不存在这个文件。
    事实上,这个地址只是一个请求地址,而非真正的静态资源文件。

    是通过包服务器packager通过动态分析index.android.js中的依赖,并对其进行合并得到的.

  2. 调试

    http://localhost:8081/debugger-ui (chrome浏览器)

    F12打开右侧窗口

  3. Enable Hot Reloading

    热更新

  4. Enable Live Reload

    JS变动后自动刷新,不需要点击Reload JS. 不过不太稳定

  5. 检查元素

    点击后可以在设备端查看各组件layout信息,给服务器端的检查元素类似

  6. Enable Perf Monitor

    性能监视器,可以看到fps等信息

breakpoint

  • chrome 浏览器 Sources里面,选择code添加breakpoint. reload JS查看效果

  • 鼠标移动查看变量值或者在Console中输入

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值