嗨，您好。 我也有同样的问题。 也许此信息会有用：
1）当我打开SPA的某些“页面”（设为P1 ）时，然后打开DevTools我看不到“组件”和“探查器”选项卡。
2）我关闭DevTools
3）然后我切换到SPA的另一个“页面”（设为P2 ）
4）我在P2打开DevTools
5）现在我看到“组件”和“探查器”选项卡
6）在不关闭DevTools的情况下，我切换回P1 ，RDD扩展的两个选项卡仍在此处，利润:)

@ Roman-Popov您能可靠地重现吗？ p1和p2是什么有关系吗？ （如果关于应用程序的某些事情似乎很重要，您可以以某种方式与我分享它们，以便我进行复制吗？）

还有哪个浏览器+操作系统

@ Roman-Popov @bengry （或其他看到此问题并可以复制的人）如果可以复制，您是否愿意尝试新版本的DevTools（我可以在此处分享）以查看问题是否仍然存在？

我可以尝试使用＃18860进行构建。 （这是4.6-> 4.7更改集中唯一看上去甚至可疑的提交。）

@bvaughn关于p1和p2。 是的，看起来它们之间是有区别的。 P2（默认情况下未显示RDT）包含更多的dom元素。 这是一个详细信息-Redux-devtools选项卡的行为与RDT选项卡完全相同。

那https://reactjs.org/页面（@bengry提到的问题）呢-我也看到了。 但是现在再次检查，没有发现问题。 显示选项卡，一切都很好。

就我而言，项目中可能存在内存问题或类似问题。 因为如果我从P2中删除长列表，则会显示devtools选项卡。

铬v83.0.4103.61
Chrome Canary v85.0.4157.0
赢得10 Pro 1903

@ Roman-Popov感谢您提供的补充信息！

您是否有机会与我共享repro（或对其进行访问），以便我能看到最新情况？

或者，如果我在这里附加一个，您是否愿意安装一个一次性的devtools构建？ （只是看看您是否仍然可以对其进行复制）

我在SPA中遇到了相同的问题。 当我在移动设备“视图”中检查我们的应用程序时，我可以将“组件”和“探查器”选项卡显示在Chrome开发工具中（这会更改初始组件渲染）。 我刷新并更改回桌面/响应式“视图”（开发工具一直处于打开状态），这些选项卡仍然可见。

对于我们的SPA，移动桌面登录页面和桌面登录页面之间的最大区别在于，在桌面上，我们将抽屉打开并带有一个反应虚拟列表。 此抽屉未打开或无法立即在移动设备上渲染。 我不确定此信息是否有帮助，我知道这只是一个面包屑。 如果有其他发现，我会更新。

很乐意尝试自定义版本，看看它是否可以解决问题。

因为如果我从P2中删除长列表，则会显示devtools选项卡。

是的反应虚拟化。 我在上一条消息中提到的长列表中也使用了该列表。
overscanRowCount={600}为包裹列表设置。 它足够大，但是只有非常轻巧的占位符以及几个dom元素（通过按ctrl + f可使浏览器搜索通过列表）。 如果我将overscanRowCount降级

有趣。 因此，听起来问题似乎与树的大小有关，或者与单亲中的孩子数量有关……@ Roman-Popov您是否可以在代码沙箱中重现这个问题？ （因为我不能直接看P2，所以假设？）

不过在其他新闻中- overscanRowCount={600}似乎...非常高。 我不建议该值超过一位数字。 存在RV和RW是为了避免生成长列表并对其进行处理。 600表示它将渲染视口行，以及多达1200个额外的视口行。

reactjs.org是否也使用react-virtualized ？ 因为该问题也在那里为我再现（实际上，此问题以该示例为开端）。 我们确实在我们的应用程序中使用了它，但是过扫描次数较小，并且仍然在此发生。

reactjs.org是否也使用react-virtualized ？ 因为那里的问题也为我转载

在reactjs.org上对我来说工作正常。

在我们自己的应用中，我们不使用react-virtualized，但是我们可以重现该问题。

编辑：我在由create-react-app创建的新React应用上遇到相同的问题。

我认为这可能与Chrome 83有关，升级到83后开始出现此问题，并且可以在Chrome Canary 85上重现它。

使用Chromium 81的同事在使用同一应用程序时不会出现问题。

@bvaughn

overscanRowCount = {600}似乎...非常高。
....
存在RV和RW是为了避免生成和处理长列表

真的：DI了解性能。 那不是很好，而是快速的解决方案。 稍后我当然会进行某种自定义搜索：）
关于显示我的应用并尝试重现的源代码-抱歉，我想NDA等我做不到。 但是我可以尝试制作一些带有react-virtualized列表，沉重页面等的小型CRA项目。如果再次遇到此错误，请共享该存储库。 我会花一些时间进行这项调查）

我认为这可能与Chrome 83有关，升级到83后开始出现此问题，并且可以在Chrome Canary 85上重现它。

使用Chromium 81的同事在使用同一应用程序时不会出现问题。

这将是非常有用的信息，需要确认。 @ianvieira如何可靠地重现此问题？ 如果非常可靠，您可以尝试使用较旧的Chromium版本，看看是否不再可以复制吗？

如果是这样，请告诉我，我们将与Chrome小组联系。

仅尝试尝试另一件事，如果其他人可以相当可靠地解决此问题，您是否可以尝试构建此扩展程序并让我知道是否有帮助？

ReactDevTools.zip

我并不期望如此，但是我想排除WebPack的最新变化。

要安装以上扩展名：

1. 下载并解压缩到某个地方
2. 在浏览器中打开chrome://extensions/
3. 单击小开关以禁用React DevTools扩展
4. 点击“加载解压”按钮
5. 从步骤1中选择解压缩的扩展文件夹

@bvaughn我以为我可以一致地重现它，但是转到https://reactjs.org （正确显示选项卡）并在打开控制台的情况下返回到我的应用程序之后，现在它可以一致地工作了。

在Chrome Canary上，我仍然可以在带有多个节点的应用程序中一致地重现它。 我将尝试您发送的版本。

我注意到这似乎也杀死了我所有其他扩展添加的控制台选项卡。 Redux等

我注意到这似乎也杀死了我所有其他扩展添加的控制台选项卡。 Redux等

我开始怀疑这与Chrome有关。

我听到其他人的报道说Relay DevTools崩溃了，这导致React DevTools崩溃。 现在，我看到您说这也会影响Redux DevTools。

React（或Relay）不应做任何会相互影响或Redux扩展的事情。

我注意到这似乎也杀死了我所有其他扩展添加的控制台选项卡。 Redux等

我注意到了。 我刚在Chrome Canary中尝试过，在转到https://reactjs.org后，我有相同的行为，React选项卡与其他选项卡一起出现：

我之前尝试过使用https：// localhost ：3000（无法成功打开和关闭Dev Tools）和https://farfetch.com。 在关闭Farfetch和React之间的开发工具并刷新页面后，这些标签仅在https://reactjs.org中重新出现。

哦，顺便说一句，我使用的是您发送的@bvaughn版本。

由于某些原因，我只能在Canary上的https://reactjs.org上看到这些选项卡。 没有它的Localhost仍然会静止（不仅是响应者，而且都是所有人）。 我怀疑我在马stable上有选项卡，因为我在打开具有开发工具的React文档后打开了本地主机。

我试图做同样的事情，但是我不能在Chrome Canary的localhost上始终使用它。

编辑：关闭浏览器选项卡后，我访问了稳定的React文档，选项卡再次丢失。 确实似乎是Chrome问题

此问题不是确定性的。 有时它起作用，有时却不起作用。 我认为我们不应该过多地阅读以取得成功。

Chrome v83恰好在React DevTools v4.7发布的第二天发布。

如果有人想尝试一下是否有任何变化，这是React DevTools（4.6）的先前版本：
ReactDevTools-4.6.zip

从我听到的消息来看，这听起来越来越像一个Chrome问题。

实验版本和4.6都不适合我（仅上述解决方法）。 我还感觉这是一个Chrome问题，因为该错误是几天前更新Canary之后发生的，并且此后一直存在，但是该扩展在Stable中可以正常工作。

还可能值得注意的是reactjs.org总是偶尔出现扩展选项卡未显示的问题。 我不确定为什么，但是偶尔出现故障并没有新事物。 似乎新出现的是此失败的频率，其他站点正在发生的事实以及其他扩展也正在发生的事实。 （这就是为什么我认为这是Chrome / Chromium问题）

我不知道扩展的工作方式，也无法创建简化的测试用例。 但这可能以任何方式帮助您：

在扩展有效的reactjs.org上， window对象具有__REACT_DEVTOOLS_COMPONENT_FILTERS__ ， __REACT_DEVTOOLS_APPEND_COMPONENT_STACK__和__REACT_DEVTOOLS_GLOBAL_HOOK__ 。

后者看起来像这样：

在扩展名不起作用的应用上，只有__REACT_DEVTOOLS_GLOBAL_HOOK__存在，看起来像这样：

有没有办法挂接到扩展名（ main.js ？），甚至可以附加调试器，以发现潜在的错误？ （我尝试过background.js但这似乎并不是看的正确位置。）

@bvaughn我也认为这可能是Chromium错误（请注意Chromium，而不是Chrome，因为我在Edge中得到了完全相同的错误行为）。 Opera对于最新的RDT来说对我来说还算不错，所以我想它们还没有更新到Chromium 83（尽管我现在还没有经过计算的检查）。

我在这里打开了这个错误，因为它似乎已经传递给了RDT（我也不知道像Relay和Redux DT这样的其他代码不能正常工作），所以这可能与两者之间的某种集成有关。 可能是导致问题并在Chromium 83中更改的扩展API。

如前所述，您是否为此联系了Chromium / Chrome小组？

同意在这一点上似乎可能是Chromium错误（该漏洞在最近的Chrome 83和Edge 83更新中推出）。

我已经在Twitter上对其中一个开发人员执行了ping操作，但尚未收到回复。

有没有办法挂接到扩展名（main.js？），甚至可以附加调试器来发现潜在的错误？ （我尝试了background.js，但这似乎并不是看待的正确位置。）

@maxbeier有两种调试扩展的方法。 一些扩展将代码注入到您正在查看的页面中（React DevTools也是如此），在这种情况下，您可以使用常规工作流程对其进行调试。

您可能还想调试扩展UI本身，您可以通过以下方式进行调试：分离/取消对DevTools面板的显示，然后弹出第二个DevTools窗口以检查第一个窗口，例如（我正在使用⌘ + J ）：

您也可以打开扩展名（chrome：// extensions /？id = aogeonfmjfclepddhjhilmncnhooehhl），然后选择“详细信息”和“检查视图”。

顺便说一下，这似乎是一个Chromium问题，也正在影响Vue和Redux DevTools。

如果您有一个CR错误帐户，请考虑为主打此问题：
https://bugs.chromium.org/p/chromium/issues/detail?id=1085215

我不确定这是否是您要寻找的答案，但是在Urql Devtools中，由于这种不可预测性，我们试图摆脱使用chrome.devtools.inspectedWindow.eval来支持握手。

评估检查的窗口的问题是，您可能会遇到竞争条件或对轮询的依赖，就像对React devtools的情况一样。

const loadCheckInterval = setInterval(function() {
  createPanelIfReactLoaded();
}, 1000);

我一直无法重现该错误，但如果chrome在扩展程序中使用间隔调用进行一些时髦的操作，我不会感到惊讶。 这不是很有趣，但是握手可能会使事情变得更直接一些，我知道出于安全原因，chrome文档鼓励在窗口评估中使用消息传递。

@andyrichardson，这是一个有趣的建议。 谢谢！

对于ChroPath，我们也面临着同样的问题
我还没有获得永久性的解决方案，但是这里的工作-

1. 仅在需要时更改chrome DevTools主题。
2. 现在打开devtools，在DevTools中找到扩展选项卡。
3. 您可以再次更改主题，无论您要保留什么主题，这都可以解决您的问题。

谢谢@sanjayautonomiq ，这对我

在Chrome浏览器中，这种情况已经发生了一年多。 通常，重新加载页面时，组件和事件探查器选项卡会重新出现。 只是想指出，它不只是最新版本，自v16起就一直在发生，只要我记得

在Chrome浏览器中，这种情况已经发生了一年多。 通常，重新加载页面时，组件和事件探查器选项卡会重新出现。 只是想指出，它不只是最新版本，自v16起就一直在发生，只要我记得

我认为那可能是对您不利的事情，因为我个人在上一年的《 AFAIR》中从未见过-并且如上所述，在编写此书时（最新的Opera）（Opera 68，Chromium 81），这没有发生，对我来说，刷新页面无济于事。 @sanjayautonomiq建议的解决方法可以。
即使此错误已存在至少一年，但最近几周的情况使情况变得更糟（新的Chromium和/或新的RDT版本）-从此问题的所有反应中可以明显看出。

即使此错误已存在至少一年，但最近几周的情况使情况变得更糟（新的Chromium和/或新的RDT版本）-从此问题的所有反应中可以明显看出。

当然可以。 我再次ping CR错误。 这种回归是非常破坏性的。

仅供参考，我只是将http://crbug.com/1085215标记为。 大约8天前已提交了针对后一个问题的修复程序。 请在Canary中重新测试，如果问题未解决，请重复数据删除1085215。

确实看起来像Canary修复程序可以解决此问题（或至少使它更难再现）。 在此问题修复之前，请先解决此问题，直到该修复程序稳定到Chrome稳定为止，因为我们已经收到了很多重复的报告。

对于ChroPath，我们也面临着同样的问题
我还没有获得永久性的解决方案，但是这里的工作-

1. 仅在需要时更改chrome DevTools主题。
2. 现在打开devtools，在DevTools中找到扩展选项卡。
3. 您可以再次更改主题，无论您要保留什么主题，这都可以解决您的问题。

对我来说就像魅力一样，谢谢！ 正要尝试将我的头撞在墙上。

太奇怪了

我必须更改devTools主题以解决此问题。

谢谢@sanjayautonomiq

但这是一个错误。

但这是一个错误。

是。

具体来说，这是问题描述中提到的Chrome错误（ CR bug 1085215 ）：smile：我们无法（在此）对其进行修复。

Chrome稳定版现在似乎可以解决此问题，因此我将解决此问题。

Chrome稳定版现在似乎可以解决此问题，因此我将解决此问题。

仍在Chrome 83.0.4103.116上为我复制。

我同意这在RDT方面没有修复，但是在Chrome中修复此问题之前，值得保留此问题。

版本83.0.4103.116（正式版本）（64位）相同

我会说，这对我来说也是一个问题（版本83.0.4103.116）。

嘿伙计。 可能不值得在此处添加更多的“ +1”注释，因为这是一个Chromium错误。 在扩展方面，我无能为力。 最好将“ +1”票投给Chromium错误本身：smile ：，以便Google知道它正在影响很多人。

话虽如此，根据此评论，CR错误已被标记为已修复，并计划将其引入Chrome v84，因此希望大家尽快解决。

同时，我将锁定此问题，以避免为了避免垃圾邮件通知已在上面发表评论的每个人。