Devenir développeur Web dans le monde actuel signifie supporter une multitude d'appareils et de plates-formes, ce qui peut parfois s'avérer être une tâche ardue. Même avec le code le mieux conçu, conforme aux normes Web les plus récentes, vous pouvez toujours constater que certaines parties de votre site Web peuvent ne pas ressembler ou ne pas fonctionner comme vous le souhaitez sur certains appareils ou résolutions. Face au défi de prendre en charge un si large éventail de scénarios, disposer des outils de simulation appropriés peut s'avérer inestimable.
Si vous êtes l'un des nombreux programmeurs utilisant un Mac, les outils de développement de Safari sont toujours utiles. Depuis la sortie de Safari 9, cette fonctionnalité s’est considérablement élargie, notamment grâce au mode Responsive Design, qui vous permet de voir comment votre site sera rendu à différentes résolutions d’écran, ainsi que sur différentes versions de iPad, iPhone et iPod touch.
Ce didacticiel explique comment activer le mode de conception réactif et comment l'utiliser pour vos besoins de développement.
Préférences Safari
Tout d'abord, ouvrez votre navigateur Safari.
Cliquer sur Safari dans le menu du navigateur, situé en haut de l'écran. Lorsque le menu déroulant apparaît, sélectionnez le Préférences option encerclée dans l'exemple présenté.
Remarque: Vous pouvez utiliser le raccourci clavier suivant au lieu de l’élément de menu susmentionné: COMMANDE + COMMA (,)
02 de 05Afficher le menu de développement
La boîte de dialogue Préférences de Safari devrait maintenant être affichée, superposant la fenêtre de votre navigateur. D'abord, cliquez sur le Avancée icône représentée par un engrenage et située dans le coin supérieur droit de la fenêtre.
Les préférences avancées du navigateur devraient maintenant être visibles. En bas se trouve une option accompagnée d’une case à cocher, intitulée Afficher le menu de développement dans la barre de menu et encerclé dans l'exemple ci-dessus. Cliquez une fois sur la case pour activer ce menu.
03 de 05Entrer en mode de conception réactif
Une nouvelle option devrait maintenant être disponible dans votre menu Safari, situé en haut de l'écran, intitulé Développer. Cliquez sur cette option.
Lorsque le menu déroulant apparaît, sélectionnez Entrer en mode de conception réactifencerclé dans l'exemple présenté.
Remarque: Vous pouvez utiliser le raccourci clavier suivant au lieu de l’élément de menu susmentionné:OPTION + COMMAND + R
04 de 05Mode de conception réactif
La page Web active doit maintenant être affichée en mode Conception réactif, comme illustré dans l'exemple ci-dessus. En sélectionnant l'un des périphériques iOS répertoriés, tels que l'iPhone 6, ou l'une des résolutions d'écran désignées disponibles, telles que 800 x 600, vous pouvez voir immédiatement comment la page sera rendue sur ce périphérique ou dans cette résolution d'affichage.
En plus des périphériques et des résolutions indiqués, vous pouvez également demander à Safari de simuler un autre agent utilisateur, tel qu'un autre à partir d'un navigateur différent, en cliquant sur le menu déroulant affiché directement au-dessus des icônes de résolution.
05 de 05Menu Développer: Autres options
Outre le mode Responsive Design, le menu Développer de Safari 9 offre de nombreuses autres options utiles, dont certaines sont répertoriées ci-dessous.
- Ouvrir la page avec: Vous permet d'ouvrir la page Web active dans tout autre navigateur actuellement installé sur votre Mac.
- Agent utilisateur: La modification de l'agent d'utilisateur amène les serveurs Web à identifier votre navigateur comme autre chose que Safari 9.
- Connect Web Inspector: L'inspecteur Web de Safari 9 affiche toutes les ressources d'une page Web, ce qui permet de consulter les informations CSS, les métriques DOM et la structure, ainsi que son code source natif.
- Afficher la console d'erreur: L'une des options les plus utilisées dans le menu Développement, cette console affiche les erreurs et les avertissements JavaScript, HTML et XML.
- Afficher la source de la page: Vous permet d'afficher et de rechercher le code source de la page Web active.
- Afficher les ressources de la page: La sélection de cette option affiche les documents, scripts, CSS et autres ressources de la page en cours.
- Afficher l'éditeur de fragments: Permet de modifier et d'exécuter des fragments de code, par opposition à une page complète. Cette fonctionnalité est très utile du point de vue des tests.
- Afficher le constructeur d'extension: Vous permet de créer vos propres extensions Safari en empaquetant votre code en conséquence et en ajoutant des métadonnées.
- Démarrer l'enregistrement sur la timeline: Enregistre un certain nombre d'éléments, notamment les requêtes réseau, l'exécution de JavaScript, le rendu de la page et d'autres événements pour une période définie par l'utilisateur, tous visualisables dans l'inspecteur WebKit.
- Caches vides: Un clic sur cette option supprime tout le cache stocké 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 depuis un site Web chaque fois qu'une demande d'accès est faite, 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 du JavaScript dans la barre d'adresse de Safari.
- Traiter les certificats SHA-1 comme non sécurisés: Abréviation de Secure Hash Algorithm, la fonction de hachage SHA-1 s’est révélée moins sûre que prévu, d’où l’ajout de cette option dans Safari 9.
