Safari

Si vous êtes développeur Web, Safari offre de nombreux outils pour vous aider. Mais pour accéder à ses outils, il faut activer le menu “Développement”.

Pour cela, allez dans le menu Safari → Préférences. Dans la section Avancées, cochez la case *Afficher le menu Développement dans la barre des menus.

Ce menu vous permet d'ouvrir la page active dans un autre navigateur (Sauf, évidemment, Internet Explorer/Edge, mais on s'en fout¹⁾ ), mais également d'autres applications associées.

Ce menu permet de modifier la valeur de User Agent ou Agent Utilisateur²⁾. Pour plus de détails, consultez la page Wikipédia .

L'option Autre Emplacement… vous permet de spécifier une valeur personnalisée d’User Agent, par exemple Pour Opera 34 :

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.73 Safari/537.36 OPR/34.0.2036.25

Ce qui donne ensuite dans le menu :

Responsive Design Mode

Voici une fonctionnalité très pratique et quasi incontournable pour vérifier votre site dans différentes résolutions.

Pour activer le mode de conception adaptative, allez dans le menu Développement → Passer en mode conception adaptative ou  ⌘ + ⌥ +R.

Lorsque vous activez le mode de conception adaptative, des résolutions sont déjà prédéfinies :

Il suffit de cliquer sur l'une de ces résolutions pour afficher votre site dans cette dernière.

Chacune des résolutions prédéfinies peut basculer d'un mode portrait vers un mode paysage, voire les modes “Split View” pour les appareils compatibles.

Bien entendu, vous avez également la possibilité de redimensionner manuellement à l'aide des “poignées de redimensionnement” situées de chaque côté et en bas. L'échelle sera adaptée automatiquement afin de pouvoir visualiser la page dans son ensemble.

Lorsque vous sélectionnez un appareil, l'agent utilisateur (User Agent) peut être automatiquement sélectionné. Dans ce cas, il est possible de voir apparaître une petite icône Attention à droite, comme ci-dessous :

Cela signifie que l'Agent utilisateur a été modifié et que pour le prendre en charge il est nécessaire de recharger la page  ⌘ +R.

Pour quitter le mode de conception adaptative, allez dans le menu Développement → Quitter le mode conception adaptative ou  ⌘ + ⌥ +R.

Traduction de la présentation officielle

L'inspecteur Web est un outil de développement web Open Source intégré à Safari pour simplifier le prototypage, l'optimisation et le débogage de votre contenu Web sur iOS et Mac OS X.

Affiche et permet d'inspecter les éléments constituant le DOM d'une page web. Le code HTML restitué à gauche est entièrement éditable et les détails sur la structure de la page, styles et calques sont disponibles sur la barre latérale de droite.

Affiche une liste détaillée de toutes les requêtes réseaux faites pour obtenir les ressources à l'élaboration de la page web. Cela inclus les documents, les images, les scripts, les feuilles de style, les requêtes XHR et plus encore.

Rassemble toutes les ressources d'une page web en incluant les documents, les images, les scripts, les feuilles de style, les requêtes XHR et autres ressources constituant la page, dans une liste organisée par genre.

C'est également cet outil qui est utilisé pour afficher le code source de la page (via le menu Développement → Afficher le code source de la page ou  ⌥ + ⌘ +U)

Affiche l'activité d'une page web en ouverture, telles que les requêtes réseaux, les rendus CSS, et les événements JavaScript clairement tracé de manière chronologique ou par rendu des images.

Pour utiliser la chronologie, vous devez procéder à un enregistrement. Exemple de procédure :

• Aller sur la page que vous souhaitez analyser.
• Menu Développement → Démarrer l'enregistrement chronologique (L'inspecteur Web s'ouvre s'il n'est pas encore ouvert)
• Recharger la page.
• Une fois la page chargée : Menu Développement → Arrêter l'enregistrement chronologique
• Il ne vous reste plus qu'à analyser les temps de chargement des différents éléments et voir s'il n'est pas possible d'optimiser certains chargements (comme des images un peu lourdes par exemple).

Exemple de rendu :

L'utilisation du débogueur permet de trouver la cause de toute erreur JavaScript sur une page web. Il est possible d'ajouter des points d'arrêt afin de mettre en pause l'exécution et d'observer plus facilement les types de données et les valeurs de chaque variable définie.

La console offre la possibilité de déboguer et modifier de manière interactive le contenu d'une page web en utilisant les commandes JavaScript.

Vous pouvez accéder directement à la console via le menu Développement → Afficher la console des erreurs ou  ⌥ +⌘ cmd+Ctrl

Affiche les détails sur les données stockées par une page web, comme les cookies, le stockage local, le stockage de session, le cache de l'application et l'index.

L'éditeur d'extraits est un bac à sable interactif permettant de tester du code HTML et CSS avec une prévisualisation directe.

• Vider les caches : Supprimer les données en cache pour forcer le rechargement distant de tous les éléments constituant la page web.
• Désactiver les caches : Force le chargement distant des éléments constituant la page web. Si vous travailler sur les feuilles de style, la mise en page ou les scripts pouvant être mis en cache, cela est fortement conseillé.

• Les images : Désactive globalement toutes les images pour ne restituer que le texte.
• Les Styles : Désactive globalement tous les styles de la page.
• JavaScript : Désactive globalement le JavaScript. En plus d'être une façon de déboguer, c'est aussi une sécurité pour certains sites.
• Les extensions : Désactive globalement les extensions Safari. Une méthode pour vérifier si certaines extensions pourraient influencer le rendu d'une page Web.
• Les altérations propres aux sites : Dans certains cas les ingénieurs d'Apple ont pu modifier Safari pour contourner un problème rencontré avec un site web. Si votre site fait partie de ces sites, et que vous souhaitez vérifier que ce dernier fonctionne correctement sans ces modifications, vous pouvez désactiver celles-ci grâce à cette option.
• Les restrictions de fichier local : Considère que tous les fichiers présents sur votre Mac comme ayant la même origine, si bien qu’ils peuvent accéder au contenu de l’un l’autre via des scripts ou des requêtes XHR. Cela permet à une copie d’un site web de fonctionner sur votre Mac comme si elle était en ligne.
• Les restrictions multi-origines : Désactive les contrôles de sécurité liés aux politique de même origine.

• Autoriser JavaScript à partir du champ de rechercher intelligent : Permet de saisir ou coller une URL contenant “javascript:” dans le champ d’adresse et de recherche.
  
• Considérer les certificats SHA-1 comme non sécurisés : Dans l'optique d'anticiper et tester les développements avant l'arrêt du support des certificats SHA-1, voir : Windows Enforcement of Authenticode Code Signing and Timestamping.

• https://developer.apple.com/videos/play/wwdc2015-505/ : Using Safari to Deliver and Debug a Responsive Web Design.

2380