你如何调试React Native?

2020/10/29 22:44 · ios ·  · 0评论

当应用程序在应用程序模拟器中运行时,如何使用React Native调试其React代码?

Cmd+D从模拟器中。它将弹出Chrome,然后您可以在其中使用开发者工具。

编辑:

现在已将其链接到帮助文档中

调试React Native Apps

要调试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. 您现在应该能够像往常一样进行调试。

可选的

安装适用于Google ChromeReact Developer Tools扩展。如果React在开发人员工具打开时选择选项卡,这将允许您浏览视图层次结构

实时重载

要激活实时刷新,请执行以下操作:

  1. 在iOS模拟器中运行您的应用程序。
  2. Control + Command + Z
  3. 现在Enable/Disable Live Reload您将看到ReloadEnable/Disable Debugging选项。

对于Android应用程序,如果您使用的是Genymotion,则可以通过按来切换菜单CMD + m,但是您可能需要在菜单中启用它。


  • 取消勾选小部件
  • 通过CMD + m单击Chrome中的调试启用它

如果要在Windows上使用android设备进行调试,只需打开命令提示符,然后键入(确保adb正常运行)

adb shell input keyevent 82

它将提示类似图像的屏幕
enter image description here

然后选择

debug JS Remotely

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

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

例:

debugger; //breaks execution

您的Chrome开发人员工具必须处于打开状态才能正常工作

enter image description here

尝试以下程序:https : //github.com/jhen0409/react-native-debugger

适用于:windowsosxlinux

它支持:react nativeredux

您还可以检查虚拟组件树并修改应用程序中反映的样式。

cmd ⌘+D奇怪的是对我没用。在iOS模拟器中ctrl+ cmd ⌘+Z确实为我启动了调试浏览器窗口。

这是弹出的屏幕:

React Native debugging options

这里有更多细节。

在您的应用程序在Android模拟器中运行时,通过导航至Chromium或Firebug中的http:// localhost:8081 / debugger-ui可以在Debian 8(Jessie)上调试react-native 0.40.0 要访问应用内开发人员菜单,请在此处指出的另一个终端窗口中运行以下命令

adb shell input keyevent 82

我没有足够的声誉来评论以前的答案,很好。:)这是我在开发react-native应用程序时如何调试的一些方法。

  1. 实时重装

    react-native使得使用⌘+ R键查看更改非常容易,甚至只需启用实时重新加载功能,值班人员就会使用最新更改“刷新”模拟器。如果出现错误,则可以从红色屏幕的行号中获得线索。撤消几次后,您将回到工作状态并重新开始。

  2. console.log('yeah, seriously.')

    我发现自己比添加debugger断点更喜欢让程序运行并记录一些信息(艰难的调试器在尝试使用外部软件包/库时非常有用,并且具有自动补全功能,因此您知道可以使用哪些其他方法。)

  3. Enable Chrome Debuggingdebugger;在程序中断点。

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

而处理其他开发人员编写的外部库或包将需要更多的精力来调试,因此,一个好的工具如 Chrome Debugging

有时它来自于本机平台本身,因此搜索本机问题肯定会有所帮助。

希望这可以帮助某人。

Cmd+M对于F10Windows模拟器,请按Windows中的代替模拟器开始显示所有反应本机调试选项。

image

adb logcat *:S ReactNative:V ReactNativeJS:V

在终端中运行此Android日志。

如果您使用的是Microsoft Visual Code,则安装React Native Tools扩展。然后,您只需单击所需的行号即可添加断点。请按照以下步骤设置和调试应用程序:
SETUP
RUN

如果使用它,请不要忘记在模拟器中启用“远程调试JS”。

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

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

确保您有铬。

在显示的菜单上,选择Debug JS Remotely Option。

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

那里显示控制台,您可以看到记录的日志。

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

  1. 在模拟器中运行您的应用-react-native run-ios
  2. 按ctrl + d并单击“远程调试JS”

enter image description here

  1. 网页应在http:// localhost:8081 / debugger-ui处打开,如果未输入URL并转到Chrome中的此链接
  2. 右键单击页面,然后单击“检查”,它将打开用于chrome的开发人员工具

enter image description here

  1. 转到顶部菜单中的源代码,并在右侧文件浏览器中找到您的js类文件

  2. 您可以在视图中放置断点并在其中调试代码,如在镜像中所见。

默认情况下,我的ios模拟器不接受按键操作,这就是cmd-D无法正常工作的原因。我必须使用模拟器的菜单打开键盘的设置:

硬件>键盘>连接键盘

现在,cmd-D启动chrome调试。

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

如果要默认启用调试:

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

参考:启动默认启用“远程调试JS”的React Native应用

有在文件路径的空间防止Cmd+D从工作。我将项目移到没有空间的位置,终于使Chrome调试器正常工作。好像是个虫子

首先在ios模拟器中,如果按[command + D]键,则可以看到此屏幕。

enter image description here

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

之后,您可能会看到这样的React Native Debugger页面。

enter image description here

然后打开您的检查器[f12],然后转到控制台选项卡对其进行调试!:)

React Native 0.62发布-官方解决方案是Flipper🚀

Flipper是Android&iOS Mobile调试工具,未在react native中使用调试模式。

从RN 0.62(请参阅此链接)开始,使用默认项目初始化Flipper

Flipper有一些用于调试的插件。这些插件包括LayoutNetworkShared preferences

Flipper的最大好处就是没有很多插件,但您也可以轻松地看到Android / iOS设备控制台的调试信息。

Flipper也会提醒您有关崩溃或网络拒绝的信息。

enter image description here

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

enter image description here

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

非常简单,只需两个命令

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

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

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

  • 如果未显示,请转到AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box
    enter image description here

  • 然后重试⌘+m

  • 如果仍然无法显示,请转到正在运行的仿真器设置,Send keyboard shortcuts to然后组合框/下拉列表中选择该Emulator controls (default)选项。

enter image description here

  • 然后重试⌘+m

  • 我希望这会有所帮助,对我有用。

如果您使用的是Redux,我强烈建议您使用React Native Debugger。它包括Chrome开发者工具,也有Redux开发者工具和React开发者工具。

Redux Devtools:这使您可以查看您的操作,并在这些操作之间来回移动。它还允许您查看您的redux存储,并具有自动将每个操作的前一状态与更新后的状态进行区分的功能,因此您在一系列操作中来回移动时可以看到。

React Devtools:这使您可以检查某个组件,即所有组件的道具及其组件状态。如果您的组件状态为布尔值,则可以单击它来切换它,并查看应用程序在更改时的反应。很棒的功能。

Chrome Devtools允许您查看所有控制台输出,使用断点,在调试器上暂停;等。标准调试功能。如果右键单击Redux Devtools中列出您的操作的区域,然后选择“允许网络检查”,则可以在Chrome Devtools的网络标签中检查API调用,这很不错。

总而言之,将这些全部放在一个地方真是太棒了!如果您不需要其中之一,可以将其打开/关闭。获取React Native Debugger并享受生活。

这是使用react native调试器应用程序的另一种方法。

您可以使用下面的链接下载应用程序,它是用于管理redux存储以及源代码的非常好的应用程序。

反应本机调试器

现在,您也可以直接使用下面的链接为您提供帮助。

chrome开发人员工具

  1. 如果您使用模拟器,请使用Ctrl+ M&模拟器Cmd+D

  2. 点击-远程调试js

  3. Google Chrome浏览器进入控制台

还有一个非常好的调试器名称Reactotron。
https://github.com/infinitered/reactotron

您不必处于调试模式即可查看某些数据值,并且有很多选择。

去看看真的很有用。;)

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

  • 要在IOS中进行调试

cmd + d

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

  • 在android中调试

触摸设备(确保您的开发人员选项已启用)

第1步:
debugger您想停止脚本的位置放在任何地方,例如:

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

一旦有控制权进入此代码块,这将使调试器暂停。

步骤2:Cmd+Dios模拟器Android模拟器Cmd+M
如果您拥有真正的设备,请摇动设备以打开开发菜单,如果您不想摇动设备,请关注此博客

第3步:
选择
Enable Remote JS Debugging,这将打开Chrome

enter image description here

步骤4:
选择
Developer Tools.

enter image description here

第5步:Sources无论您debugger在代码中写过什么,
调试器都会在
选项卡中暂停转到控制台,然后键入要调试的任何参数(代码块中存在),例如:
enter image description here
要移至下一个调试器点,请再次移至Sources->单击Resume script执行按钮(右上角的蓝色按钮)。

将调试器放置在您想暂停脚本的任何位置。

享受调试!

您可以使用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
本文地址:http://ios.askforanswer.com/niruhediaoshireact-native.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!