标签: react-devtools

是否可以右键单击 React Dev 工具下可见的组件，然后单击“在 IDE 中显示”，从而在 VSCode 中打开该文件。这将是有益的，因为我不必去寻找该组件。我经常想在 VS Code 中查看某个组件的源代码，但由于组件的模块化复用，代码库太大，名称重叠，组件结构不模仿页面结构，很难找到准确的组件如果您是代码库的新手。如果有一种方法可以简单地使用 React 开发工具中的组件选择器工具，则单击突出显示的组件即可转到 IDE 中的文件。

我需要调试一些在我的 React 应用程序中使用的道具。但是，如果我尝试检查某些组件，它们会显示为“正在加载...”而不是正常的道具列表：

但是，我知道这些组件已经呈现，就像我在 DOM 中看到的那样。此外，它永远保持这样，所以它显然实际上并没有加载任何东西。

我正在使用 React DevTools4.2.1-3816ae7c3和 React16.12.0

React Devtools Profiler（FlameGraph 或排名视图）中是否有我错过的搜索功能？我想看看我的新组件花了多少时间MyGreatComponent进行渲染，但它“隐藏”在所有其他组件之间并且不容易找到。

使用 React 开发工具和 Profiler，有没有办法启动 Profiler 并重新加载页面？类似于 Chrome 开发工具具有开始分析和重新加载页面的按钮。

目前，如果我启动探查器并刷新页面，它就会停止探查器。

我刚刚将 a 从基于类更新为功能组件。

当我查看 React 的 DevTools 时，我通常会看到我的组件以Gallery所有命名的状态变量命名。

但是现在，我所看到的只是一个以_default一堆非描述性State:定义命名的组件。

从其他答案中，我读到 React Dev Tools 现在支持钩子，但我没有看到任何组件名称错误的示例。

这是正常行为还是我做错了什么？

版本

反应 16.9.0

React 开发者工具 Chrome 扩展： 4.1.1

在 Firefox 中也遇到同样的问题。

组件代码

// The component
import React, { useState, useEffect } from 'react';

const Gallery = ({ images, layout }) => {
  const [showLightbox, toggleLightbox] = useState(false);
  const [activeImage, setActiveImage] = useState(false);

  return (
    // Some JSX here
  )
};

渲染代码

// Rendering the component
import React from 'react'; …

假设我们有一个父组件和多个功能子组件。我想清楚地知道父级是否重新渲染，子级是否重新渲染。

在阅读了几篇文章后，我了解到我们可以通过 3 种方法来检测重新渲染。（如果还有更多方法，请告诉我。）

1. 将 a 放入console.log子组件中。

2.在设置中使用Chrome油漆闪烁选项。

3.使用React开发工具

所有这些方法都可以正确地了解组件是否真的重新渲染吗？因为它似乎不能与 React.memo 一起正常工作。

console.log当我用 React.memo 包装子组件时，当父组件重新渲染时，它不会打印，这是正确的。但仍然使用 Chrome 和 React 开发工具突出显示子组件，就像它重新渲染一样。

CodeSandbox： https: //codesandbox.io/s/bold-cloud-iv0rv （如果我们添加一辆新车，静态组件仍然以绿色突出显示，但根据备忘录，它不应该重新渲染。）

现在我怀疑，油漆闪烁是否无法正常工作或 React.memo 有问题？

React 开发者工具用于显示组件被渲染的原因，例如由于状态更改、上下文更新或由于父级的重新渲染。在火焰图中无法再找到此信息。

他们是否删除了它，或者是否有一些先决条件才能包含此信息？

安装React Devtools后,我可以通过以下方式获得商店:

$r.store.getState()

如何在没有React Devtools的情况下做到这一点？

我有一个由一个对象组成的组件，该对象包含一个对象数组，而对象数组又包含键和字符串

this.state = {
  dinosaurs: [
    { era: "jurassic", name: "diplodocus", diet: "herbivore" },
    { era: "cretaceous", name: "velociraptor", diet: "carnivore" },
  ]
}

当我在 React devtools 中打开该组件时，我发现我可以通过双击这些字符串来编辑字符串，例如"jurassic"或"diplodocus"，但我显然无法更改“era”等键或恐龙数组。但是，可以使用 React DevTools 更改它，但我做得不正确。

我在 Google DevTools 中使用 React DevTools。

使用 React DevTools 可以或不可以更改组件状态中的哪些内容？

我尝试查看 GitHub 自述文件，我可以在部分侧窗格中看到编辑状态的提及，但没有提及可以编辑和不能编辑的内容。

我查看了如何从浏览器设置 React 组件状态和属性，但有一条评论告诉用户阅读 React DevTools 的友好手册，以及没有解决使用 React DevTools 可能或不可能的答案。

最近我开始使用react-native进行开发。当尝试在浏览器（Chrome）上使用react-devtools扩展进行调试时，我只能访问控制台，因为所有组件和元素都是在devtools网页（http://localhost:8081/debugger）中显示的-ui/) 所以现在我正在尝试使用react-native独立版本，但它正在“等待React连接..”，我在底部收到一条消息说“服务器正在侦听端口8097”。

我对端口了解不多，但在我看来，应用程序位于一个端口（8081）上，而react-devtools正在监听另一个端口（8097）。

我adb reverse tcp:8097 tcp:8097在运行react-devtools之前尝试使用，但没有什么区别。

如何检查我的应用程序正在侦听哪个端口？

如何让独立的开发工具运行？

如果有人可以将我链接到有关没有背景的人的端口的良好文档，那也将非常好。