L'inspecteur Web de Safari vous permet d'examiner des pages Web sur macOS. C'est un outil pratique pour les développeurs Web et les utilisateurs curieux.Pour utiliser Web Inspector, vous devez l'activer dans les paramètres de Safari.
Une fois activé, Web Inspector ouvre un monde de détails de pages Web. Vous pouvez voir le HTML, le CSS et le JavaScript qui composent une page. Cet outil vous aide à trouver des bogues, à tester des conceptions et à apprendre comment fonctionnent les sites Web.
L'inspecteur Web est facile à utiliser. Faites un clic droit sur n'importe quelle partie d'une page Web et sélectionnez « Inspecter l'élément ». Une nouvelle fenêtre apparaît avec tout le code de la page. Vous pouvez changer les choses et voir les résultats immédiatement sur la page.
Ouverture du menu Développement
Pour exploiter les outils de développement de Safari, vous devez d'abord activer le menu « Développer ». Accédez àSafari>Préférences>Avancéet cochez la case à côté de « Afficher le menu Développement dans la barre de menus ». Cela débloque une suite d’outils conçus pour améliorer votre flux de travail de développement Web.
1. Cliquez sur Préférences dans le menu Safari
2. Cliquez sur l'onglet Avancé
3. Cochez Afficher les fonctionnalités pour les développeurs Web
4. Le menu de développement s'affichera
Inspecter les éléments avec précision
L'outil « Inspecter l'élément » est votre passerelle pour comprendre la structure d'une page Web. Faites un clic droit sur n’importe quel élément et choisissez « Inspecter l’élément ». Un panneau apparaîtra, affichant le code HTML, CSS et JavaScript responsable de l'apparence et du comportement de cet élément.
Débogage du code JavaScript
La console JavaScript de Safari est essentielle pour identifier et corriger les erreurs dans votre code. Utilisez la console pour enregistrer les messages, inspecter les variables et parcourir l'exécution de votre code. Vous pouvez accéder à la console depuis le menu Développer ou en appuyant surOption + Commande + C.
Surveillance de l'activité du réseau
L'onglet Réseau des outils de développement de Safari fournit une vue détaillée de toutes les requêtes réseau effectuées par une page Web. Cela peut vous aider à diagnostiquer les goulots d'étranglement des performances, à identifier les ressources à chargement lent et à optimiser la vitesse de chargement de votre site Web.
Tests de conception réactifs
Le mode de conception réactif de Safari vous permet de simuler différentes tailles d'écran et différents appareils pour garantir que votre site Web s'affiche et fonctionne correctement sur un large éventail de plates-formes. Cette fonctionnalité est inestimable pour créer des sites Web réactifs qui s’adaptent à différentes résolutions d’écran.
Outils de développement supplémentaires
| Outil | Description |
|---|---|
| Stockage | Inspectez et gérez les données du site Web stockées dans les cookies, le stockage local et le stockage de session. |
| Chronologies | Analysez les performances des processus de rendu, de script et de mise en page d'un site Web. |
| Calques | Visualisez les couches d'une page Web et identifiez les problèmes de rendu. |
| Ressources | Afficher et modifier les ressources (images, polices, etc.) utilisées par une page Web. |
| Console | Affichez les journaux, les avertissements et les erreurs JavaScript. |
| Recherche | Effectuez une recherche dans le code HTML, CSS et JavaScript d'une page Web. |
| Débogueur | Parcourez le code JavaScript, définissez des points d'arrêt et inspectez les variables. |
| Réseau | Surveillez l’activité du réseau, y compris les demandes et les réponses. |
| Éléments | Afficher et modifier le HTML et le CSS d'une page Web. |
| Conception réactive | Simulez différentes tailles d'écran et différents appareils. |
| Performance | Analyser les performances du site Web et identifier les domaines à améliorer. |
| Mémoire | Surveillez l'utilisation de la mémoire et détectez les fuites de mémoire. |
| Sécurité | Afficher les détails de sécurité d'un site Web, y compris les certificats et les informations de connexion. |
| Vérifications | Obtenez des suggestions pour améliorer l’accessibilité, les performances et le référencement du site Web. |
| Extensions de l'inspecteur Web | Étendez les fonctionnalités des outils de développement de Safari avec des extensions personnalisées. |
Points clés à retenir
- L'inspecteur Web de Safari doit être activé dans les paramètres
- Web Inspector affiche le code derrière les pages Web
- Vous pouvez utiliser Web Inspector pour tester et en savoir plus sur les sites Web.
Activation de l'inspecteur Web dans Safari
Web Inspector est un outil puissant pour examiner les pages Web dans Safari. Il vous permet d'afficher les problèmes de code et de débogage.
La combinaison de touches est :⌘⌥i
Voir aussi :RÉSOLU : les pages Web semblent étranges dans Safari
Afficher le menu Développement dans la barre de menus
Pour utiliser Web Inspector, vous devez d’abord activer le menu Développer. Ouvrez Safari et cliquez sur Safari > Préférences dans la barre de menu supérieure. Cliquez sur l'onglet Avancé. Cochez la case à côté de « Afficher le menu Développement dans la barre de menus ».
Le menu Développer apparaîtra désormais dans la barre de menus de Safari. Ce menu propose de nombreuses options utiles pour les développeurs Web.
Accès aux fonctionnalités de l'inspecteur Web
Une fois le menu Développer visible, vous pouvez ouvrir Web Inspector. Accédez à la page Web que vous souhaitez consulter. Cliquez sur Développer > Afficher l'inspecteur Web dans la barre de menu. Vous pouvez également utiliser le raccourci clavier Option + Commande + I.
Une autre façon d'ouvrir Web Inspector consiste à cliquer avec le bouton droit sur n'importe quelle partie d'une page Web et à sélectionner « Inspecter l'élément ». Cela ouvre l'inspecteur et se concentre sur cet élément spécifique.
Web Inspector comporte plusieurs onglets avec différents outils. L'onglet Éléments affiche la structure HTML de la page. L'onglet Console affiche la sortie JavaScript et les erreurs. D'autres onglets vous aident à vérifier l'activité du réseau, le stockage et bien plus encore.
Utilisation de Web Inspector pour le développement
Web Inspector est un outil puissant pour les développeurs travaillant avec Safari sur macOS. Il vous permet de consulter et de modifier le code d'une page Web directement dans le navigateur.
Inspection et modification du HTML et du CSS
Web Inspector affiche le code HTML et CSS d'une page. Vous pouvez voir comment les éléments sont imbriqués et stylisés. Cliquez sur n'importe quel élément pour afficher ses détails. Vous pouvez modifier les propriétés CSS en direct pour tester les modifications. Cela permet de résoudre rapidement les problèmes de mise en page.
L'onglet Éléments affiche la structure de la page. Il affiche les balises et les attributs HTML. Vous pouvez développer et réduire des sections pour vous concentrer sur des parties spécifiques. Double-cliquez sur le texte pour modifier directement le contenu.
Le volet Styles affiche les règles CSS pour l'élément sélectionné. Vous pouvez activer et désactiver des règles ou modifier des valeurs. De nouveaux styles peuvent être ajoutés pour tester rapidement les idées. Ces modifications sont temporaires et réinitialisées lorsque vous rechargez la page.
Débogage et dépannage
Web Inspector aide à trouver et à résoudre les problèmes de code. L'onglet Console affiche les avertissements d'erreurs et les journaux. Vous pouvez exécuter des commandes JavaScript ici pour tester des idées.
L'onglet Sources vous permet de définir des points d'arrêt dans votre code. Cela suspend l'exécution afin que vous puissiez parcourir ligne par ligne. Vous pouvez observer les variables et voir comment les valeurs changent au fur et à mesure de l'exécution du code.
L'onglet Réseau affiche toutes les ressources chargées par la page. Cela inclut les scripts d’images et les fichiers de données. Vous pouvez voir les temps de chargement et la taille des fichiers. Cela permet de détecter les problèmes de performances.
Outils avancés d'inspecteur Web
Web Inspector dispose d’outils pour une analyse plus approfondie. L'onglet Stockage affiche les données enregistrées par le site comme les cookies et le stockage local. Vous pouvez afficher et modifier ces données.
L'onglet Chronologie enregistre l'activité de la page au fil du temps. Il indique quand les scripts sont exécutés et les mises à jour des mises en page. Cela aide à trouver les parties lentes de votre code.
L'onglet Calques visualise les calques composites de la page. Ceci est utile pour repérer les problèmes de rendu. Vous pouvez voir comment les éléments sont empilés et repeints.
Ces outils donnent aux développeurs une vue complète de leurs pages Web. Ils facilitent la création de sites rapides et sans bugs.
Safari comprend des outils de développement intégrés : vous n'avez rien à installer pour déboguer les problèmes dans le navigateur.