Passer au contenu principal
L’onglet Code vous permet de visualiser et de modifier le code source de votre application directement, vous donnant le contrôle sur la fonctionnalité, la conception et le comportement de votre application tout en voyant les changements immédiatement.
L’onglet Code s’adresse aux développeurs qui veulent plus de contrôle. Pour des modifications plus simples, utilisez l’éditeur visuel et les outils IA de Base44.
L'interface de l'onglet Code affichant le code source de votre application

​
Accéder à l’onglet Code

Pour ouvrir l’onglet Code :
  1. Allez dans le tableau de bord de votre application.
  2. Cliquez sur l’onglet Code.
L’onglet Code affiche les fichiers de votre projet dans un explorateur de fichiers à gauche, l’éditeur de code occupant l’espace principal.
Accéder à l'onglet Code depuis le tableau de bord de votre application
Utilisez la fonctionnalité Files used in this page pour voir quels fichiers alimentent la page que vous prévisualisez. Cela vous montre exactement quels fichiers de code sont en cours d’exécution, afin que vous sachiez où aller lorsque vous voulez modifier la page ou enquêter sur un problème. Chaque entrée de la liste affiche le nom du fichier et son chemin de dossier, regroupé par emplacement dans votre projet, comme les pages ou les composants. Pour afficher les fichiers utilisés sur une page :
  1. Allez dans votre éditeur d’application.
  2. Cliquez sur l’icône More Actions en haut à droite.
  3. Cliquez sur Files used in this page.
Affichage des fichiers utilisés sur une page de votre application
Si vous voulez passer de cette vue ciblée à la structure complète des fichiers, cliquez sur See all files. Cela vous amène à la vue complète des fichiers de code pour que vous puissiez continuer à explorer.

​
Modifier avec prévisualisation en direct

L’onglet Code propose une vue en écran partagé qui affiche votre code d’un côté et une prévisualisation en direct de votre application de l’autre. Cela vous permet de voir les changements instantanément sans changer de contexte.
Vue écran partagé affichant le code et la prévisualisation en direct
Pour modifier avec prévisualisation en direct :
  1. Ouvrez un fichier dans l’onglet Code.
  2. Cliquez sur le bouton d’écran partagé dans le coin supérieur droit.
  3. Modifiez votre code à gauche et voyez vos changements à droite.
Chaque fois que vous apportez des modifications au code :
  • Cliquez sur Save en bas de l’écran pour appliquer vos changements et actualiser la prévisualisation avec le dernier code.
  • Cliquez sur Discard en bas de l’écran si vous voulez abandonner toutes les modifications non enregistrées et revenir à la dernière version enregistrée du fichier.
Important : Si vous modifiez le code de votre application, assurez-vous de cliquer sur Publish pour qu’ils soient mis en ligne sur votre application.
Lorsque vous êtes prêt à quitter l’écran partagé, cliquez sur Exit split. Pour le développement local avec votre propre IDE, consultez Intégration GitHub.

​
Examiner les modifications de code de l’IA

Lorsque l’IA modifie votre application, vous pouvez ouvrir la modale Code changes pour voir exactement ce qu’elle a modifié avant la publication. La modale affiche chaque fichier que l’IA a touché, regroupé par dossier, avec une vue diff pour chacun. Pour ouvrir la modale Code changes :
  1. Allez dans le chat IA dans votre éditeur d’application.
  2. Survolez un message où l’IA a modifié ou créé un fichier.
  3. Cliquez sur l’icône à trois points à côté de cette modification et sélectionnez View Changes.
Une modale s’ouvre avec une arborescence de fichiers à gauche et le diff du fichier sélectionné à droite. Une barre de statistiques en haut détaille combien de fichiers ont été ajoutés, modifiés et supprimés. Les fichiers de l’arborescence sont codés par couleur selon leur état :
  • Vert pour les fichiers nouvellement ajoutés.
  • Ambre pour les fichiers modifiés, qui s’ouvrent dans une vue diff côte à côte.
  • Rouge pour les fichiers supprimés.
Cliquez sur n’importe quel fichier dans l’arborescence pour accéder directement à son diff.

​
FAQ

Oui. Vous pouvez ouvrir et modifier n’importe quel fichier de code qui apparaît dans le panneau Code files, y compris les pages, les composants, les mises en page et les helpers d’entités. Si une partie de l’application est générée pour vous, elle apparaît toujours comme du code normal que vous pouvez modifier.
Non. Vous pouvez travailler dans l’éditeur de code en pleine largeur si vous préférez plus d’espace. L’écran partagé est utile lorsque vous voulez voir la prévisualisation à côté de votre code, mais vous pouvez le désactiver à tout moment et le rouvrir plus tard.
Discard supprime toutes les modifications non enregistrées dans le fichier actif et restaure la dernière version enregistrée. C’est utile si vous essayez quelque chose qui ne fonctionne pas et que vous voulez revenir rapidement en arrière. Une fois que vous cliquez sur Discard, vous ne pouvez pas récupérer le code non enregistré de cette session.
Vous n’avez pas besoin d’être un expert, mais une familiarité de base avec React et JSX aide. Vous pouvez commencer par de petites modifications comme la mise à jour de texte, le remplacement de composants ou la modification de styles simples, puis passer à une logique plus avancée à mesure que vous gagnez en confiance.
Cette page a été traduite à l’aide de l’IA. Pour les informations les plus précises et à jour, consultez la version anglaise.