Contenu
- Accéder aux outils de développement dans le navigateur Web d'Apple
- Comment activer le mode de conception adaptative dans Safari
- Outils de développement Safari
Accéder aux outils de développement dans le navigateur Web d'Apple
S'assurer que les sites Web et les applications Web prennent en charge une multitude d'appareils et de plates-formes est une tâche essentielle pour les développeurs Web. Le navigateur Web Safari d'Apple comprend un mode Responsive Design qui vous permet de prévisualiser le rendu de votre site à différentes résolutions d'écran et sur différentes versions d'iPad, iPhone et iPod touch.
Les instructions de cet article s'appliquent à Safari 13 pour macOS. Le mode Responsive Design n'est pas disponible dans la version Windows.
Comment activer le mode de conception adaptative dans Safari
Pour activer les outils de développement et le mode Responsive Design de Safari:
-
Sélectionner Safari > Préférences dans la barre d'outils Safari.
Vous pouvez également utiliser le raccourci clavier Commander+Virgule (,) pour accéder au menu Préférences.
-
Dans le menu Préférences, sélectionnez le Avancée onglet et cochez la case à côté Afficher le menu de développement dans la barre de menus. Une nouvelle option devrait maintenant être disponible dans la barre d'outils Safari en haut de l'écran.
-
Sélectionner Développer > Entrez en mode de conception adaptative dans la barre d'outils Safari.
Vous pouvez également utiliser le raccourci clavier Option+Commander+R pour passer en mode Responsive Design.
-
La page Web active doit maintenant être affichée en mode Responsive Design. En haut de la page, choisissez un appareil iOS ou une résolution d'écran pour voir le rendu de la page.
Vous pouvez également demander à Safari de simuler différents agents utilisateurs en utilisant le menu déroulant directement au-dessus des icônes de résolution.
Outils de développement Safari
En plus du mode Responsive Design, le menu Développement de Safari propose de nombreuses autres options utiles, notamment:
- Ouvrir la page avec: Ouvrez la page Web active dans tout autre navigateur actuellement installé sur votre Mac.
- Agent utilisateur: La modification de l'agent utilisateur oblige les serveurs Web à identifier votre navigateur comme autre chose que Safari.
- Connecter l'inspecteur Web: Affichez 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 avertissements JavaScript, HTML et XML.
- Afficher la source de la page: Afficher et rechercher le code source de la page Web active.
- Afficher les ressources de la page: Afficher les documents, scripts, CSS et autres ressources de la page actuelle.
- Afficher l'éditeur d'extraits: Modifier et exécuter des fragments de code. Cette fonctionnalité est très utile du point de vue des tests.
- Afficher le générateur d'extensions: Créez vos propres extensions Safari en empaquetant votre code en conséquence et en ajoutant des métadonnées.
- Démarrer l'enregistrement de la chronologie: Enregistrez les requêtes réseau, l'exécution de JavaScript, le rendu de page et d'autres événements dans WebKit Inspector.
- Caches vides: Supprimez tous les caches stockés dans Safari, pas seulement les fichiers de cache de site Web standard.
- Désactiver les caches: Lorsque la mise en cache est désactivée, les ressources sont téléchargées à partir d'un site Web chaque fois qu'une demande d'accès est effectuée, par opposition à l'utilisation du cache local.
- Autoriser JavaScript à partir du champ de recherche intelligente: Désactivée par défaut pour des raisons de sécurité, cette fonctionnalité vous permet de saisir des URL contenant JavaScript dans la barre d'adresse de Safari.
- Traitez les certificats SHA-1 comme non sécurisés: Abréviation de Secure Hash Algorithm, la fonction de hachage SHA-1 s'est avérée moins sécurisée qu'on ne le pensait à l'origine, d'où l'ajout de cette option dans Safari.
