Explorer les composants de Dodock

Dodock propose un Explorateur de Composants qui permet aux développeurs d'inspecter visuellement la hiérarchie des composants UI utilisés dans l'application. Cet outil est particulièrement utile pour comprendre la structure des pages, identifier les composants disponibles et faciliter le développement de nouvelles fonctionnalités.

Accéder à l'Explorateur de Composants

1. Connectez-vous à votre instance Dodock avec un compte administrateur.
2. Dans la barre de recherche, tapez Explorer de Composants et sélectionnez la page correspondante.

Interface de l'Explorateur

L'interface se compose de trois sections principales :

1. Arborescence des composants : Affiche la hiérarchie des composants de la page actuelle.
2. Propriétés du composant : Détaille les propriétés du composant sélectionné.
3. Aperçu visuel : Met en évidence le composant sélectionné dans la page.

      
flowchart TD
    A[Page actuelle] --> B[Arborescence des composants]
    B --> C[Propriétés du composant]
    B --> D[Aperçu visuel]
    C --> E[Détails techniques]
    D --> E

    

Utilisation pratique

Inspecter un composant

1. Sélectionnez un composant dans l'arborescence.
2. Les propriétés du composant s'affichent dans le panneau de droite.
3. Le composant est mis en évidence dans l'aperçu visuel.

Filtrer les composants

Utilisez la barre de recherche en haut de l'arborescence pour filtrer les composants par nom ou type. Par exemple :

• Form pour afficher uniquement les composants de formulaire.
• Button pour afficher les boutons.

Cas d'usage courants

• Débogage : Identifier rapidement pourquoi un composant ne s'affiche pas correctement.
• Développement : Comprendre la structure d'une page existante avant de la modifier.
• Documentation : Générer des captures d'écran annotées pour la documentation technique.

Bonnes pratiques

• Navigation : Utilisez les flèches du clavier pour naviguer rapidement dans l'arborescence.
• Collaboration : Partagez le lien de la page avec l'Explorateur ouvert pour faciliter les discussions techniques.
• Performance : Fermez l'Explorateur lorsque vous n'en avez plus besoin pour réduire la charge du navigateur.

Limitations

• L'Explorateur ne fonctionne que sur les pages rendues côté client.
• Certains composants dynamiques peuvent ne pas apparaître dans l'arborescence.
• Les propriétés affichées dépendent de la manière dont le composant est implémenté.

::: tip Astuce Pour une expérience optimale, utilisez l'Explorateur de Composants sur une page simple (comme un formulaire de base) avant de l'utiliser sur des pages complexes. :::