React Native Debugger

Posted 2023-04-19

参考技术A React Native Debugger 是RN项目的调试利器，集成了多个调试工具。

(1) 官方提供的调试工具：通过 console 大法或 debugger 来进行调试；

(2) react devtools：react 官方提供调试工具，但是不支持调试 RN；

(3) redux devtools：redux 调试工具，能监听 redux 中任何时候的 state；

(4) xcode 或 android stdiuo： 不支持 debug js code

下面看一下这个工具的使用

先看一下各个面板的功能：

redux devtools调试面板

react devtools调试面板

Debugger 调试面板

如果端口8081被占用，可切换端口调试
设置端口看下图

输入端口号

总结：

1.React Native Debugger 集成了 react-devtools、redux-devtools、debugger等工具

2.在react-devtools调试面板中查看组件props、state、style，可修改style

3.在redux-devtools调试面板中查看状态树、dispatch过的Action及状态变化

4.能开启多个debugger监听多个端口

5.能监听网络请求

6.安装 For macOS
brew update && brew cask install react-native-debugger

Sourcemaps 在 React Native Debugger 中不起作用

【中文标题】Sourcemaps 在 React Native Debugger 中不起作用

【英文标题】：Sourcemaps not working in React Native Debugger

【发布时间】：2018-06-01 19:09:22

【问题描述】：

尝试在 Mac 上的 react native 调试器独立应用程序中调试 React Native 时遇到问题。该项目通过打包程序启动并在 Android 模拟器中运行。

我无法访问任何源地图，只能访问捆绑的代码。问题是它在针对我的 iOS 模拟器和 XCode 运行代码和打包器时运行良好，但是当从 Android Studio 启动调试会话并与打包器捆绑时，我可以很好地运行我的解决方案，但我无法访问任何源映射。

我不知道如何通过这个...如何解决打包程序及其源映射处理问题？

【参考方案1】：

问题已通过进入 React Native Debugger 的设置并单击“恢复默认值并重新加载”来解决，现在我可以再次看到两个平台的源映射！