如何调试React Native?

当应用程序在应用模拟器中运行时，如何用React Native调试他们的React代码?

294587 次浏览
小开

Cmd + D从模拟器。它会弹出Chrome浏览器，从那里你可以使用开发人员工具。

编辑:

它现在在帮助文档中被链接。

小开

默认情况下，我的ios模拟器没有捕捉到击键，这就是为什么cmd-D不能工作的原因。我必须使用模拟器的菜单打开键盘设置:

硬件>键盘>连接键盘

现在cmd-D启动chrome调试。

小开

在文件路径防止中有一个空格，Cmd+D不能工作。我把我的项目移动到一个没有空间的位置，我终于让Chrome调试器工作了。看起来像错误。

小开

调试React原生应用程序

要调试react应用程序的javascript代码，请执行以下操作:

  1. 在iOS模拟器中运行应用程序。
  2. 按Command + D，一个网页应该在http://localhost:8081/debugger-ui打开。(Chrome浏览器)或使用Shake Gesture
  3. 启用暂停捕获的异常以获得更好的调试体验。
  4. 按Command + Option + I打开Chrome开发工具，或通过View -> Developer -> Developer Tools打开。
  5. 现在您应该能够像往常一样进行调试了。

可选

为谷歌Chrome浏览器安装React开发工具扩展。这将允许您在打开开发人员工具时选择React选项卡来导航视图层次结构。

生活重新加载

要激活Live Reload，请执行以下操作:

  1. 在iOS模拟器中运行应用程序。
  2. 按Control + Command + Z。
  3. 你现在会看到Enable/Disable Live Reload， Reload和Enable/Disable Debugging选项。
小开

奇怪的是，cmd⌘ + D对我不起作用。在iOS模拟器中按ctrl + cmd⌘ + Z确实为我打开了调试浏览器窗口。

这是弹出的屏幕:

React Native debugging options .

详情请点击这里。

小开

除了其他答案。可以使用调试器语句调试react-native

例子:

debugger; //breaks execution

你的chrome开发工具必须打开这工作

小开

我没有足够的声誉来评论之前的答案，这些答案都很好。：） 以下是我在开发react-native应用程序时调试的一些方法

  1. < p > 生活重新加载

    react-native可以超级容易地使用⌘+ R键或甚至只是启用实时重载查看您的更改，watchman将"refresh"模拟器的最新变化。如果出现错误，您可以从红色屏幕上的行号中获得线索。几个撤销操作将使您回到工作状态并重新开始。

  2. < p > console.log('yeah, seriously.')

    我发现自己更喜欢让程序运行并记录一些信息，而不是添加debugger断点。(当尝试使用外部包/库时，强硬的调试器是有用的，它带有自动完成功能，所以你知道你可以利用其他方法。)

  3. Enable Chrome Debugging带有程序中的debugger;断点。

这取决于您遇到的错误类型以及您对如何调试的偏好。对于undefined is not an object (evaluating 'something.something')的大部分，方法1和2对我来说已经足够好了。

然而，处理由其他开发人员编写的外部库或包将需要更多的努力来调试，因此使用像Chrome Debugging这样的好工具

有时它来自react-native平台本身，所以谷歌一下react-native问题肯定会有帮助。

希望这能帮助到一些人。

小开

对于Android应用程序，如果你正在使用Genymotion，你可以通过按CMD + m来切换菜单，但你可能必须通过这样做在菜单中启用它。

< img src = " https://i.stack.imgur.com/Q0WNU.png " width = " 250 " > < / p >

  • 取消勾选小部件
  • 通过CMD + m启用它，单击在chrome中调试
小开 
adb logcat *:S ReactNative:V ReactNativeJS:V

在终端中运行android日志。

小开

对我来说，在React-Native上调试的最好方法是使用“Reactotron”。

安装Reactotron，然后将这些添加到你的package.json:

"reactotron-apisauce": "^1.1.2",
"reactotron-react-native-under-37": "^1.1.2",
"reactotron-redux": "^1.1.2",

现在，它只是登录到您的代码的问题。 例如:console.tron.log('debug') < / p >

小开

在Debian 8 (Jessie)上调试react-native 0.40.0可以通过在Chromium或Firebug中导航到http://localhost:8081/debugger-ui来完成，而应用程序正在android模拟器中运行。要访问应用程序内的开发人员菜单，在另一个终端窗口中运行以下命令，如在这里所示:

adb shell input keyevent 82

小开

enter image description here

试试这个程序:https://github.com/jhen0409/react-native-debugger

适用于:windows， osx和linux。

它支持:react native和redux

你还可以检查虚拟组件树，修改应用中反映的样式。

小开

对于android应用程序。按Ctrl+M选择远程调试js，它将在chrome浏览器中打开一个url http://localhost:8081/debugger-ui的新窗口。你现在可以调试应用程序在chrome浏览器

小开

在Windows中，使用android模拟器，你可以执行以下步骤:

  1. 在模拟器运行并在其上运行应用程序后，按菜单按钮，然后选择“远程调试JS”或“在Chrome中调试”(这取决于模拟器使用)。你可以看到下一张图片作为参考:带有步骤图像的模拟器
  2. 一个新的Chrome标签将出现。你必须按Ctrl + J来显示开发人员工具，并开始跟踪调试步骤。请看这张图片作为参考

此外，你应该使用console.log()特性来使调试过程更具描述性。

小开

你可以从brew安装React本机调试器。它比chrome中的调试器使用起来更舒服

小开

非常简单，只有两个命令

For IOS $ react-native log-ios
For Android $ react-native log-android
小开
  1. 在模拟器- react-native Run -ios中运行你的应用程序
  2. 按ctrl + d，然后点击Debug JS remote

enter image description here

  1. 网页应该在http://localhost:8081/debugger-ui打开，如果没有输入URL，在Chrome中进入这个链接
  2. 右键点击页面，点击检查，它应该打开chrome开发工具

enter image description here

  1. 转到顶部菜单中的源代码，在右侧的文件资源管理器中找到你的js类文件

  2. 您可以将断点放到视图中，并在其中调试代码，如图所示。

小开

如果你正在使用微软可视代码，然后安装React本地工具扩展。然后，只需单击所需的行号就可以添加断点。 按照以下步骤来安装和调试应用程序: SETUP RUN < / p >

不要忘记启用调试JS远程模拟器，如果你使用它。

小开

这真的取决于我在做什么。如果我正在更改UI或调试UI，我通常会打开实时和热重新加载并进行更改，然后获得即时反馈。如果它是更技术性的东西，我打开JS调试来查看应用程序的状态。然而，因为在react本机中重新加载是如此之快，如果状态太混乱，我只是控制台日志。

小开

如果你在连接到笔记本电脑的真实设备上运行应用程序，你可以使用react-native log-ios或react-native log-android通过终端调试它(它也适用于模拟器)

小开

你可以使用expo来调试:https://expo.io/

Expo让web开发者构建真正的本地应用程序，可以在这两个平台上工作 iOS和Android只需要用JavaScript写一次。它是开放

.使用React Native

这是一个很棒的工具，你可以在React Europe conf上观看这个研讨会:

https://www.youtube.com/watch?v=HygXkQDMSGU&t=6675s

小开

我使用的一种技术非常类似于Android中的调试策略，即在所有.js文件中包含一个名为TAG的全局变量。

const TAG = 'APP_NAME+SCREEN_NAME';

然后在需要的地方执行:console.log(TAG + 'ACTION');

通过这种方式，我可以跟踪操作并查看日志语句的来源。

小开

假设你想在Android模拟器上显示这个菜单 enter image description here < / p >

  • 然后，尝试⌘+m在Mac上的Android模拟器上弹出这个开发设置对话框。

  • 如果没有显示，则转到AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box。 李enter image description here < / p > < / >

  • 然后重试⌘+m。

  • 如果它没有显示静止，那么转到运行模拟器设置，在Send keyboard shortcuts to组合框/下拉菜单中，然后选择Emulator controls (default)选项。

enter image description here

  • 然后重试⌘+m。

  • 我希望这对你有帮助，它对我有用

小开

  1. 如果您正在使用模拟器，请使用Ctrl+M &模拟器< kbd > < / Cmd kbd > + < kbd > D < / kbd >

  2. 远程单击- Debug js

  3. 谷歌Chrome浏览器进入控制台

小开

其实很简单。只需按cmd D(如果在mac上)，模拟器将创建一个弹出菜单。从那里只需点击“调试JS远程”或类似的东西。注意，在执行与某些包相关的代码时运行调试器会给人们带来问题。我有一个问题与反应本机映射和调试器。但这是固定的。不过，在大多数情况下，你应该没问题。

小开

如果你想在Windows上使用android设备调试，只需打开命令提示符，然后输入(确保你的adb工作正常)

adb shell input keyevent 82

它将提示一个类似图像的屏幕 enter image description here < / p >

然后选择

debug JS Remotely

它会自动打开一个新窗口。然后打开检查元件或按F12进入控制台。

小开

要调试你的react原生应用程序，只需到以下地址:

< >强localhost: 8081 / debugger-ui 在你的默认浏览器(chrome)和打开开发者工具来调试你的react原生应用

小开

如果你在Atom编辑器中使用Nuclide进行React原生应用程序开发，那么你也可以“元素检查器”;这有助于观察道具和状态值的变化，当应用程序运行在设备上的开发阶段。

了解更多关于它的信息

enter image description here

小开
还有一个非常好的调试器名为Reactotron。 https://github.com/infinitered/reactotron < / p >

您不必在调试模式下查看一些数据值，而且有很多选项。

去看看真的很有用。；）

小开

如果你正在使用Redux，我强烈推荐React Native Debugger。它包括Chrome开发工具，但也有Redux开发工具和React开发工具。

回来的Devtools:这允许你查看你的动作，并在它们之间来回走。它还允许您查看redux存储，并具有自动区分每个操作的先前状态和更新状态的功能，因此当您在一系列操作中来回执行时，您可以看到这一点。

反应Devtools:这允许你检查某个组件，即它的所有道具以及它的组件状态。如果你有一个组件状态的布尔值，它让你点击它来切换它，看看当它改变时你的应用程序是如何反应的。很棒的特性。

Chrome Devtools允许你看到你所有的控制台输出，使用断点，暂停调试器;等。标准调试功能。如果你右键单击Redux Devtools中列出的操作区域，并选择“允许网络检查”，你可以在Chrome Devtools的网络选项卡中检查你的API调用。

总之，把这些都放在一个地方真是太棒了!如果你不需要其中一个，你可以打开/关闭它。获得React本机调试器并享受生活。

小开

在react-native的新版本中，你可以使用react-native log-android或react-native log-android来查看应用程序在dev模式下的日志。

小开

在React-Native中，调试要容易得多。

  • 在IOS中使用调试

CMD + d

ctrl + cmd + z (适用于模拟器)

  • 在android中调试

用触摸(确保你的开发者选项是启用的)摇动设备

小开

对于Android: Ctrl + M(模拟器)或摇动手机(在设备中)显示菜单。

对于iOS: Cmd + D或摇晃手机显示菜单

确保你有铬。

在显示的菜单上选择Debug JS远程选项。

Chrome将在localhost:8081/debugger-ui自动打开。您也可以使用此链接手动转到调试器。

那里显示控制台，你可以看到日志被记录。

小开
  1. 在终端adb logcat *:S ReactNative:V ReactNativeJS:V运行
  2. 在Android Studio中打开项目，打开logcat(底部面板的按钮)
  3. 在终端react-native run-android运行

在构建之后，你应该在logcat中看到Android Studio中的详细日志。

小开

我使用这个库来调试react-native项目

https://github.com/jhen0409/react-native-debugger 它包括

  1. 包括React -devtools-core中的React Inspector。
    2. <李>包括回家的 DevTools，用redux-devtools-extension做了相同的API

或者你可以用

For IOS $ react-native log-ios
For Android $ react-native log-android
小开

<强>步骤1: 将debugger放置在你想要停止脚本的任何地方，例如:

  async saveItem(item, selectedValue) {
debugger
try {
await AsyncStorage.setItem(item, selectedValue);
}
catch (error) {
console.error('AsyncStorage error: ' + error.message);
}
}

这将在控制到达此代码块时暂停调试器。

<强>步骤2: 在ios模拟器上按Cmd+D，在Android模拟器上按Cmd+M。 如果你有真实的设备，摇动设备打开dev菜单，如果你不想摇动设备遵循这个博客

<强>步骤3: 选择Enable Remote JS Debugging，这将打开Chrome

enter image description here

<强>步骤4: 选择Developer Tools. < / p >

enter image description here

<强>第五步: 你的调试器暂停在Sources选项卡中，无论你在你的代码中写了debugger。进入控制台，输入任何你想调试的参数(出现在代码块中)，例如: enter image description here 要移动到下一个调试器点，再次移动到Sources ->，单击恢复脚本执行按钮(右下角蓝色按钮)

把调试器放在你想暂停脚本的任何地方。

享受调试! !

小开

对于Android模拟器，在Windows中按F10而不是Cmd + M。模拟器开始显示所有的react-native调试选项。

image

小开

你也可以使用自定义库，如果你不想摇你的真实手机每2分钟

我已经创建了一个库，允许你在开发模式下用3个手指触摸而不是摇晃打开开发菜单

https://github.com/pie6k/react-native-dev-menu-on-touch

你只需要在里面包装你的应用程序:

import DevMenuOnTouch from 'react-native-dev-menu-on-touch'; //或:import {DevMenuOnTouch} from 'react-native-dev-menu-on-touch'

class YourRootApp extends Component {
render() {
return (
<DevMenuOnTouch>
<YourApp />
</DevMenuOnTouch>
);
}
}

当你必须在真正的设备上调试并且你有同事坐在你旁边时，它真的很有用。

小开

你可以使用Safari来调试iOS版本的应用程序，而不必启用“远程调试JS”，只需遵循以下步骤:

1. Enable Develop menu in Safari: Preferences → Advanced → Select "Show Develop menu in menu bar"
2. Select your app's JSContext: Develop → {Your Simulator} → Automatically Show Web Inspector for JS JSContext
3. Safari's Web Inspector should open which has a Console and a Debugger
小开

React本机调试器。它帮我解决了90%的问题

小开

这是使用react本机调试器应用程序的另一种方式。

你可以使用下面的链接下载应用程序，这是一个非常好的应用程序，用于管理redux商店的源代码。

react-native-debugger . rref ="https://github.com/jhen0409/react-native-debugger" rel="noreferrer">

现在你可以直接使用下面的链接来帮助你。

chrome-developer-tools

小开

使用可视化代码工作室调试react原生android和ios应用程序的最佳方法

步骤1。

安装React Native -全包扩展

步骤2。

使用USB调试模式连接移动设备或从android工作室打开模拟器。

步骤3。

在visual code studio中单击左侧菜单中的调试选项 单击添加配置并选择反应本地，然后创建launch.json

步骤4。

打开手机上的dev选项，按下或摇动手机，并启用远程调试js

第5步。

最后一步点击播放按钮，选择安卓系统调试或ios调试

更多信息请参考这个链接

https://medium.com/@tunvirrahmantusher/android- debugwith-vcode -for-react-native-96f54d73462a

小开

如果你想在默认情况下打开调试:

import { NativeModules } from 'react-native';


if (__DEV__) {
NativeModules.DevSettings.setIsDebuggingRemotely(true)
}

要让它在Android上工作:

npm install --save react-native-devsettings-android
react-native link react-native-devsettings-android

参考:启动一个React Native应用程序，默认启用“远程调试JS”

小开

如果你想了解检查网络流量和理解原生UI视图层次结构。通过其可扩展的插件API, React Native Update版本为调试移动应用程序提供了开发人员工具。

Flipper是一个调试移动应用程序的很棒的开发工具。该工具随react-native 62一起发布

小开

首先在你的ios模拟器中，如果你按[command + D]键，然后你可以看到这个屏幕。

enter image description here

然后单击远程调试JS按钮。

之后你可能会看到这样的React本机调试器页面。

enter image description here

然后打开你的检查器[f12]，去控制台选项卡调试它!：）

小开

官方解决方案是Flipper🚀

鳍状肢是Android &iOS Mobile调试工具，无需在react native中使用调试模式。

从RN 0.62开始(参见此链接)， 鳍状肢使用默认项目初始化。

Flipper有一些用于调试的插件。这些插件包括Layout， Network， Shared preferences

Flipper最大的好处不是有很多插件，但你可以很容易地看到Android / iOS设备控制台调试。

Flipper也会提醒你崩溃或网络拒绝。

enter image description here

布局插件包括辅助模式和目标模式。

enter image description here

您还可以在应用程序中看到原始网络请求/响应。

小开

使用鳍状肢或reactotron。每一种都有自己的好处，没有一种要求您启用调试模式，所以您的环境不会变慢!

小开

在模拟器上，按Cmd+D并选择调试将打开浏览器调试器


提交答案