Preview est le nouveau nom de Webview.
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 : Visualisez 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
- Test adaptatif : Affichez votre application dans différentes tailles d’écran d’appareils mobiles
Utilisation
L’outil Preview s’ouvre automatiquement lorsque vous exécutez une application web. Vous pouvez modifier ce comportement dans l’outil Paramètres utilisateur sous le paramètre Aperçu automatique. Les instructions suivantes expliquent comment ouvrir Preview.Comment accéder à Preview
Comment accéder à Preview
Barre d’adresse
La barre d’adresse en haut de l’onglet Preview inclut les outils suivants :- Bouton Précédent : 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 : Afficher des informations sur l’URL temporaire de votre Replit App en sélectionnant
{...}.replit.dev - Champ d’adresse : Afficher le chemin URL actuel ou entrer un nouveau chemin
Outils du navigateur
Les outils du navigateur sur le côté droit de la barre d’adresse incluent les fonctions suivantes :- Taille de l’écran : Sélectionner parmi différents préréglages de taille d’écran d’appareils pour tester les designs adaptatifs
- Devtools : Afficher ou masquer le volet des outils de développement
- Nouvel onglet : Ouvrir l’URL de votre application web dans un nouvel onglet de navigateur
Outils de développement
Les outils de développement, propulsé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
Devtools
en haut de l’onglet Preview pour les afficher ou les masquer.
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 console en sélectionnant l’icône
cercle avec barre oblique. - Filtrer la sortie : Afficher la sortie console filtrée par type (Tout, Info, Avertissement ou Erreur).
- Filtrer le texte correspondant : Afficher la sortie correspondante en sélectionnant l’icône
filtre et en saisissant le texte. - Copier la sortie : Copier les messages de console sélectionnés en sélectionnant le bouton
copier. - Exécuter du code JavaScript : Exécuter du code JavaScript dans le contexte de votre application en sélectionnant le
chevron droit. Saisissez 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 des éléments : 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 copier.
sélection par flèche pour activer le mode sélection.
Après être entré en mode 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 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 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
- Afficher le stockage : Consulter le stockage local, le stockage de session et les cookies.
- Filtrer : Afficher les résultats correspondants en sélectionnant l’icône 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 effacer.
- Supprimer la sélection : Supprimer des éléments de stockage en sélectionnant l’icône
« X ». - Copier : Copier les informations de stockage en sélectionnant le bouton 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 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 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
- Sélectionnez
Tous les outils pour voir la liste des outils du workspace.
- Sélectionnez
Preview.
Depuis la Barre de recherche :