Passer au contenu principal

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.

Preview affiche la sortie de votre application web et propose des outils de développement de navigateur et des capacités de débogage. Lorsque vous lancez votre application web avec le bouton Exécuter, Replit lui attribue une URL temporaire accessible sur Internet. L’outil Preview rend la page exactement comme vous la verriez dans un navigateur. Il comprend également des outils de développement avec des fonctionnalités similaires à celles que l’on trouve dans les navigateurs populaires.
Preview est le nouveau nom de Webview.
capture d'écran de l'outil Preview

​
Fonctionnalités

Preview inclut les fonctionnalités suivantes pour vous permettre de tester et déboguer vos applications web de manière fluide :
  • Vue web en direct : Voyez votre application et interagissez avec elle sans quitter votre onglet de navigateur
  • Outils de développement : Utilisez des outils intégrés pour diagnostiquer rapidement les problèmes
  • Tests adaptatifs : Affichez votre application dans différentes tailles d’écran d’appareils mobiles

​
Utilisation

L’outil Preview s’ouvre automatiquement lorsque vous lancez une application web. Vous pouvez activer ou désactiver ce comportement dans l’outil Paramètres utilisateur sous le paramètre Prévisualisation automatique. Les instructions suivantes expliquent comment ouvrir Preview.
Depuis le Dock d’outils gauche :
  1. Sélectionnez Icône Tous les outils Tous les outils pour voir une liste des outils de l’Éditeur de projet.
  2. Sélectionnez Icône Preview Preview.
Depuis la Barre de recherche :
  1. Sélectionnez la icône de loupe loupe en haut pour ouvrir l’outil de recherche
  2. Tapez « Preview » pour localiser l’outil et sélectionnez-le dans les résultats.

​
Barre d’adresse

La barre d’adresse en haut de l’onglet Preview comprend les outils suivants :
  • Bouton Précédent : Naviguez vers la page précédente dans l’historique de navigation
  • Bouton Suivant : Naviguez vers la page suivante dans l’historique de navigation
  • Domaine de l’application : Affichez des informations sur l’URL temporaire de votre application Replit en sélectionnant {...}.replit.dev
  • Champ d’adresse : Affichez le chemin URL actuel ou entrez un nouveau chemin

​
Outils de navigateur

Les outils de navigateur sur le côté droit de la barre d’adresse comprennent les fonctions suivantes :
  • Taille d’écran : Sélectionnez parmi différents préréglages de taille d’écran d’appareils pour tester les designs adaptatifs
  • Devtools : Activez ou désactivez le panneau outils de développement
  • Nouvel onglet : Ouvrez l’URL de votre application web dans un nouvel onglet de navigateur
Vous construisez une application mobile ? Le panneau Preview prend également en charge la prévisualisation sur un Simulateur iOS ou un Émulateur Android. Voir Applications mobiles natives pour plus de détails.

​
Outils de développement

Les outils de développement, alimentés par le projet open source Eruda, vous aident à effectuer les tâches suivantes :
  • Afficher et interagir avec la console JavaScript dans le contexte de votre application
  • Inspecter les éléments DOM
  • Surveiller les requêtes réseau
  • Configurer les préférences d’affichage et de comportement
Pour accéder aux outils de développement, sélectionnez le bouton icône de clé Devtools en haut de l’onglet Preview pour les activer ou désactiver. Les sections suivantes décrivent les actions que vous pouvez effectuer dans chaque onglet des outils de développement.

​
Console

L’onglet Console affiche les journaux JavaScript générés par votre application. Dans cet onglet, vous pouvez effectuer les actions suivantes :
  • Effacer la sortie : Supprimer toute la sortie de la console en sélectionnant l’icône icône d'effacement cercle avec barre oblique.
  • Filtrer la sortie : Afficher la sortie de la console filtrée par type (Tout, Info, Avertissement ou Erreur).
  • Filtrer le texte correspondant : Afficher la sortie correspondante en sélectionnant l’icône icône de filtre filtre et en entrant le texte.
  • Copier la sortie : Copier les messages de console sélectionnés en sélectionnant le bouton icône de copie copier.
  • Exécuter du code JavaScript : Exécuter du code JavaScript dans le contexte de votre application en sélectionnant le icône de flèche droite chevron droit. Entrez l’expression et sélectionnez Exécuter.

​
Éléments

L’onglet Éléments vous permet d’inspecter et de modifier la structure DOM de la page web.
  • Afficher les détails de l’élément : Afficher les détails sur l’élément DOM et son emplacement dans le code HTML
  • Copier la sortie : Copier les messages de console sélectionnés en sélectionnant le bouton icône de copie copier.
Utilisez la sélection icône de sélection flèche pour activer le mode de sélection. Après être entré en mode de sélection, sélectionnez un élément sur la page web. Le HTML et le CSS de cet élément devraient apparaître dans l’onglet Éléments.

​
Réseau

L’onglet Réseau surveille les requêtes initiées par la page web. Dans cet onglet, vous pouvez effectuer les actions suivantes :
  • Suivre les requêtes : Afficher toutes les requêtes réseau initiées par votre application. Sélectionnez une requête pour afficher les détails.
  • Filtrer : Afficher les résultats correspondants en sélectionnant l’icône icône de filtre entonnoir pour afficher les résultats qui correspondent à votre texte. Entrez un filtre vide pour l’effacer.
  • Copier : Copier les informations de stockage en sélectionnant le bouton icône de copie copier.

​
Ressources

L’onglet Ressources affiche les ressources chargées par la page et le stockage du navigateur, tels que les cookies et le stockage local. Vous pouvez afficher et actualiser les listes pour les types de ressources suivants :
  • Fichiers JavaScript
  • Feuilles de style
  • Iframes
  • Images
Dans cet onglet, vous pouvez effectuer les actions suivantes :
  • Afficher le stockage : Examiner le stockage local, le stockage de session et les cookies.
  • Filtrer : Afficher les résultats correspondants en sélectionnant l’icône icône de filtre entonnoir pour afficher les résultats qui correspondent à votre texte. Entrez un filtre vide pour l’effacer.
  • Effacer : Supprimer toutes les données pour ce type de stockage en sélectionnant le bouton icône d'effacement effacer.
  • Supprimer la sélection : Supprimer les éléments de stockage en sélectionnant l’icône icône de suppression « X ».
  • Copier : Copier les informations de stockage en sélectionnant le bouton icône de copie copier.

​
Paramètres

L’onglet Paramètres vous permet de personnaliser l’apparence et le comportement des outils de développement. Cet onglet inclut des options de personnalisation pour :
  • Paramètres des outils : Personnaliser les options qui s’appliquent à chaque onglet d’outil
  • Contrôles JavaScript : Spécifier les options de comportement JavaScript, comme le désactiver pour tester le comportement de votre application
  • Préférences d’affichage : Modifier le thème, la taille du panneau, la transparence et d’autres comportements des outils de développement