问题标签 [react-devtools]

我正在构建 ReactApp，并使用 React-Dev-Tools 进行调试，

在测试组件的状态时，它并排显示两个菜单，在<React/> code状态值的左侧和右侧。

调试屏幕垂直分为两部分。

但是，我正在关注一个教程，其中这些菜单是水平划分的，与我的相比，它们看起来更高效且更具可读性。

由于水平对齐，导师的屏幕 = 更具可读性的代码。

但是我的屏幕空间因为这样的垂直划分而被浪费了，

我还在底部尝试了停靠（调试器菜单），但它更具可读性。

尽管我在调试菜单中重置了设置，但如何在 chrome 工具中水平对齐两个菜单/选项卡？

编辑1：得到解决方案后。

增加字体大小后，屏幕没有垂直分割，我得到了和我导师一样的 chrome-dev-tools-screen。

使用 Chrome / React 开发人员工具调试我的 React 应用程序时，我看到了我的应用程序的两个实例。有没有人经历过这个？它实际上是渲染两个实例还是只是开发人员的错误？

是我的整个 App.js，App 有一个导出。

重新渲染区域与 chrome 的反应开发工具的突出显示更新的 chrome 的油漆闪烁不同。

只应突出显示警报编号。

[

没有关于如何将 React Devtools 集成到自定义 React 渲染器的文档，并且 React DOM 和 React Native 等官方 React 渲染器采用定制的方法来集成 React Devtools，这使得研究它们变得困难（并且可能毫无结果）。

有一篇关于这个主题的文章，但提到了一个过时的 API（所以我不会费心引用它）。

React Hardware的实现提供了研究的基础，但它是否工作还不清楚（作为入口文件，InitializeJavaScriptAppEngine.js不再导入代码库中的任何地方，并且导入存储库中不再存在的文件或node_modules）。

至少，我可以看到将涉及 WebSocket 通信。我的自定义渲染器是适用于 iOS 和 Android 的跨平台渲染器；我需要为这些平台中的每一个安装一个 WebSockets 库（我认为这是最有意义的），还是 WebSockets 仅在基于 Node.js 的打包服务器上运行？

react-devtools-core将（截至v3.6.1）集成到我的自定义 React 渲染器中所需的最少步骤是什么？

我的 kotlin 应用程序中有一个端点，如下所示：

我正在设置一个响应，jsonObject如果用户通过身份验证或UNAUTHORIZED用户未通过身份验证，我应该发送一个响应。当我在浏览器中测试这个端点时，我只是得到status unknown了那个请求——当我调试后端时，否则我200没有响应数据。如果我在邮递员中测试它，我会得到 json 作为响应。我看到正在构建令牌，并且后端的一切看起来都很好，但是没有在浏览器中加载响应。

我从反应中获取它是这样的：

在控制台中，我只能看到“到达这里”被记录下来，没有其他内容，并且前端因错误而崩溃：

DevTools 无法加载源地图：无法加载数据内容：application/json;charset=utf-8;base64, longTokenString...：由于重新加载检查页面而取消加载

我在这里做错了什么？

更新

我在这里发现了一个问题，我还有 2 个useEffect函数，并且在我得到结果之前它们正在重定向。我不确定为什么useEffect当初始状态没有变化时，我传递错误状态变量的函数会运行？

这是完整的代码：

更新编号。2：

我已经删除了不必要的错误 useEffect 函数，但现在我得到了：

警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要解决此问题，请在 useEffect 清理函数中取消所有订阅和异步任务。

我收到此警告，并且在获取令牌后它也没有重定向。这次我做错了什么？

我正在尝试使用 electron-devtool-installer 向电子应用程序添加“react-performance-devtool”扩展。

当我尝试使用文档中提到的扩展名之一时，它工作正常，但使用任何其他扩展名时出现错误。

我正在尝试这样的事情：

我收到以下错误：

React 开发者工具显示我正在使用过时版本的 react 的消息。我正在使用非常旧的 0.14.2。但是更新对最新版本的反应会破坏很多代码。我想升级到目前尚未被认为过时的版本，并考虑稍后升级到最新版本。

我觉得 15.6.2 是我可以升级到的最好的版本，无需更改代码。但是根据 React Developer Tools，我怎么知道那个版本是否也过时了？

我正在开发一个我仍然熟悉的 React-Redux 微服务应用程序，在克隆它并在 localhost 环境中启动它后，我在控制台中看到了这个错误：

项目MemberBenefitInterests中的代码库中没有引用，但是当我检查 React Web DevTools 它在实体- >首选项- > 它有一个对象数组时，这个属性确实存在于状态中：

所有内部偏好。我不清楚，但似乎消息说最后一个无效，但为什么呢？

我以为我在项目中彻底搜索了一个SettingsPage并没有找到，但是当我再次尝试时，我在里面找到了这个App/account/components/BaseSettingsPage：

我正在使用 react build 并尝试从 create-react-app 目录之外的文件夹中导入一些文件。它不允许我这样做，所以我尝试在目录内创建文件夹的符号链接。然后我从 react-dev-utils/ModuleScopePlugin.js 收到错误，似乎 react 对符号链接不太满意？当我用实际文件夹替换符号链接文件夹时，一切正常。

我已经安装了 React Developer Tools Chrome 浏览器扩展。但是我在开发人员工具中看不到 React 选项卡，而是有名为“组件”和“分析器”的新选项卡。

我重新安装了扩展程序，重新启动了浏览器和计算机，检查了 chrome://extensions/ 下的“允许访问文件 URL”。我使用 react https://reactjs.org/tutorial/tutorial.html导航到一个 url，但没有出现 react 标签。但是 chrome 插件（浏览器右上角的反应检测器）表明其中有 react.js。如何让 React 选项卡出现？

我正在使用“反应”：“16.8.6”