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.

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

​
Fonctionnalités

La Prévisualisation comprend les fonctionnalités suivantes pour vous permettre de tester et déboguer vos applications web de manière transparente :
  • Vue web en direct : Voir votre application et interagir avec elle sans quitter votre onglet de navigateur
  • Outils de développement : Utiliser des outils intégrés pour diagnostiquer rapidement les problèmes
  • Tests adaptatifs : Voir votre application dans différentes tailles d’écran d’appareils mobiles

​
Utilisation

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

​
Barre d’adresse

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

​
Outils du navigateur

Les outils du navigateur sur le côté droit de la barre d’adresse comprennent les fonctions suivantes :
  • Taille d’écran : Sélectionner parmi différents préréglages de taille d’écran d’appareils pour tester les designs adaptatifs
  • Outils de développement : Activer/désactiver le panneau des outils de développement
  • Nouvel onglet : Ouvrir l’URL de votre application web dans un nouvel onglet de navigateur
Vous créez une application mobile ? Le panneau Prévisualisation prend également en charge la prévisualisation sur un Simulateur iOS ou un Émulateur Android. Voir Applications mobiles natives pour les détails.

​
Outils de développement

Les outils de développement, propulsés par le projet open source Eruda, vous aident à effectuer les tâches suivantes :
  • Voir 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 clé Outils de développement en haut de l’onglet Prévisualisation pour les activer/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 effacer cercle avec barre oblique.
  • Filtrer la sortie : Voir 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 filtre filtre et en entrant le texte.
  • Copier la sortie : Copier les messages sélectionnés de la console en sélectionnant le bouton icône copier copier.
  • Exécuter du code JavaScript : Exécuter du code JavaScript dans le contexte de votre application en sélectionnant le icône 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.
  • Voir les détails de l’élément : Voir les détails sur l’élément DOM et son emplacement dans le code HTML
  • Copier la sortie : Copier les messages sélectionnés de la console en sélectionnant le bouton icône copier copier.
Utilisez la icône sélection sélection par flèche pour activer/désactiver le mode de sélection. Après avoir 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 : Voir toutes les requêtes réseau initiées par votre application. Sélectionnez une requête pour voir les détails.
  • Filtrer : Voir les résultats correspondants en sélectionnant l’icône icône filtre entonnoir pour afficher les résultats correspondant à votre texte. Entrez un filtre vide pour l’effacer.
  • Copier : Copier les informations de stockage en sélectionnant le bouton icône copier copier.

​
Ressources

L’onglet Ressources montre les ressources chargées par la page et le stockage du navigateur, tels que les cookies et le stockage local. Vous pouvez voir 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 :
  • Voir le stockage : Examiner le stockage local, le stockage de session et les cookies.
  • Filtrer : Voir les résultats correspondants en sélectionnant l’icône icône filtre entonnoir pour afficher les résultats correspondant à 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 effacer effacer.
  • Supprimer la sélection : Supprimer des éléments de stockage en sélectionnant l’icône icône supprimer « X ».
  • Copier : Copier les informations de stockage en sélectionnant le bouton icône copier copier.

​
Paramètres

L’onglet Paramètres vous permet de personnaliser l’apparence et le comportement des outils de développement. Cet onglet comprend des options de personnalisation pour les éléments suivants :
  • 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 comment votre application se comporte
  • Préférences d’affichage : Modifier le thème, la taille du panneau, la transparence et d’autres comportements des outils de développement