你如何调试react-native?

ut_eos 发布于 2019-06-30 debugging 最后更新 2019-06-30 12:13 171 浏览

在应用程序模拟器中运行应用程序时,如何使用react-native调试其反应代码?

已邀请:

dipsam

赞同来自:

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

adb shell input keyevent 82
它会提示像图像一样的屏幕 enter image description here 然后选择
debug JS Remotely
它将自动打开一个新窗口。然后打开检查元件或按F12键进入控制台。

ynulla

赞同来自:

模拟器中的 Cmd + D 。它会弹出Chrome,然后你可以使用开发人员工具。 编辑: 现在,它已在help docs中链接。

fdolor

赞同来自:

调试React Native Apps 要调试您的react应用程序的javascript代码,请执行以下操作:
  1. 在iOS模拟器中运行您的应用程序。
  2. Command + D,网页应在http://localhost:8081/debugger-ui处打开。 (仅适用于Chrome)或使用Shake Gesture
  3. 启用Pause On Caught Exceptions以获得更好的调试体验。
  4. Command + Option + I打开Chrome开发者工具,或通过View - > Developer - > Developer Tools打开它。
  5. 您现在应该可以像往常一样进行调试。

可选 为Google Chrome安装React Developer Tools扩展程序。如果在打开开发人员工具时选择React选项卡,则可以导航视图层次结构。

Live Reload 要激活Live Reload,请执行以下操作:
  1. 在iOS模拟器中运行您的应用程序。
  2. Control + Command + Z
  3. 现在,您将看到Enable/Disable Live ReloadReloadEnable/Disable Debugging选项。

aut_ea

赞同来自:

我没有足够的声誉评论以前的答案,这些答案很棒。 :) 以下是我在开发react-native app时调试的一些方法。

  1. 实时重新加载 react-native使用⌘+ R键可以非常轻松地查看更改,甚至可以启用实时重新加载,而watchman将使用最新更改“刷新”模拟器。如果出现错误,您可以从该红色屏幕的行号中获取线索。一些撤消将让您回到工作状态并重新开始。
  2. console.log('yeah, seriously.') 我发现自己更喜欢让程序运行并记录一些信息而不是添加debugger断点。 (艰难的调试器在尝试使用外部软件包/库时非常有用,它带有自动完成功能,因此您可以了解可以使用的其他方法。)
  3. Enable Chrome Debugging,程序中有debugger;断点。
那么这取决于您遇到的错误类型以及您如何调试的偏好。对于大多数undefined is not an object (evaluating 'something.something'),方法1和方法2对我来说已经足够了。 而处理外部库或其他开发人员编写的包需要更多的工作来调试,因此像Chrome Debugging这样的好工具 有时它来自本地反应平台本身,所以谷歌搜索反应原生问题肯定会有所帮助。 希望这有助于那里的人。

tfugit

赞同来自:

假设您要在Android模拟器上显示此菜单  enter image description here

  • 然后,尝试使用⌘+m在Mac上的Android模拟器上弹出此开发设置对话框。
  • 如果没有显示,请转到AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input boxenter image description here
  • 然后重试⌘+m
  • 如果它仍未显示,则转到正在运行的仿真器设置,然后在Send keyboard shortcuts to组合框/下拉列表中选择Emulator controls (default)选项。
enter image description here
  • 然后重试⌘+m
  • 我希望这有帮助,它对我有用。

uet

赞同来自:

还有一个非常好的debuger名称Reactotron。 https://github.com/infinitered/reactotron 您不必处于调试模式以查看某些数据值,并且有很多选项。 去看看真的很有用。 ;)

vsit

赞同来自:

cmd + D奇怪地对我不起作用。在iOS模拟器中按ctrl + cmd + z确实为我启动了调试浏览器窗口。这是弹出的屏幕:

React Native debugging options 更多细节:https://facebook.github.io/react-native/docs/debugging.html#content

oqui

赞同来自:

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

amodi

赞同来自:

很简单只有两个命令

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

gsint

赞同来自:

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

wanimi

赞同来自:

adb logcat *:S ReactNative:V ReactNativeJS:V
在Android日志终端中运行此命令。

bquos

赞同来自:

对于Android应用程序,如果您正在使用Genymotion,您可以通过按CMD + m切换菜单,但您可能必须通过执行此操作在菜单中启用它。

  • Untick untick widget
  • 通过CMD + m启用它,点击chrome中的调试

bnemo

赞同来自:

对我来说,在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')

lvero

赞同来自:

在文件路径中有空格可防止 Cmd + D 起作用。我将项目移动到没有空间的位置,我终于让Chrome调试器工作了。看起来像bug

uqui

赞同来自:

  1. 如果您使用的是模拟器,请使用 Ctrl + M &模拟器 Cmd + D
  2. 点击 - 远程调试js
  3. Google Chrome转到控制台

met

赞同来自:

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

debugger; //breaks execution
您的chrome dev工具必须打开才能工作

uet

赞同来自:

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

nquis

赞同来自:

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

const TAG = 'APP_NAME+SCREEN_NAME';
然后在需要的地方,我会做:console.log(TAG + 'ACTION'); 这样,我可以跟踪操作并查看日志语句的来源。

mqui

赞同来自:

  1. 在模拟器中运行您的应用 - react-native run-ios
  2. 按ctrl + d并单击Debug JS Remotely
enter image description here
  1. 网页应该在http://localhost:8081/debugger-ui打开,如果没有输入网址并转到Chrome中的此链接
  2. 右键单击页面并单击Inspect,它应该打开chrome的开发人员工具
enter image description here
  1. 转到顶部菜单中的来源,在右侧文件资源管理器中找到您的js类文件
  2. 您可以在视图中放置断点并调试其中的代码,如图所示。

pullam

赞同来自:

您可以通过两种方式进行调试:

console.log(toDebugObject); 
这将在xcode或android studio的控制台中打印对象。 如果通过ip连接模拟器或设备,则可以看到输出 启用Debug JS Remotely(ios模拟器上的cmd + D,以及android studio模拟器上的ctrl + m cmd + m)并打开locahost:8081(或你输入的端口)并打开浏览器的控制台。 (我刚刚使用Chrome,我不太确定其他人)。 或者您可以使用:
console.warn();
它作为黄色框打印在应用程序的屏幕上。这可以让你的应用程序有点慢,并记住总是擦除(日志和警告)。

hipsum

赞同来自:

如果您在Atom编辑器中使用Nuclide进行React Native App开发,那么您还可以使用“Element Inspector”来帮助观察道具和状态值在应用程序在开发阶段在设备上运行时的变化。 在此了解更多 - https://nuclide.io/docs/platforms/react-native/#element-inspector enter image description here

grem

赞同来自:

您可以使用expo进行调试:https://expo.io/

Expo lets web developers build truly native apps that work across both iOS and Android by writing them once in just JavaScript. It's open source, free and uses React Native.
这是一个很棒的工具,你可以在React Europe conf上观看这个研讨会: https://www.youtube.com/watch?v=HygXkQDMSGU&t=6675s

gipsam

赞同来自:

在Windows中并使用Android模拟器,您可以执行以下步骤:

  1. 模拟器运行并在其上运行应用程序后,按“菜单”按钮,然后选择“远程调试JS”或“在Chrome中调试”(这取决于模拟器的使用)。您可以看到下一个图像作为参考:emulator with steps image
  2. 系统会显示新的Chrome标签。您必须按Ctrl +⇧J以显示开发人员工具并开始跟踪调试步骤。 See this image as reference
此外,您应该使用console.log()功能来使调试过程更具描述性。

hculpa

赞同来自:

默认情况下,我的ios模拟器没有接受击键,这就是为什么cmd-D不起作用的原因。我必须使用模拟器的菜单打开键盘的设置: 硬件>键盘>连接键盘 现在cmd-D启动了chrome调试。

lsint

赞同来自:

您可以从brew安装React Native Debugger。它比使用chrome的调试器更舒适

det

赞同来自:

如果您使用的是Microsoft Visual Code,请安装React Native Tools扩展。然后,您只需单击所需的行号即可添加断点。 请按照以下步骤设置和调试应用程序: SETUP RUN 如果您使用它,请不要忘记在模拟器中启用Debug JS Remotely。

kaut

赞同来自:

调试您的react本机应用程序只需转到以下地址: 本地主机:8081 /调试器的用户界面 在您的默认浏览器(chrome)和打开的开发人员工具中调试您的react本机应用程序

xsint

赞同来自:

enter image description here 试试这个程序:https://github.com/jhen0409/react-native-debugger 适用于:windowsosxlinux。 它支持:react nativeredux 您还可以检查虚拟组件树并修改应用程序中反映的样式。

kqui

赞同来自:

它实际上非常简单。只需按cmd D(如果在Mac上),模拟器将创建一个弹出菜单。从那里只需单击“远程调试JS”或类似的东西。请注意,在执行与某些软件包相关的代码时运行调试程序会让人产生问题。我遇到了react-native-maps和调试器的问题。但这是固定的。在大多数情况下,你应该没事。

sunde

赞同来自:

在你的应用程序在android模拟器中运行时,可以通过导航到Chromium或Firebug中的http://localhost:8081/debugger-ui来调试Debian 8(Jessie)上的react-native 0.40.0。要访问应用内开发人员菜单,请在另一个终端窗口中运行以下命令,如here所示: adb shell input keyevent 82