标签: react-native-debugger

React Native Debugger与React的连接无法与Expo Client一起使用

[2019年3月20日更新:如果您遇到此问题,请在此处查看我的帖子!]

我正在使用Expo和React Native制作一个移动应用程序。我想将React Native Debugger集成到我的项目中以进行React和Redux调试。但是遇到麻烦了。

专门连接到react devtools失败。我认为这是因为我正在使用Expo客户端(通过wifi连接的真实设备)。

根据文档,我应该走这条路。

在此处输入图片说明

由于我的Expo版本是25.0.0,因此RN版本是0.52。因此,我必须编辑setupDevtools.js。

问题是,这个文档让我感到困惑。而且我不确定我是否在做正确的事情。到目前为止,如下所示,我已将主机更改为我的IP地址。但这没有用。我想我做错了。有人可以帮忙吗?提前致谢。

const host = PlatformConstants && PlatformConstants.ServerHost ?
      PlatformConstants.ServerHost.split(':')[0] :
      'localhost';

    reactDevTools.connectToDevTools({
      isAppActive,
      host: "116.0.157.7",
      // Read the optional global variable for backward compatibility.
      // It was added in https://github.com/facebook/react-native/commit/bf2b435322e89d0aeee8792b1c6e04656c2719a0.
      port: window.__REACT_DEVTOOLS_PORT__,
      resolveRNStyle: require('../../StyleSheet/flattenStyle'),
    });
Run Code Online (Sandbox Code Playgroud)

reactjs react-native expo react-native-debugger

5
推荐指数
0
解决办法
603
查看次数

连接到10.0.2.2而不是localhost的React-native android调试器

在运行app时react-native run-android连接到10.0.2.2:8081而不是localhost:8081并且无法调试.

有谁知道如何修复,以便它将连接到localhost而不是?

android-emulator react-native react-native-android react-native-debugger

5
推荐指数
2
解决办法
5467
查看次数

使用 composeWithDevTools() 时是否应该将 Redux Devtools Extension 作为开发依赖项安装?

我决定将 RNDebugger 和 Redux Devtools 扩展包添加到我的应用程序中,以帮助调试以及稍后使用 redux persist 进行测试(我尚未实现)。因此,我现在为我的 React Native 应用程序的状态架构使用以下包:React Redux、Redux、Redux Thunk、RNDebugger 和 Redux Devtools Extension。根据其文档,RNDebugger 和 Redux Devtools 扩展已作为开发依赖项安装。我在创建 redux 存储时使用 composeWithDevTools 函数。所以我想知道,由于 composeWithDevTools 函数是 Redux Devtools 扩展包的一部分,我是否必须安装 RNDebugger 和 Redux Devtools 扩展作为生产依赖项?我不想在生产中使用调试器,但我也不希望应用程序在进入生产时失败,因为 composeWithDevTools 函数未知。我的代码工作正常,我可以在 RNDebugger 中看到 redux 存储(很好!)。尽管如此,这是我的基本设置:

// Store.js
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from "redux-devtools-extension";
import ReduxThunk from 'redux-thunk';
import reducers from '@reducers/';

export default createStore(
  reducers,
  composeWithDevTools(
    applyMiddleware(ReduxThunk)
  )
);
Run Code Online (Sandbox Code Playgroud)
// App.js
import React, { Component } …
Run Code Online (Sandbox Code Playgroud)

react-native redux react-redux redux-devtools-extension react-native-debugger

5
推荐指数
0
解决办法
2951
查看次数

远程调试 JS 未显示在 Android Stuido 模拟器的开发人员工具选项中

我正在尝试设置 react-native-debugger 独立工具。Metro 和调试器都连接到本地主机上的端口 8081,但它们似乎没有相互连接。调试器卡在“等待客户端连接”上。最重要的是,当我使用 ctrl+m 打开开发工具时,没有远程调试选项,只有调试,这会导致应用程序崩溃,控制台没有错误消息。谁能告诉我我可能做错了什么?

在此处输入图片说明

在此处输入图片说明

在此处输入图片说明

android react-native redux react-redux react-native-debugger

5
推荐指数
0
解决办法
557
查看次数

无法让 React Native 调试器在 Ubuntu 中工作:“等待 React 连接”消息

我已经在 Ubuntu 20.04 上的 React Native 中设置了一个应用程序,并尝试连接 React Native 调试器。我已经从 .deb 文件安装了调试器,然后在启动 Android 模拟器之前从启动器启动它。在调试器上,我收到一条“正在等待 React 连接...”消息。如果我导航到:

http://localhost:8081/debugger-ui/

当 React Native Debugger GUI 运行时,我看到“另一个调试器已连接”消息,当我退出调试器时,该消息消失。所以它正在做一些事情并且那里有一些联系。

我是否遗漏了任何步骤?我的印象是它应该开箱即用。

React-native版本是0.63.2,调试器是0.11.4

react-native react-native-debugger

5
推荐指数
1
解决办法
7195
查看次数

React Native 调试器“不支持的 DevTools 后端版本”

当我尝试使用 React Native Debugger 调试我的应用程序时,出现以下错误:“

来自 React Native 调试器的错误

然后我执行该指令。安装react devtool,什么也没有发生。我想,也许,我在安装软件包时遇到了一些错误,所以我运行react devtools并看到当前版本 4.23.0

反应开发工具版本

所以有人知道我如何解决这个问题吗?

debugging reactjs react-native react-devtools react-native-debugger

5
推荐指数
1
解决办法
4277
查看次数

Expo SDK 48 上的 React Native 调试器

我无法从 Android Studio< Expo SDK 48 运行 React Native 调试器。开发人员菜单中没有“调试远程 JS”项目,但我有“打开 JS 调试器”项目。当我选择它时,就会显示 Devtools。但在 React Native Debugger 中,我的设备未连接到端口 19000。

我阅读了文档并安装了许多库,但还没有工作。

debugging reactjs react-native react-native-debugger

5
推荐指数
1
解决办法
2149
查看次数

如何使用Expo和vscode调试react-native-web?

我试图找到如何调试react-native-web应用程序(特别是使用Expo和vscode)。

我既没有在网络上也没有在react-native-web自己的网站上找到指导。

React Native Tools附带的调试配置旨在在 Expo 应用程序中运行,但我的目的是使用浏览器来调试/测试 React-Native-Web 行为。

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug in Exponent",
            "request": "launch",
            "type": "reactnative",
            "cwd": "${workspaceFolder}",
            "platform": "exponent",
            "expoHostType": "local"
        }
    ]
}
Run Code Online (Sandbox Code Playgroud)

react-native react-native-web expo react-native-debugger react-native-tools

4
推荐指数
1
解决办法
1901
查看次数

无法使用 React Native 调试器进行调试

我正在按照自述文件 ( mcnamee/react-native-starter-kit ) 中的说明启动项目。我在注册时将我的 firebase 与应用程序集成在一起,它卡在微调器上......虽然将电子邮件和密码保存到 firebase 并且它登录没有问题。我想在我点击注册按钮时调试发生了什么,但它没有显示任何操作等,也没有显示在本机调试器应用程序中。为什么本机调试器无法连接到我的应用程序。我该如何解决这个问题?

在此处输入图片说明 在此处输入图片说明

react-native expo react-native-debugger

3
推荐指数
2
解决办法
6666
查看次数

使用本机调试器查看网络流量

我正在使用 create-react-native-app(所以,Expo)开发 React Native 应用程序,使用我的网络 IP 地址(192.xxx.xxx.xxx)在真实设备上进行测试。我已经设法远程启动并运行和调试 react-native-debugger。它在 3 个单独的窗口中打开 rn-debugger、redux devtools 和 chrome devtools。

我的问题是,是否可以从 Chrome 开发人员工具中看到网络选项卡的等效项,以显示进出应用程序的所有网络流量(例如,当我的应用程序使用 Axios 调用 API 时)?

Chrome 开发工具窗口中的实际网络选项卡大概只是显示调试器和本地设备上运行的应用程序之间的网络流量,所以它只显示调试器使用的 websocket 内容,而不是我的应用程序的网络流量。

为了解决这个问题,我可以在发出请求时对控制台进行大量日志记录,但作为 Web 开发人员,我习惯于能够在一个方便的视图中查看所有标头、json 和计时等。

react-native expo react-devtools react-native-debugger

3
推荐指数
1
解决办法
9635
查看次数