APP - React Native调试

APP - React Native调试

 

一. 使用 Chrome DevTools 调试

　　参考：https://www.reactnative.cn/docs/debugging

 

 　　Hermes 通过实现 Chrome DevTools 协议来支持 Chrome 调试器。这意味着可以使用 Chrome 的工具直接调试在 Hermes 上运行的 JavaScript，无论是在模拟器还是在物理设备上。

1. 在 Chrome 浏览器窗口中，导航到 chrome://inspect。
2. 使用 "Configure..." 按钮添加开发服务器地址（通常是 localhost:8081）。
3. 现在应该能看到一个带有 "inspect" 链接的 "Hermes React Native" 目标。点击这个链接打开调试器。

 

 

 

 

如在代码增加测试按钮

  <Button title="sas"
              onPress={() => {
                debugger;
                Alert.alert('Simple Button pressed');
                console.log('Simple Button pressed');
              }}></Button>

 

 在点击按钮时，会跳断点

 

 

 

二. 使用 react-devtools 调试

　　参考：https://github.com/facebook/react/tree/main/packages/react-devtools

 

1. 安装插件

npm install -g react-devtools

 

2. 安装完成后在cmd命令行中执行react-devtools即可启动此工具：

react-devtools

 

3. 项目启动后，执行

adb reverse tcp:8097 tcp:8097

 

 

输入A重启APP

 

 

后续。。。。。

 

 

 

 

 

 

 

 

 

 

 

end.