React-devtools: すべてのノードを展開します

作成日 2016年03月18日  ·  3コメント  ·  ソース: facebook/react-devtools

デフォルトでは、開発ツールはすべてを折りたたみます。 そして、それを一つずつ拡大し続けるのは面倒であり、それらすべてを拡大する方法はありません。

非常に面倒なので、実際に何かが足りない可能性があります。問題を事前に検索しても、それに関連する結果が得られなかったので驚きました。

表示されているノードの「すべて展開」と、自動展開のオプションを検討してください。 自動拡張したい場合もあれば、ツリーのサイズとスコープ内のルートノードに依存しない場合もあります。 したがって、自動拡張機能を持つことは大きな助けになります。

最も参考になるコメント

@spicyjは書いた:

大きな木があるページ(例:Facebook)では簡単に法外に大きくなる可能性があるため、これを行う予定はないと思います。

これがばかげた質問である場合は許してください(私はReactにかなり慣れていません)が、元のポスターはすでに提案していませんでしたか、少なくとも大きなツリーのあるページのパフォーマンスの問題を回避しながらこの機能を実装する方法を暗示していませんでしたか? 彼は言った:

自動拡張するオプションも[...]持つことを検討してください。 自動拡張したい場合もあれば、ツリーのサイズとスコープ内のルートノードに依存しない場合もあります。

したがって、単純な解決策は、ツリーが自動拡張で許容可能なパフォーマンスで動作するのに十分小さいかどうかに応じて、ユーザーマニュアルで有効または無効にするオプションになります。 確かに、ユーザーは小さなツリーのあるサイトでこれを有効にしてから、大きなツリーのある別のサイトに切り替えて、ブラウザー(または少なくともタブ)を停止させることができます。 しかし、これに対して防御するのはかなり簡単ではないでしょうか? 組み合わせることができるいくつかのアプローチを考えることができます。

  • 自動拡張機能を最大深度に制限します。 (OK、浅くて非常に広い木がある場合、これは常に機能するとは限りません。)
  • 自動拡張機能を合計ノードの最大数に制限します。 ノードを自動拡張すると、表示されているノードの総数がそのしきい値を超えてしまう場合は、自動拡張を停止するだけです。
  • 自動拡張機能を、親ごとのノードの最大数に制限します。 (上記と同様ですが、ノードごとの制限があります。)
  • 固定時間のしきい値内で、できるだけ多くのノードを自動拡張します。

ルートコンポーネントが折りたたまれているだけを表示するデフォルトのビューは実際にはあまり役に立たないため、この機能を実装できるかどうかを再検討できれば素晴らしいと思います。 比較のために、[要素]タブのツリーはデフォルトで自動的に展開されるため、ルートの<html>要素が展開されるだけでなく、 <body>下のトップレベルも表示されます。

ただし、要素パネルでノードを選択してReactパネルに切り替えると、対応するコンポーネントが自動的に強調表示されます。

おかげで、これは非常に便利なヒントです! ただし、ページがリロードされるたびに[要素]タブに切り替えて[React]に戻す必要があるのは、依然として非常に不便です(これは開発中に非常に頻繁に発生します)。

全てのコメント3件

大きな木があるページ(例:Facebook)では簡単に法外に大きくなる可能性があるため、これを行う予定はないと思います。 ただし、要素パネルでノードを選択してReactパネルに切り替えると、対応するコンポーネントが自動的に強調表示されます。

お役に立てば幸いです。

@spicyjは書いた:

大きな木があるページ(例:Facebook)では簡単に法外に大きくなる可能性があるため、これを行う予定はないと思います。

これがばかげた質問である場合は許してください(私はReactにかなり慣れていません)が、元のポスターはすでに提案していませんでしたか、少なくとも大きなツリーのあるページのパフォーマンスの問題を回避しながらこの機能を実装する方法を暗示していませんでしたか? 彼は言った:

自動拡張するオプションも[...]持つことを検討してください。 自動拡張したい場合もあれば、ツリーのサイズとスコープ内のルートノードに依存しない場合もあります。

したがって、単純な解決策は、ツリーが自動拡張で許容可能なパフォーマンスで動作するのに十分小さいかどうかに応じて、ユーザーマニュアルで有効または無効にするオプションになります。 確かに、ユーザーは小さなツリーのあるサイトでこれを有効にしてから、大きなツリーのある別のサイトに切り替えて、ブラウザー(または少なくともタブ)を停止させることができます。 しかし、これに対して防御するのはかなり簡単ではないでしょうか? 組み合わせることができるいくつかのアプローチを考えることができます。

  • 自動拡張機能を最大深度に制限します。 (OK、浅くて非常に広い木がある場合、これは常に機能するとは限りません。)
  • 自動拡張機能を合計ノードの最大数に制限します。 ノードを自動拡張すると、表示されているノードの総数がそのしきい値を超えてしまう場合は、自動拡張を停止するだけです。
  • 自動拡張機能を、親ごとのノードの最大数に制限します。 (上記と同様ですが、ノードごとの制限があります。)
  • 固定時間のしきい値内で、できるだけ多くのノードを自動拡張します。

ルートコンポーネントが折りたたまれているだけを表示するデフォルトのビューは実際にはあまり役に立たないため、この機能を実装できるかどうかを再検討できれば素晴らしいと思います。 比較のために、[要素]タブのツリーはデフォルトで自動的に展開されるため、ルートの<html>要素が展開されるだけでなく、 <body>下のトップレベルも表示されます。

ただし、要素パネルでノードを選択してReactパネルに切り替えると、対応するコンポーネントが自動的に強調表示されます。

おかげで、これは非常に便利なヒントです! ただし、ページがリロードされるたびに[要素]タブに切り替えて[React]に戻す必要があるのは、依然として非常に不便です(これは開発中に非常に頻繁に発生します)。

このすべてを展開する機能は、
https://github.com/facebook/react-devtools/issues/591
https://github.com/facebook/react-devtools/pull/621
キー:
alt +右矢印で展開-すべて
Alt +左​​矢印で折りたたむ-すべて

このページは役に立ちましたか?
0 / 5 - 0 評価