Ce qu'il faut savoir
- Pour activer: Préférences > sélectionnez Avancé onglet > basculez Afficher le menu Développer dans la barre de menuson.
- Pour utiliser: sélectionnez Develop > Enter Responsive Design Mode dans la barre d'outils Safari.
Cet article explique comment activer le mode de conception réactif dans Safari 9 à Safari 13, sous OS X El Capitan via macOS Catalina.
Comment activer le mode de conception réactif dans Safari
Pour activer le mode de conception réactif de Safari, ainsi que d'autres outils de développement Safari:
-
Allez dans le menu Safari et sélectionnez Préférences.
Appuyez sur le raccourci clavier Commande+ , (virgule) pour accéder rapidement aux Préférences.
-
Dans la boîte de dialogue Préférences, sélectionnez l'onglet Avancé.
Image -
Au bas de la boîte de dialogue, cochez la case Afficher le menu Développer dans la barre de menus.
Image -
Vous verrez maintenant Develop dans la barre de menu supérieure de Safari.
Image -
Select Develop > Enter Responsive Design Mode dans la barre d'outils Safari.
Appuyez sur le raccourci clavier Option+ Command+ R pour passer rapidement en mode de conception réactive.
Image -
La page Web active s'affiche en mode Responsive Design. En haut de la page, choisissez un appareil iOS ou une résolution d'écran pour voir comment la page s'affichera.
Image -
Vous pouvez également voir comment votre page Web s'affichera sur différentes plates-formes en utilisant le menu déroulant au-dessus des icônes de résolution.
Image
Outils de développement Safari
En plus du mode Responsive Design, le menu Safari Develop propose d'autres options utiles.
Ouvrir la page avec
Ouvre la page Web active dans n'importe quel navigateur actuellement installé sur le Mac.
Agent utilisateur
Lorsque vous modifiez l'agent utilisateur, vous pouvez faire croire à un site Web que vous utilisez un autre navigateur.
Afficher l'inspecteur Web
Affiche toutes les ressources d'une page Web, y compris les informations CSS et les métriques DOM.
Afficher la console d'erreur
Affiche les erreurs et les avertissements JavaScript, HTML et XML.
Afficher la source de la page
Vous permet d'afficher le code source de la page Web active et de rechercher le contenu de la page.
Afficher les ressources de la page
Affiche les documents, scripts, CSS et autres ressources de la page actuelle.
Afficher l'éditeur d'extraits
Vous permet de modifier et d'exécuter des fragments de code. Cette fonctionnalité est utile du point de vue des tests.
Afficher le générateur d'extensions
Vous aide à créer des extensions Safari en empaquetant votre code en conséquence et en ajoutant des métadonnées.
Démarrer l'enregistrement de la chronologie
Vous permet d'enregistrer les requêtes réseau, l'exécution de JavaScript, le rendu de page et d'autres événements dans l'inspecteur WebKit.
Vider les caches
Supprime tous les caches stockés dans Safari, pas seulement les fichiers de cache de site Web standard.
Désactiver les caches
Avec la mise en cache désactivée, les ressources sont téléchargées à partir d'un site Web chaque fois qu'une demande d'accès est faite, par opposition à l'utilisation du cache local.
Autoriser JavaScript depuis le champ de recherche intelligente
Désactivée par défaut pour des raisons de sécurité, cette fonctionnalité permet de saisir des URL contenant du JavaScript dans la barre d'adresse de Safari.
