こんにちは。 私は同じ問題を抱えています。 多分この情報は役に立つでしょう：
1）SPAのいくつかの「ページ」（ P1 ）を開いてからDevToolsを開くと、「コンポーネント」タブと「プロファイラー」タブが表示されません。
2）DevToolsを閉じます
3）次に、SPAの他の「ページ」に切り替えます（ P2 ）
4） P2を使用しているときにDevToolsを開きます
5）「コンポーネント」タブと「プロファイラー」タブが表示されます
6）DevToolsを閉じずに、 P1に切り替えます。RDT拡張の2つのタブはまだここにあり、利益があります:)

@ Roman-Popovこれを確実に再現できますか？ p1とp2が何であるかは重要ですか？ （アプリに関する何かが重要だと思われる場合は、私が再現できるように、何らかの方法でそれらを私と共有できますか？）

また、どのブラウザ+ OS

@ Roman-Popov @bengry （またはこれを見て再現できる他の人）再現できる場合は、DevToolsの新しいビルド（ここで共有できます）を試して、問題がまだ発生するかどうかを確認しますか？

＃18860をバックアウトしてビルドを試してみることができます。 （これは、4.6-> 4.7の変更セットで、リモートでさえ疑わしいと思われる唯一のコミットです。）

@ bvaughnp1とp2について。 うん、それらの間に違いがあるように見えます。 RDTがデフォルトで表示されないP2には、はるかに多くのdom要素が含まれています。 そして、ここにもう1つの詳細があります-Redux-devtoolsタブはRDTタブとまったく同じように動作します。

https://reactjs.org/ページについてはどうですか（@bengryによって言及された問題）-私もそれを見ました。 しかし、今もう一度チェックして、問題は見られません。 タブが表示され、すべてが正常です。

おそらく私の場合、私のプロジェクトまたはこのようなものにメモリの問題があります。 P2から長いリストを削除すると、devtoolsタブが表示されるためです。

Chrome v83.0.4103.61
Chrome Canary v85.0.4157.0
Win 10 Pro 1903

@ Roman-Popov追加情報をありがとう！

再現（またはアクセス）を私と共有して、何が起こっているのかを確認できる可能性はありますか？

または、ここに1回限りのdevtoolsビルドを添付した場合、それをインストールしてもよろしいですか？ （それでも再現できるかどうかを確認するだけです）

SPAで同じ問題が発生しました。 モバイルの「ビュー」でアプリを検査したときに、Chrome Dev Toolsに[コンポーネント]タブと[プロファイラー]タブを表示することができました（これにより、初期コンポーネントのレンダリングが変更されます）。 更新してデスクトップ/レスポンシブ「ビュー」（開発ツールは常に開いている）に戻し、タブは表示されたままでした。

SPAの場合、モバイルとデスクトップのランディングページの最大の違いは、デスクトップでは、react-virtualizedリストを使用してドロワーを開くことです。 このドロワーは、モバイルですぐに開いたりレンダリングされたりすることはありません。 この情報が役立つかどうかはわかりませんが、これは単なるパンくずリストです。 他に何か見つけたら更新します。

カスタムビルドを試して、問題が解決するかどうかを確認してください。

P2から長いリストを削除すると、devtoolsタブが表示されるためです。

うん！ React-仮想化。 以前のメッセージで述べた長いリストにもこれを使用します。
overscanRowCount={600}はラップされたリストに設定されます。 十分な大きさですが、いくつかのdom要素を持つ非常に軽量なプレースホルダーしかありません（ctrl + fを押してリストからブラウザー検索を続けるため）。 overscanRowCountを+ -50にダウングレードすると、タブが見つからないという問題はなくなります。

面白い。 したがって、問題はツリーのサイズ、または単一の親の子の数に関係しているようです... @ Roman-Popovは、コードサンドボックスなどでこれを偶然再現できますか？ （P2を直接見ることができないので、私は推測しますか？）

しかし他のニュースでは- overscanRowCount={600}は...非常に予想外に高いようです。 私はその値が1桁の数字を超えることを忠告しなかったでしょう。 RVとRWは、長いリストの生成と作業を回避する

reactjs.orgはreact-virtualizedも使用しますか？ そこにも問題が再現されていたので（実際、この問題はそれを例として開いた）。 私たちはアプリでそれを使用していますが、オーバースキャンの数が少なく、それでもそこで発生しました。

reactjs.orgはreact-virtualizedも使用しますか？ 問題が私のために再現されたので

reactjs.orgで私のためにうまく働いています。

私たち自身のアプリでは、react-virtualizedを使用していませんが、問題を再現することはできます。

編集：create-react-appによって作成された新しいreactアプリで同じ問題が発生しています。

これはChrome83に関連している可能性があると思います。83にアップグレードした後、この問題が発生し始め、Chrome Canary85で再現できます。

Chromium 81を使用している同僚は、同じアプリを使用しても問題はありません。

@bvaughn

overscanRowCount = {600}は...非常に予想外に高いようです。
...。
RVとRWは、長いリストの生成と作業を回避するために存在します

True：DIはパフォーマンスについて知っています。 それは良くありませんでしたが、迅速な解決策でした。 後でもちろん、ある種のカスタム検索を行います:)
私のアプリを表示して再現しようとするソースコードについて-申し訳ありませんが、それはできないと思います、NDAなど。 しかし、 react-virtualizedリスト、重いページなどを使用して小さなCRAプロジェクトを作成することはできます。このバグをもう一度見つけたら、そのリポジトリを共有してください。 私はこの調査に時間を見つけようとします）

これはChrome83に関連している可能性があると思います。83にアップグレードした後、この問題が発生し始め、Chrome Canary85で再現できます。

Chromium 81を使用している同僚は、同じアプリを使用しても問題はありません。

これは、確認するのに非常に役立つ情報です。 @ianvieiraこの問題をどれだけ確実に再現できますか？ 非常に確実な場合は、古いバージョンのChromiumを試して、再現されなくなるかどうかを確認できますか？

もしそうなら、私に知らせてください、そして私はChromeチームに連絡します。

もう1つ試してみると、他の誰かがこの問題をかなり確実に再現できる場合は、この拡張ビルドを試して、それが役立つかどうか教えてください。

ReactDevTools.zip

私は本当にそうなるとは思っていませんが、最近のWebPackの変更を除外したいと思います。

上記の拡張機能をインストールするには：

1. ダウンロードしてどこかで解凍します
2. ブラウザでchrome://extensions/を開きます
3. 小さなトグルをクリックして、ReactDevTools拡張機能を無効にします
4. 「アンパックをロード」ボタンをクリックします
5. 手順1から解凍した拡張フォルダを選択します

@bvaughn一貫して再現できると思いましたが、 https： //reactjs.org （タブが正しく表示されています）にアクセスし、コンソールを開いた状態でアプリケーションに戻った後、一貫して機能しています。

Chrome Canaryでは、複数のノードを使用してアプリで一貫して再現できます。 送信したバージョンを試してみます。

これにより、拡張機能が追加された他のすべてのコンソールタブも削除されるようです。 Reduxなど

これにより、拡張機能が追加された他のすべてのコンソールタブも削除されるようです。 Reduxなど

これはChromeと関係があるのではないかと思い始めています。

他の人から、Relay DevToolsがクラッシュし、ReactDevToolsが壊れているという報告を聞いたことがあります。 これはReduxDevToolsにも影響するとおっしゃっています。

React（またはRelay）が相互に影響を与えるようなこと、またはRedux拡張機能を実行する必要はありません。

これにより、拡張機能が追加された他のすべてのコンソールタブも削除されるようです。 Reduxなど

私も同じことに気づきました。 Chrome Canaryで試したところ、同じ動作をしました。https： //reactjs.orgに

以前、 https：// localhost ：3000（Dev Toolsの開閉に成功しませんでした）とhttps://farfetch.comで試しましたhttps://reactjs.orgで再表示され、FarfetchとReactの間の開発ツールを閉じてページを更新した後です。

ところで、私はあなたが@bvaughnに送ったバージョンを使用していました。

どういうわけか、カナリアのhttps://reactjs.orgでしかタブを見ることができません。 ローカルホストはそれなしで静止します（反応するものだけでなく、それらすべて）。 開発ツールでReactドキュメントを開いた後にローカルホストを開いたので、安定版にタブがあると思います。

同じことをしようとしましたが、ChromeCanaryのローカルホストで一貫して使用できません。

編集：安定版のReactドキュメントにアクセスしたブラウザタブを閉じた後、タブが再び表示されなくなりました。 それは本当にChromeの問題のようです

この問題は決定論的ではありません。 うまくいくこともあれば、うまくいかないこともあります。 私たちは、1つの成功にあまり多くを読むべきではないと思います。

Chrome v83は、React DevToolsv4.7の1日後にリリースされました。

誰かが何か変更があるかどうかを確認するためにそれを試してみたい場合は、React DevTools（4.6）の以前のバージョンを次に示します。
ReactDevTools-4.6.zip

私が聞いていることからすると、Chromeの問題のように聞こえます。

実験バージョンも4.6も機能していません（上記の回避策のみ）。 また、数日前にCanaryを更新した後にバグが発生し、それ以降もバグが続くため、これはChromeの問題であると感じていますが、拡張機能は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のバグかもしれないと思います（Edgeでもまったく同じバグのある動作が発生するため、ChromeではなくChromiumに注意してください）。 Operaは最新のRDTで問題なく動作するので、まだChromium 83に更新されていないと思います（ただし、現時点でチェックする計算には近づいていません）。

バグはRDTに中継されているように見えるので（RelayやRedux DTのような他のものが機能していないことも知りませんでした）、ここでバグを開きました。 おそらく、問題を引き起こし、Chromium83で変更された拡張APIです。

前述のように、これについてChromium / Chromeチームに連絡しましたか？

この時点で、Chromiumのバグ（最近のChrome83およびEdge83のアップデートで展開された）である可能性が高いことに同意しました。

Twitterで開発者の1人にpingを送信しましたが、まだ返信がありません。

潜在的なエラーを見つけるために、拡張機能（main.js？）にフックし、デバッガーを接続する方法はありますか？ （background.jsを試しましたが、これは正しい場所ではないようです。）

@maxbeier拡張機能をデバッグする方法はいくつかあります。 一部の拡張機能は、表示しているページにコードを挿入します（React DevToolsと同様）。この場合、通常のワークフローを使用してデバッグできます。

また、拡張UI自体をデバッグすることもできます。これは、DevToolsパネルをデタッチ/ドッキング解除し、2番目のDevToolsウィンドウをポップアウトして、最初のウィンドウを検査することで実行できます（私は⌘ + J ）。

拡張機能（chrome：// extensions /？id = aogeonfmjfclepddhjhilmncnhooehhl）を開いて、[詳細]と[ビューの検査]を選択することもできます。

ちなみに、これはVueとReduxDevToolsにも影響を与えているChromiumの問題のようです。

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が拡張機能のインターバル呼び出しでファンキーなことをしていても驚かないでしょう。 それは楽しいことではありませんが、ハンドシェイクは物事をもう少し簡単にするかもしれません、私はメッセージングがセキュリティ上の理由でウィンドウ評価よりもクロムドキュメントが奨励するものであることを知っています。

それは興味深い提案です、@ andyrichardson。 ありがとうございました！

ChroPathでも同じ問題に
私はまだ恒久的な解決策を得ていませんが、これが回避策です-

1. Chrome DevToolsテーマは、必要になったときにのみ変更してください。
2. devtoolsを開くと、DevToolsに拡張機能タブがあります。
3. 保持したいテーマを再度変更できます。これにより、問題が解決します。

ありがとう、 @ sanjayautonomiq 、この仕事は私のために

これは私にとって1年以上クロームで起こっています。 通常、ページをリロードすると、コンポーネントとプロファイラータブが再表示されます。 最新のリリースだけでなく、覚えている限り、v16以降に発生していることを指摘したかっただけです。

これは私にとって1年以上クロームで起こっています。 通常、ページをリロードすると、コンポーネントとプロファイラータブが再表示されます。 最新のリリースだけでなく、覚えている限り、v16以降に発生していることを指摘したかっただけです。

個人的には昨年のAFAIRでこれを見たことがないので、それはあなたの側の何かかもしれないと思います-そして前述のように、これを書いている時点で最新のOpera（Opera 68、Chromium 81）ではこれは起こりません、私にとっては、ページを更新しても役に立ちません。 ただし、 @ sanjayautonomiqによって提案された回避策は実行されます。
このバグが少なくとも1年間存在したとしても、この問題のすべての反応から明らかなように、ここ数週間の何かがそれを悪化させました（新しいChromiumおよび/または新しいRDTバージョン）。

このバグが少なくとも1年間存在したとしても、この問題のすべての反応から明らかなように、ここ数週間の何かがそれを悪化させました（新しいChromiumおよび/または新しいRDTバージョン）。

確かに本当です。 CRバグに再度pingを実行しました。 この回帰はかなり破壊的です。

FYI、私はフラグを立てhttp://crbug.com/1085215をの重複としてhttp://crbug.com/1093731。 後者の問題の修正は、約8日前に提出されました。 Canaryで再テストし、問題が解決されない場合は、1085215を重複排除してください。

カナリアの修正でこの問題が解決されたように見えますか（または少なくとも再現が非常に難しくなります）。 ただし、これについてはすでに多くの重複レポートが寄せられているため、修正がChromeの安定版に反映されるまで、この問題は未解決のままにしておきます。

ChroPathでも同じ問題に
私はまだ恒久的な解決策を得ていませんが、これが回避策です-

1. Chrome DevToolsテーマは、必要になったときにのみ変更してください。
2. devtoolsを開くと、DevToolsに拡張機能タブがあります。
3. 保持したいテーマを再度変更できます。これにより、問題が解決します。

私にとって魅力のように働いた、ありがとう！ 頭を壁にぶつけてみようとしていた。

これはとても奇妙です。

この問題を修正するには、devToolsテーマを変更する必要があります。

ありがとう、 @ sanjayautonomiq

しかし、これはバグです。

しかし、これはバグです。

はい。

具体的には、問題の説明に記載されているように、これはChromeのバグ（ CRバグ1085215 ）です：smile：これを修正するために（ここで）できることは何もありません。

これはChrome安定版で解決されたようですので、この問題を解決します。

これはChrome安定版で解決されたようですので、この問題を解決します。

Chrome83.0.4103.116でも再現されています。

これにはRDT側の修正がないことに同意しますが、Chromeで修正されるまで、この問題を開いたままにしておく価値があるかもしれません。

ここで同じ問題バージョン83.0.4103.116（公式ビルド）（64ビット）

チャイムを鳴らして、それも私にとっての問題だと言います（バージョン83.0.4103.116）。

みなさん、こんにちは。 これはChromiumのバグであるため、ここに「+1」コメントを追加する価値はおそらくありません。 それを機能させるために拡張側で私ができることは何もありません。 「+1」の投票は、Chromiumのバグ自体に費やしたほうがよいでしょう：smile：Googleは、それが多くの人々に影響を与えていることを認識しています。

そうは言っても、このコメントに従って、CRバグは修正済みとしてマークされ、Chromeのv84へのチェリーピッキングが予定されているため、すべての人がすぐに解決できることを願っています。

その間、通知を避けるためにこの問題をロックします-すでに上記にコメントしたすべての人にスパムを送ります。