Comment obtenir quelque chose de similaire à Firebug sur Safari?

Gérard-Étienne Loiseau
Gérard-Étienne Loiseau
• 5 min de lecture
Cliquez sur le bouton "Inspecter" dans la barre de menu de Firebug Lite
Cliquez sur le bouton "Inspecter" dans la barre de menu de Firebug Lite, puis mettez en surbrillance un élément de la page.

Firebug est une extension Firefox très populaire qui vous permet d'inspecter et de modifier des éléments sur une page Web. Cela vous permet d'apprendre comment les pages Web sont construites. Cela peut également aider lors du débogage de vos propres projets. Les outils de développement de Safari fournissent des fonctions similaires. Vous pouvez également utiliser le bookmarklet Firebug Lite pour charger une version simplifiée de Firebug sur n'importe quel site Web.

Méthode 1 sur 2: utiliser les outils de développement de safari

  1. 1
    Cliquez sur le menu safari et sélectionnez "Préférences". Safari comprend une suite d'outils de développement très similaires à Firebug. Ces outils doivent être activés pour les utiliser.
  2. 2
    Cliquez sur l'onglet "Avancé". Cela affichera les options avancées de Safari.
  3. 3
    Cochez la case "Afficher le menu de développement dans la barre de menu". Cela activera le menu Développer. Il apparaîtra à côté du menu Signets.
  4. 4
    Ouvrez l'inspecteur Web. L'inspecteur Web est très similaire à Firebug. Vous pouvez l'ouvrir à partir du menu Développer. Vous pouvez également appuyer sur ⌘ Command+ ⌥ Option+ I.
  5. 5
    Utilisez l'option ressources pour afficher les objets de la page Web. Ceux-ci incluent des feuilles de style, des fichiers HTML, des scripts, des images, etc. Il s'agit de la vue par défaut de Web Inspector.
    • La barre de navigation sur le côté gauche affichera tous les dossiers de contenu de la page actuelle. Utilisez ces dossiers pour accéder rapidement aux ressources dont vous avez besoin.
    • Les ressources sélectionnées sont affichées dans le cadre principal. Vous pouvez afficher le code des sites Web et d'autres fichiers ici. Vous pouvez également apporter des modifications au code, qui s'affichera en direct sur le site Web. Ces changements ne seront en vigueur que tant que le site sera ouvert.
    • Saisissez les commandes de débogage et inspectez les objets JavaScript à l'aide de la console.
    • La barre latérale droite décompose les détails de la sélection actuelle. Les modifications apportées ici seront affichées en direct sur le site Web.
    Cela est dû au fait qu'il est écrit en JavaScript afin qu'il puisse se charger sur n'importe quelle page
    Cela est dû au fait qu'il est écrit en JavaScript afin qu'il puisse se charger sur n'importe quelle page.
  6. 6
    Utilisez l'option de chronologie pour afficher l'activité du site. Les chronologies montreront quand les ressources sont appelées pendant que la page est utilisée. Vous pouvez également vérifier les demandes du réseau et afficher les événements JavaScript.
    • Vous pouvez voir les trois chronologies différentes en haut de la fenêtre Chronologies. Chacune des lignes représente une catégorie de chronologie différente.
    • Le cadre de gauche affiche les différents événements qui se produisent sur la chronologie. L'activité chronologique de chaque entrée sera affichée dans la fenêtre principale.
  7. 7
    Utilisez l'option du débogueur pour rechercher et corriger les erreurs javascript. L'option Debugger fournit les mêmes outils de débogueur que vous pouvez trouver dans Firebug. Utilisez le débogueur pour localiser et résoudre les problèmes avec votre code JavaScript. Vous pouvez définir des points d'arrêt sur votre code afin que la page s'interrompe à des endroits spécifiques. Cela vous permet de résoudre les problèmes JavaScript sur votre page ou d'apprendre comment JavaScript fonctionne en action.
  8. 8
    Changez votre agent utilisateur. De nombreuses personnes utilisent Firebug pour changer leur agent utilisateur actuel. Il s'agit de l'identifiant qui indique aux pages Web le navigateur et le système d'exploitation que vous utilisez. Ceci est utile pour charger des sites mobiles sur votre bureau ou pour voir à quoi ressemble un site à l'aide d'Internet Explorer sous Windows.
    • Cliquez sur le menu Développer et sélectionnez "User Agent".
    • Sélectionnez l'agent utilisateur souhaité dans la liste d'options. Vous pouvez ajouter un agent utilisateur personnalisé en sélectionnant "Autre", puis en saisissant le code correspondant.

Méthode 2 sur 2: utiliser Firebug Lite

  1. 1
    Visitez le site Web de Firebug Lite. Firebug Lite est un outil de bookmarklet qui vous donne accès à certains utilitaires Firebug de base. Il fonctionne dans n'importe quel navigateur Web. Vous pouvez l'utiliser pour apporter des modifications en direct au code HTML et CSS de la page. Vous pouvez également exécuter des commandes de console et vérifier des scripts. Vous pouvez obtenir Firebug Lite à partir de getfirebug.com/firebuglite.
  2. 2
    Faites défiler jusqu'à la section "canal stable". Ce sera la version la plus fonctionnelle et la plus stable de Firebug Lite. Si vous souhaitez essayer les dernières fonctionnalités, vous pouvez l'installer à partir de la section "Canal bêta". La version bêta peut être plus instable que la version normale.
  3. 3
    Faites un clic droit sur le lien "firebug lite". Sélectionnez "Copier l'adresse" dans le menu qui apparaît.
  4. 4
    Créez un nouveau signet. Ouvrez le menu Signets et sélectionnez "Créer un signet". Vous pouvez également appuyer sur ⌘ Command+ D. Cela ouvrira une nouvelle fenêtre pour créer un signet de la page actuelle.
    Vous pouvez également utiliser le bookmarklet Firebug Lite pour charger une version simplifiée de Firebug
    Vous pouvez également utiliser le bookmarklet Firebug Lite pour charger une version simplifiée de Firebug sur n'importe quel site Web.
  5. 5
    Collez l'adresse copiée dans le champ URL du nouveau signet. Cela changera le signet en code Firebug Lite. Donnez au signet un nom tel que "Firebug Lite".
  6. 6
    Utilisez votre signet pour charger l'interface firebug lite. Cliquez sur le signet Firebug Lite sur n'importe quel site Web. L'interface Firebug Lite se chargera en bas de votre fenêtre Safari.
  7. 7
    Inspectez les éléments sur la page. Cliquez sur le bouton "Inspecter" dans la barre de menu de Firebug Lite, puis mettez en surbrillance un élément de la page. La partie correspondante du fichier HTML du site sera mise en évidence dans le cadre Firebug Lite.
  8. 8
    Utilisez les onglets en haut du volet Firebug Lite. Ces onglets vous permettent d'accéder aux différentes fonctions de Firebug Lite. Ceux-ci incluent les éditeurs HTML et CSS, la console et les scripts actifs.
    • Firebug Lite ne peut pas accéder aux feuilles de style et aux scripts externes. Cela est dû au fait qu'il est écrit en JavaScript afin qu'il puisse se charger sur n'importe quelle page. Si vous avez besoin de ces outils, vous voudrez utiliser les outils de développement Safari.
Lisez aussi: Comment cacher du porno sur votre ordinateur?

Lisez aussi:

  1. Comment changer votre page de démarrage sur Safari?
  2. Comment supprimer les cookies à l'aide du navigateur Web Safari?
  3. Comment importer des signets dans Safari?
En parallèle
  1. Comment synchroniser les données Safari de l'iPhone avec iCloud?Antoine Paquette
  2. Comment masquer les publicités dans Safari sur un iPhone?Richard Pinto
  3. Comment autoriser les annonceurs à vous suivre dans Safari sur un iPhone?Enzo De Greef
  4. Comment bloquer les sites pour adultes?Ilias Borremans
  5. Comment bloquer le porno de la recherche Google?Philippe Delaunay
  6. Comment activer un WiFi virtuel sous Windows?Lowie Brasseur
FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail