> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Éditeur et outils

> Découvrez les outils disponibles dans l'Éditeur de projet — l'éditeur, la prévisualisation, la console, le shell et bien plus.

L'Éditeur de projet inclut une gestion de la mise en page et des outils intégrés qui optimisent votre expérience de création d'applications.
Ces fonctionnalités de l'Éditeur de projet se spécialisent dans la gestion d'aspects spécifiques du processus de développement, vous permettant de
vous concentrer sur la création plutôt que sur la configuration.

## Mise en page personnalisable de l'Éditeur de projet

Les outils de gestion de la mise en page de l'Éditeur de projet vous permettent de personnaliser les composants de l'environnement de développement.
Il se compose des types d'éléments d'interface utilisateur suivants :

| Élément      | Description                                                                                             | Capacités                                                                                                                                                                                   | Cas d'utilisation                                                                                                                                         |
| ------------ | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Fenêtres** | Onglets de navigateur contenant un ou plusieurs panneaux                                                | <ul><li>Peuvent être organisées sur plusieurs écrans</li></ul>                                                                                                                              | <ul><li>Organiser l'Éditeur de projet sur plusieurs écrans</li><li>Travailler sur différents projets simultanément</li></ul>                              |
| **Panneaux** | Sections d'une fenêtre contenant un ou plusieurs onglets                                                | <ul><li>Supportent le fractionnement horizontal et vertical</li><li>Peuvent être redimensionnés et réorganisés</li><li>Peuvent être convertis en panneau flottant dans la fenêtre</li></ul> | <ul><li>Voir le code et la prévisualisation côte à côte</li><li>Créer des mises en page personnalisées pour différentes tâches de développement</li></ul> |
| **Onglets**  | Contiennent exactement un outil de l'Éditeur de projet, tel que l'éditeur de fichiers, Preview ou Agent | <ul><li>Peuvent être déplacés entre les panneaux et réordonnés dans ceux-ci</li><li>Permettent de basculer entre différents fichiers ou outils en un seul clic</li></ul>                    | <ul><li>Ouvrir différents outils ou fichiers selon les besoins</li></ul>                                                                                  |

La vidéo suivante identifie chaque élément de mise en page de l'Éditeur de projet :

<Frame>
  <iframe src="https://www.loom.com/embed/495838f6de3a42a890461572615ad48e?sid=df5d78b9-6d2e-4396-8853-4e3fa2b81db4" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="100%" height="420px" />
</Frame>

## Arborescence de fichiers

L'arborescence de fichiers liste tous les fichiers et répertoires de votre application Replit.

<Accordion title="Comment accéder à l'arborescence de fichiers">
  Sélectionnez l'icône <img class="icon-svg" src="https://mintcdn.com/replit/rJldsgYVucXB_6kW/images/icons/files-icon.svg?fit=max&auto=format&n=rJldsgYVucXB_6kW&q=85&s=4b9ac8b70c07960d9f9a3f6eacee4ab6" alt="icône de dossier avec flèches" width="16" height="16" data-path="images/icons/files-icon.svg" /> de dossier sur la gauche pour basculer
  la visibilité de l'arborescence de fichiers.
</Accordion>

Vous pouvez effectuer les actions suivantes dans l'arborescence de fichiers :

* Sélectionner un dossier pour afficher son contenu
* Sélectionner un fichier ou le faire glisser vers un panneau pour l'ouvrir dans un éditeur de fichier
* Effectuer des opérations sur les fichiers telles que dupliquer, renommer, déplacer, télécharger ou supprimer

La vidéo suivante montre plusieurs actions dans l'arborescence de fichiers :

<Frame>
  <iframe src="https://www.loom.com/embed/84129671e4fd4346b426b726609a7cae?sid=ea104265-b5ac-4f93-bf50-6136258de174" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="100%" height="420px" />
</Frame>

## Dock d'outils

Le dock d'outils vous permet de rechercher et d'ouvrir des outils de l'Éditeur de projet dans de nouveaux onglets.

<Accordion title="Comment accéder au dock d'outils">
  Sélectionnez parmi les outils couramment utilisés ou sélectionnez l'icône <img class="icon-svg" src="https://mintcdn.com/replit/X_IP1EeHGm0cA2VA/images/icons/workspace-all-tools-button.svg?fit=max&auto=format&n=X_IP1EeHGm0cA2VA&q=85&s=579643854fb13c402de516695e52c554" alt="Icône Tous les outils" width="16" height="16" data-path="images/icons/workspace-all-tools-button.svg" /> **Tous les outils**
  pour ouvrir le menu contextuel de recherche d'outils.
</Accordion>

La capture d'écran suivante montre le menu contextuel **Tous les outils** ouvert dans le dock d'outils :

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/tools-dock.png?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=7a48f62509f3cb7aaab01c8aa7f8ba24" alt="capture d'écran du dock d'outils" height="50" data-path="images/workspace/tools-dock.png" />
</Frame>

## Bouton Exécuter

Le bouton **Exécuter** lance le workflow sélectionné de l'application Replit.

<Accordion title="Comment accéder au bouton Exécuter">
  Le bouton **Exécuter** est situé en haut de l'écran de l'Éditeur de projet. Sélectionnez le bouton pour lancer le workflow.

  Lorsque votre application Replit est en cours d'exécution, le libellé du bouton est remplacé par **Arrêter**. Sélectionnez le bouton pour arrêter l'application.
</Accordion>

Pour apprendre à sélectionner, afficher et gérer les workflows, voir [Workflows](/references/workspace/workflows/).

La vidéo suivante montre comment afficher et lancer un workflow :

<Frame>
  <iframe src="https://www.loom.com/embed/086c8447bf234ca290ad11f0bbb2e13e?sid=1e8597e5-a3c4-4b36-b42e-f3ad97533334" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="100%" height="420px" />
</Frame>

## Page Spotlight

La page Spotlight vous permet d'afficher et de modifier la page de couverture de votre application Replit et d'accéder aux options de partage.

<Accordion title="Comment accéder à la page Spotlight">
  Sélectionnez le nom de votre projet en haut à gauche de l'Éditeur de projet pour basculer la page Spotlight.
</Accordion>

La vidéo suivante montre comment accéder à la page Spotlight :

<Frame>
  <iframe src="https://www.loom.com/embed/568fa9603a5546919e97b06695ea1da5?sid=cbc2a2f4-ae3f-4a96-85ef-45941f587d35" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="100%" height="420px" />
</Frame>

## Menu Options

Le menu Options vous permet d'effectuer les types d'actions de mise en page suivants :

* **Gestion des fenêtres** : Ouvrir l'Éditeur de projet de l'application Replit dans une nouvelle fenêtre
* **Gestion des panneaux** : Ajouter des panneaux, déplacer un panneau, maximiser un panneau et basculer entre les positions flottante et fixe
* **Gestion des onglets** : Ouvrir ou sélectionner d'autres onglets, déplacer un onglet vers un autre panneau et fermer un onglet

<Accordion title="Comment accéder au menu Options">
  Sélectionnez les <img class="icon-svg" src="https://mintcdn.com/replit/X_IP1EeHGm0cA2VA/images/icons/vertical-dots.svg?fit=max&auto=format&n=X_IP1EeHGm0cA2VA&q=85&s=7b4b6a9992b3b20202297b60b6ef416d" alt="icône de trois points verticaux" height="16" width="16" data-path="images/icons/vertical-dots.svg" /> trois points verticaux
  situés dans le coin supérieur droit de l'onglet actif pour ouvrir le menu Options.
</Accordion>

La capture d'écran suivante montre le menu contextuel Options dans le panneau gauche :

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/workspace-options-menu.png?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=5d8892fb1057bfc37de6aff5af278295" alt="capture d'écran montrant le menu Options de l'Éditeur de projet" width="1968" height="1136" data-path="images/workspace/workspace-options-menu.png" />
</Frame>

## Barre de recherche

La barre de recherche vous permet de trouver des fichiers, du texte ou des outils dans l'Éditeur de projet.

<Accordion title="Comment accéder à la barre de recherche">
  1. Pour ouvrir la barre de recherche, sélectionnez l'icône <img class="icon-svg" src="https://mintcdn.com/replit/X_IP1EeHGm0cA2VA/images/icons/workspace-search-icon.svg?fit=max&auto=format&n=X_IP1EeHGm0cA2VA&q=85&s=d3feed840da2d19e1ee4873d137114dc" alt="icône de loupe" width="16" height="16" data-path="images/icons/workspace-search-icon.svg" /> loupe en haut.
  2. Entrez votre texte de recherche et sélectionnez parmi les suggestions d'auto-complétion.
</Accordion>

La capture d'écran suivante montre le menu contextuel de recherche :

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/search-menu.png?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=205cdb6244d368c4b7e57215f1328e42" alt="capture d'écran montrant le menu de recherche de l'Éditeur de projet" width="1732" height="1224" data-path="images/workspace/search-menu.png" />
</Frame>

## Panneau Ressources

Le panneau Ressources affiche les ressources informatiques et l'utilisation de votre environnement de développement, notamment la RAM, le CPU et le stockage.
Ces informations peuvent vous aider à estimer et optimiser les besoins de publication de votre application Replit.

<Accordion title="Comment accéder au panneau Ressources">
  1. Sélectionnez l'icône <img class="icon-svg" src="https://mintcdn.com/replit/rJldsgYVucXB_6kW/images/icons/resources.svg?fit=max&auto=format&n=rJldsgYVucXB_6kW&q=85&s=8df05261182e3e39f28dcccf809d66c2" alt="icône d'ordinateurs empilés" width="16" height="16" data-path="images/icons/resources.svg" /> ressources située à côté du nom de votre application pour basculer le panneau.
  2. Survolez les éléments **Calcul** ou **Stockage** pour plus de détails.
</Accordion>

La capture d'écran suivante montre le panneau Ressources :

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/resources-panel.png?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=63449b197613dc36bf9dcd1f9c17e7c7" alt="capture d'écran montrant le panneau Ressources de l'Éditeur de projet" width="1214" height="652" data-path="images/workspace/resources-panel.png" />
</Frame>

## Outils

Pour en savoir plus sur les autres outils de l'Éditeur de projet, sélectionnez dans la liste suivante :

<CardGroup cols={3}>
  <Card title="Secrets" icon="key" iconType="solid" href="/fr/core-concepts/project-editor/app-setup/secrets" horizontal={true}>
    Protégez les clés API, identifiants et mots de passe de votre application.
  </Card>

  <Card title="Historique des fichiers" icon="clock-rotate-left" iconType="solid" href="/references/version-control/file-history" horizontal={true}>
    Remontez dans le temps pour récupérer des modifications perdues grâce à la fonctionnalité de suivi de versions de Replit.
  </Card>

  <Card title="Multijoueur" icon="users" iconType="solid" href="/build/invite-teammates" horizontal={true}>
    Codez ensemble en temps réel avec deux utilisateurs ou plus.
  </Card>

  <Card title="Paramètres utilisateur" icon="gear" iconType="solid" href="/references/editor/user-settings" horizontal={true}>
    Personnalisez votre expérience de codage via l'outil Paramètres.
  </Card>

  <Card title="Console" icon="terminal" iconType="solid" href="/fr/references/editor/console" horizontal={true}>
    Affichez la sortie de votre application Replit
  </Card>

  <Card title="Shell" icon="terminal" iconType="solid" href="/fr/references/editor/shell" horizontal={true}>
    Interagissez avec l'Éditeur de projet via une interface en ligne de commande.
  </Card>

  <Card title="Preview" icon="laptop" iconType="solid" href="/fr/references/editor/preview" horizontal={true}>
    Prévisualisez et déboguez votre application web.
  </Card>
</CardGroup>