Comment inspecter la hiérarchie des vues dans iOS?

170

Existe-t-il un outil GUI qui inspecte la hiérarchie des vues d'une application iOS? Je pense à l'inspecteur Web de Webkit ou à des outils similaires. Je cherche à déboguer les problèmes de mise en page, comme les vues ayant la mauvaise position ou la mauvaise taille, ou un enfant qui n'est pas correctement contenu dans son parent. Actuellement, je dois ajouter des affirmations qui testent ces différentes conditions à la main, ou définissent différentes couleurs d'arrière-plan sur différentes vues, et comme vous pouvez l'imaginer, c'est une façon vraiment fastidieuse de s'y prendre.

J'ai regardé les instruments UI recorder, mais cela enregistre et lit uniquement les actions de l'interface utilisateur »et, dans tous les cas, ne fonctionne que pour les applications Mac.

Y a-t-il une meilleure solution?

Vaddadi Kartick
la source

Réponses:

168

Xcode 6 intègre désormais une inspection de la hiérarchie des vues 3D, comme Reveal App et Spark Inspector.

entrez la description de l'image ici

Cliquez sur le bouton "Déboguer la hiérarchie des vues" pendant que votre application est en cours d'exécution pour suspendre l'exécution et inspecter les vues au moment actuel.

entrez la description de l'image ici

Plus d'informations dans la documentation d'Apple .

Levi McCallum
la source
5
Si l'option de débogage de vue n'est pas disponible, consultez stackoverflow.com/questions/24040322/… .
kennytm
Au début, je n'ai pas vu la barre d'outils affichée par Levi McCallum car elle se trouve tout en bas de la fenêtre Xcode si l'application n'a pas de sortie de débogage. Et une fois que le bouton est enfoncé, la fenêtre Afficher la hiérarchie était vide jusqu'à ce que j'appuie sur l'un des boutons en bas ou que j'ajuste l'un des curseurs.
Carl Smith
Une fois que vous commencez à compter sur cet outil, il craque toujours. Je ne sais pas pourquoi ni comment y remédier, mais cela semble se produire sur des vues plus compliquées.
Departamento B
263

Je ne sais pas s'il existe un outil d'inspection de vue GUI, mais j'ai eu un peu de chance avec la méthode de débogage sur UIView: -recursiveDescription

si vous mettez le programme en pause dans le débogueur et saisissez-le dans GDB (Edit: fonctionne également dans LLDB)

po [[UIWindow keyWindow] recursiveDescription]

Vous obtenez une impression de l'ensemble de votre hiérarchie de vues. Vous pouvez également l'appeler sur une vue spécifique pour obtenir une impression de la hiérarchie des vues de cette vue.

Il peut être un peu fastidieux de parcourir les informations que vous en tirez, mais cela m’a été utile.

Le mérite revient à cet article de blog qui parlait de cette méthode et qui était également lié à cette note technique Apple utile, mais plutôt difficile à trouver .

Simon Goldeen
la source
1
J'ai: erreur: impossible de trouver la déclaration d'interface pour '$ __ lldb_objc_class' des idées? (lldb) po [[UIWindow keyWindow] recursiveDescription] erreur: impossible de trouver la déclaration d'interface pour l'erreur '$ __ lldb_objc_class': impossible de trouver la déclaration d'interface pour l'erreur '$ __ lldb_objc_class': 2 erreurs d'analyse de l'expression
Zennichimaro
1
Je pense que cette réponse n'est plus la réponse canonique, car il existe maintenant des outils d'interface graphique disponibles qui répondent directement à la question "Y a-t-il un outil d'interface graphique ...?"
theraven
à partir de xcode 5.1 J'ai commencé à avoir cette erreur chaque fois que je tape recursive Erreur de description: la méthode d'instance 'undoManager' a des types de résultats incompatibles dans différentes unités de traduction ('id' contre 'NSUndoManager *') note: la méthode d'instance 'undoManager' a également déclaré ici une erreur : 1 erreurs d'analyse de l'expression
abbood
1
Bien que la question soit ancienne et porte sur les méthodes graphiques, cette réponse spécifique concerne les solutions textuelles. Une discussion de la solution canonique dans le code peut être trouvée, par exemple ici: stackoverflow.com/a/14193682/2431627 . c'est-à-dire en utilisant la propriété _printHierarchy via KVC.
Robin Macharg
46

Afficher la capture d'écran de l'application

Curieusement, il existe maintenant une autre option, http://revealapp.com/ , qui, à partir de cet article, est en version bêta ouverte (gratuite). Comme vous pouvez le voir, c'est un autre inspecteur visuel.

EDIT 2014-04-05: Reveal est sorti de la bêta et n'est plus gratuit. Il y a cependant un essai de 30 jours.

livingtech
la source
1
J'ai essayé quelques outils pour cela (Spark Inspector, iOS Hierarchy Viewer et la vue de type firebug dans l'outil de test Frank). Jusqu'à présent, Reveal est mon préféré.
Ragoût du
1
Mais TOTALEMENT en vaut la peine. Bien mieux que les outils Xcode intégrés pour visualiser les vues
Will Larche
35

Cette question est ancienne mais permettez-moi de mettre ici des informations sur le nouvel outil que je développe: https://github.com/glock45/iOS-Hierarchy-Viewer entrez la description de l'image ici

Damian Kołakowski
la source
est-il possible d'actualiser automatiquement la page lorsque je navigue vers une autre vue dans le simulateur? de plus, est-il possible de changer les valeurs dans cette visionneuse (je peux donc faire quelques tests sur le navigateur sans écrire de vrai code)? merci :)
Brian
1
@Brian remercie Brain. J'ai commencé à prototyper la possibilité de changer les valeurs. Il est désactivé dans la version officielle. Restez à l'écoute !
Damian Kołakowski
Merci beaucoup pour la suggestion. J'ai réussi à résoudre mon problème avec cet outil, un problème qui n'a pas pu être résolu à l'aide du débogueur d'interface utilisateur de Xcode!
D6mi le
Merci, Damian, mais pour les personnes qui lisent ceci, cet outil ne semble pas entretenu.
Vaddadi Kartick
17

entrez la description de l'image ici

Juste pour garder ce fil à jour, j'ai récemment joué avec Spark Inspector . Ce n'est pas gratuit, mais c'est très agréable.

livingtech
la source
7

Le débogueur FLEX fournit un inspecteur de vue dans l'application qui vous permet de modifier l'interface utilisateur dans une application en cours d'exécution. Il enregistre également les requêtes réseau.

https://github.com/Flipboard/FLEX

entrez la description de l'image ici

Scott Bossak
la source
6

Gratuit: tapez simplement ceci dans l'inspecteur:

po [[UIWindow keyWindow] recursiveDescription]

Commercial: http://revealapp.com/ J'ai testé la version bêta de Revealapp, c'était bien mais avec des bugs. Un autre outil commercial: http://sparkinspector.com/ il fonctionne de manière transparente.

AVEbrahimi
la source
Spark Inspector a une belle visionneuse de notifications
thierryb
6

Swift 4.

iOS :

extension UIView {

   // Prints results of internal Apple API method `recursiveDescription` to console.
   public func dump() {
      Swift.print(perform(Selector(("recursiveDescription"))))
   }
}

macOS :

extension NSView {

   // Prints results of internal Apple API method `_subtreeDescription` to console.
   public func dump() {
      Swift.print(perform(Selector(("_subtreeDescription"))))
   }
}

Utilisation (dans le débogueur): po myView.dump()

Vlad
la source
2

Cela vide tout dans la fenêtre de débogage. (Difficile à lire): (Travailler sur iOS 10, Xcode 8.3.3

po UIApplication.shared.keyWindow?.recursiveDescription()
Alix
la source
0

La réponse approuvée ne fonctionne plus pour moi, en utilisant Xcode 8 et Swift 2.3. Voici ce qui fonctionne pour moi:

po UIApplication.sharedApplication().keyWindow?.recursiveDescription()

mph
la source
1
Merci, mph, mais cela ne fonctionne pas non plus dans Swift 3: erreur: propriété 'shared' introuvable sur l'objet de type 'UIApplication'
Vaddadi Kartick
Swift 4 et Xcode 9.1 se plaignent avec "erreur: <EXPR>: 3: 32: erreur: impossible d'appeler la valeur du type non-fonction 'UIApplication' UIApplication.sharedApplication (). KeyWindow? .RecursiveDescription ()"
Jason Harrison