React-devtools: Développer tous les nœuds
Par défaut, les outils de développement réduisent tout. Et c'est fastidieux de devoir continuer à l'étendre un par un, et il n'y a aucun moyen de les étendre tous.
Il est possible que j'aie raté quelque chose parce que c'est très fastidieux, et j'ai été surpris de voir que ma recherche préliminaire sur les problèmes n'a donné aucun résultat lié à cela.
Veuillez envisager d'avoir un "Développer tout" pour les nœuds affichés, ainsi qu'une option de développement automatique. Parfois, nous voulons développer automatiquement, et parfois nous ne le faisons pas en fonction de la taille de l'arbre et du nœud racine qui est dans la portée. Ainsi, avoir la possibilité d'étendre automatiquement sera d'une grande aide.
prasannavl
Tous les 3 commentaires
Je ne pense pas que nous prévoyons de le faire car cela pourrait facilement devenir prohibitif sur les pages avec de grands arbres (ex: Facebook). Si vous sélectionnez un nœud dans le panneau Éléments et passez au panneau React, il devrait automatiquement mettre en surbrillance le composant correspondant.
J'espère que cela pourra aider!
sophiebits
le 31 mars 2016
@spicyj a écrit :
Je ne pense pas que nous prévoyons de le faire car cela pourrait facilement devenir prohibitif sur les pages avec de grands arbres (ex: Facebook).
Excusez-moi si c'est une question stupide (je suis assez nouveau dans React), mais l'affiche originale n'a-t-elle pas déjà suggéré, ou du moins impliqué un moyen d'implémenter cette fonctionnalité tout en évitant tout problème de performances sur les pages avec de grands arbres ? Il a dit:
Veuillez envisager d'avoir [...] également une option d'expansion automatique. Parfois, nous voulons développer automatiquement, et parfois nous ne le faisons pas en fonction de la taille de l'arbre et du nœud racine qui est dans la portée.
La solution simple serait donc une option que le manuel d'utilisation active ou désactive, selon que l'arborescence est suffisamment petite pour que l'extension automatique fonctionne avec des performances acceptables. Certes, l'utilisateur peut activer cela pour un site avec un petit arbre, puis passer à un autre site avec un grand arbre et faire arrêter son navigateur (ou au moins, l'onglet). Mais ne serait-il pas assez facile de se défendre contre cela ? Je peux penser à plusieurs approches qui pourraient même être combinées :
- Limitez la fonction d'extension automatique à une profondeur maximale. (OK, cela ne fonctionnera pas toujours si vous avez un arbre peu profond et très large.)
- Limitez la fonctionnalité d'extension automatique à un nombre maximum de nœuds. Si l'expansion automatique d'un nœud fait basculer le nombre total de nœuds visibles au-dessus de ce seuil, arrêtez simplement l'expansion automatique.
- Limitez la fonctionnalité d'extension automatique à un nombre maximal de nœuds par parent. (Similaire à ce qui précède, mais avec des limites par nœud.)
- Développez automatiquement autant de nœuds que possible dans un délai fixe.
Ce serait formidable si vous pouviez reconsidérer si cette fonctionnalité serait possible à implémenter, car la vue par défaut qui ne montre que le composant racine réduit n'est vraiment pas très utile. À titre de comparaison, il convient de noter que l'arborescence de l'onglet Éléments est automatiquement développée par défaut de sorte que non seulement l'élément racine <html> est développé, mais également le niveau supérieur sous <body> est visible.
Si vous sélectionnez un nœud dans le panneau Éléments et passez au panneau React, il devrait automatiquement mettre en surbrillance le composant correspondant.
Merci, c'est une astuce très utile ! Cependant, il est toujours très gênant de devoir basculer dans l'onglet Éléments et revenir à celui de React à chaque rechargement de la page (ce qui est très fréquent pendant le développement).
aspiers
le 25 mars 2017
Cette fonctionnalité d'extension a été implémentée et fusionnée, par
https://github.com/facebook/react-devtools/issues/591
https://github.com/facebook/react-devtools/pull/621
Clés:
alt+flèche droite pour tout développer
alt+flèche gauche pour tout réduire
RobBednark
le 26 sept. 2018
Questions connexes
bvaughn
·
4Commentaires
dragonza
·
5Commentaires
sophiebits
·
5Commentaires
nareshbhatia
·
3Commentaires
CodyReichert
·
5Commentaires
Commentaire le plus utile
@spicyj a écrit :
Excusez-moi si c'est une question stupide (je suis assez nouveau dans React), mais l'affiche originale n'a-t-elle pas déjà suggéré, ou du moins impliqué un moyen d'implémenter cette fonctionnalité tout en évitant tout problème de performances sur les pages avec de grands arbres ? Il a dit:
La solution simple serait donc une option que le manuel d'utilisation active ou désactive, selon que l'arborescence est suffisamment petite pour que l'extension automatique fonctionne avec des performances acceptables. Certes, l'utilisateur peut activer cela pour un site avec un petit arbre, puis passer à un autre site avec un grand arbre et faire arrêter son navigateur (ou au moins, l'onglet). Mais ne serait-il pas assez facile de se défendre contre cela ? Je peux penser à plusieurs approches qui pourraient même être combinées :
Ce serait formidable si vous pouviez reconsidérer si cette fonctionnalité serait possible à implémenter, car la vue par défaut qui ne montre que le composant racine réduit n'est vraiment pas très utile. À titre de comparaison, il convient de noter que l'arborescence de l'onglet Éléments est automatiquement développée par défaut de sorte que non seulement l'élément racine
<html>est développé, mais également le niveau supérieur sous<body>est visible.Merci, c'est une astuce très utile ! Cependant, il est toujours très gênant de devoir basculer dans l'onglet Éléments et revenir à celui de React à chaque rechargement de la page (ce qui est très fréquent pendant le développement).