Comment installer Firebug Lite sur Chrome et Internet Explorer ? [vidéo]

Comment installer Firebug Lite sur Chrome et Internet Explorer ? [vidéo]

Le mois passé, je vous donnais 5 astuces pour construire sur des bases solides votre activité online.

J’y mentionnais notamment Firebug, l’outil indispensable-à-connaître-absolument.

Malheureusement, comme son nom le suggère, ce module n’est disponible que pour Firefox. Les utilisateurs de Chrome (voire ceux qui sont contraints d’utiliser Internet Explorer) étaient alors mis de côté.

Devant vos réclamations, et l’inefficacité des outils de développements intégrés en natif chez ces deux navigateurs, je me suis partie à la recherche d’un équivalent à Firebug.

Firebug Lite, une version allégée mais performante.

J’avoue que j’avais complètement oublié ce module, croisé brièvement à sa sortie.

Dans cette vidéo, je vous détaille les procédures d’installation pour installer Firebug (ou sa version allégée) sur Firefox, Chrome et Internet Explorer. Comme ça, il y en a pour tout le monde, faîtes votre choix! :)

Cliquez ici pour afficher la transcription de la vidéo :
« Tuto N° 5 - Installer Firebug sur Chrome, IE et Firefox »


Bonjour à tous. Ici Marie-Eve du blog Les Doigts Dans Le Net. Aujourd’hui, je vais vous montrer comment installer Firebug sur Firefox et également sur les deux autres navigateurs qui sont très couramment employés, à savoir Chrome et Internet Explorer.

Installer Firebug sur Firefox 00:17

Firefox est le navigateur pour lequel Firebug avait été conçu en premier lieu. Donc c’est là où c’est en fait le plus facile de l’installer et c’est aussi là où vous allez avoir la version la plus complète, la plus poussée de Firebug. Donc pour l’installer, comment faire?

Bien, c’est très simple : il suffit en fait d’installer le module complémentaire qui est dédié à Firefox. Donc vous tapez « module complémentaire », sur Google dans Firefox. Et vous allez arriver sur le site qui regroupe tous les modules complémentaires Firefox. C’est ce qu’on appelle également des « addons ».

Donc le site, vous voyez, c’est : http//addons.mozilla.org. Vous cliquez dessus. Nous sommes ici sur le site qui regroupe l’ensemble des modules complémentaires de Firefox. Donc vous recherchez Firebug et vous cliquez sur un « Enter ».

Voilà, Firebug est ici. Vous voyez, je peux directement l’ajouter à Firefox à partir de la liste et c’est ce que je vais faire. Je clique donc sur « Ajouter à Firefox » et donc, le module se télécharge, il va s’installer. Il me demande si je suis bien sûre de vouloir installer. Donc vous mettez « Installer maintenant », clic, et le logiciel va s’installer.

Ensuite il va vous demander de relancer votre navigateur. Moi, je ne vais pas le faire parce que je l’ai déjà, Firebug, donc je ne vais pas m’amuser à le réinstaller une deuxième fois. Ça pourrait créer des conflits, mais je vous encourage vivement à cliquer sur « Installer maintenant », puis à redémarrer votre navigateur pour que les modifications soient prises en compte.

Utiliser Firebug

Une fois que cela est fait, vous n’avez qu’à cliquer sur F12 pour ouvrir Firebug et pouvoir l’utiliser. Vous voyez, quand j’appuie sur F12, il y a la console ici en bas qui s’ouvre.

Pour l’instant, je ne vais pas rentrer dans les détails de ses fonctionnalités; ça fera l’objet d’une autre vidéo, mais sachez que vous avez énormément d’informations qui sont regroupées à l’intérieur même de Firebug.

Donc voilà, c’était très, très simple pour Firefox. Vous avez vu : il suffit d’installer le module complémentaire, on clique dessus, tout se fait tout seul et ensuite pour l’activer, on a juste à appuyer sur F12 et pour le cacher, appuyez encore sur F12. C’est vraiment très simple à faire.

Malgré tout, Firefox ne contente pas tout le monde. Je sais que certaines personnes préfèrent utiliser Chrome et en effet, je vous comprends. C’est vrai que Chrome est quand même beaucoup plus rapide; ça, il n’y a pas photo. Maintenant, Firebug n’existe pas vraiment pour Chrome. Par contre, il existe une version allégée qu’on appelle Firebug Lite que personnellement je n’utilise pas beaucoup, mais si vous, vous préférez développer sur Chrome, voici la marche à suivre pour pouvoir installer une version allégée de Firebug sur ce navigateur.

Installer Firebug Lite sur Chrome

Donc maintenant, je suis sur Chrome. Je vais aller en fait sur un site qui s’appelle « Get Firebug » : getfirebug.com/firebuglite . Je mettrai le lien juste en dessous de la vidéo. Voilà. Donc j’arrive en fait sur le site Internet de Firebug et comme je suis en fait sur la page « Firebug Lite », ils me proposent directement le bouton pour installer Firebug Lite. Donc je vais cliquer dessus.

Vous voyez, c’était un faux bouton; c’est en fait une ancre qui nous amène un peu plus bas sur la page. Ici il y a le chapitre d’installation.

Choisir la bonne version de Firebug Lite

Il y a quatre versions de Firebug Lite : une version stable qui est utilisée en production, une version de débug, une version bêta et une version pour les développeurs. Donc je vous conseille évidemment d’utiliser la version stable. On clique dessus, c’est encore une ancre.

Elle nous amène un peu un peu plus loin sur la page et ici vous avez enfin le vrai lien « Add the following link to your bookmarks ».

Comment installer Firebug Lite ?

Comment l’ajouter ? En fait, il suffit de glisser-déposer ce lien vers vos favoris pour pouvoir utiliser Firebug Lite. Vous le prenez et vous le glissez jusqu’à votre barre de favoris ici et vous le lâchez. Donc vous voyez, moi je l’avais déjà une fois, maintenant je l’ai une deuxième fois. Je vais supprimer le deuxième.

Si cette barre n’apparaît pas, ou si vous ne voyez pas cette barre, pour la faire apparaître, il faut aller ici dans les réglages et ensuite vous avez ici dans « Favoris » :

Favoris > Afficher la barre de favoris

Vous cliquez dessus et là vous avez « Afficher la barre de favoris ». Donc vous voyez, il faut que ce soit coché devant. Si c’est décoché chez vous, bien je vous incite à cliquer sur cette barre de titres pour le cocher et alors automatiquement vous allez avoir cette barre de favoris qui apparaît sur Google Chrome.

Utiliser Firebug Lite dans Chrome

Et maintenant que Firebug est installé, bien pour l’utiliser c’est très simple. Vous allez sur n’importe quel site sur lequel vous souhaitez utiliser Firebug Lite et quand le site est chargé, vous n’avez qu’à cliquer en fait sur le bouton Firebug Lite.

Alors on va laisser le temps à mon site de se charger. Voilà, je ne vous influence pas du tout en choisissant mon site comme exemple. J’ai cliqué sur Firebug Lite; vous voyez ici qu’il y a une console qui apparaît sur le bas de la page. Le look est un petit peu plus sobre que le Firebug complet parce que comme je vous le disais, il ya beaucoup moins de fonctionnalités.

Mais vous pouvez inspecter l’élément et donc ici, vous avez également la console, et ici la fenêtre d’édition de votre CSS qui s’ouvre. Encore une fois, je ne rentre pas dans le détail du fonctionnement de Firebug Lite maintenant. Cette vidéo est consacrée uniquement à l’installation et je ferai d’autres vidéos pour vous expliquer spécifiquement les différentes fonctionnalités que vous pouvez utiliser avec ces modules complémentaires.

Voilà : pour le refermer, c’est comme sur Firefox. Vous n’avez qu’à cliquer ici sur le petit bouton « Désactiver Firebug ». Voilà, hop, c’est réglé. Voilà pour le deuxième navigateur. Et maintenant, il nous reste le dernier : Internet Explorer.

Installer Firebug Lite sur Internet Explorer

Alors pour Internet Explorer évidemment, c’est un peu plus compliqué : c’est normal, c’est Internet Explorer. Vous l’aurez compris, je n’aime pas beaucoup ce logiciel et ce d’autant plus que j’ai Internet Explorer 8 qui commence un petit peu à dater et surtout qui buggue pas mal. Donc ce n’est pas génial, mais bon.

Personnellement je ne l’utilise pas, sauf quand je dois visionner les sites que je développe sur un autre environnement, mais même auquel cas il m’arrive plus souvent d’utiliser IE Tester qui est un logiciel que j’aurai l’occasion de vous présenter plus tard.

Installer Firebug Lite sur Internet Explorer. Comme sur Chrome, je vais aller sur http://getFirebug.com/firebuglite. Je vais taper, voilà, juste cette adresse et donc vous allez ensuite choisir « Installer Firebug Lite ». Ça vous amène aux quatre choix ici de versions de Firebug Lite. Vous choisissez la stable et enfin, comme pour Chrome, on a donc ce petit bookmarklet à installer dans notre barre de favoris.

Un volet à la place de la barre de favoris, pour y installer le bookmarklet de Firebug Lite

Et c’est là où ça se complique un petit peu parce qu’en fait Internet Explorer n’a pas une barre de favoris comme les autres navigateurs ici. Eux en fait, ils ont un volet. Donc il faut cliquer ici. Voilà, ici quand vous cliquez sur Favoris, vous avez un volet des favoris qui apparaît et nous, nous allons mettre notre bookmarklet ici, en fait. Donc je vous montre comment faire.

  • Vous allez d’abord sur le lien, vous faites un clic-droit, et vous cliquez sur « Copier le raccourci ».
  • Ensuite vous ouvrez votre volet de favoris, vous cliquez sur « Ajouter aux favoris », voilà.
  • Vous faites « Ajouter », maintenant vous avez déjà une entrée, une nouvelle entrée dans votre volet de favoris, mais il ne contient pas en fait la bonne URL.
  • Donc pour ça nous allons le cliquer, le modifier, en fait. Donc vous cliquez dessus avec un clic-droit et vous faites « Propriétés ».
  • Vous collez plutôt le raccourci que vous avez copié à cet endroit-là, et vous cliquez sur « OK ».
  • Ici, il vous met un message d’erreur; c’est classique. Vous dites « Oui », quand même. « Souhaitez-vous conserver néanmoins cette cible? » « Oui, je souhaite la conserver ».

Et donc voilà, maintenant à partir de là, Firebug Lite est aussi installé sur Internet Explorer. Et donc on peut tester ça sur mon site.

On va dans le volet Favoris, on clique sur Firebug Lite en bas ici et il faut attendre un petit peu parce que c’est un petit peu long sur Internet Explorer. Le volet va s’ouvrir en bas, mais ça, ça prend un petit peu de temps. Voilà, en fait, il se réduit _je ne l’utilise jamais. Donc il se réduit une fois qu’on l’a déjà ouvert une première fois et qu’on l’a refermé. Même si on le désinstalle et qu’on le réinstalle, en fait, il se met dans le coin, comme ça. Donc pour l’ouvrir, il faut juste cliquer ce petit point. Voilà.

Bien, j’espère que cette vidéo vous aura été utile et je vous dis à très bientôt sur Les Doigts Dans Le Net.

Fin de la transcription

Résumé

Firebug pour Firefox

  • Cliquez sur ce lien pour aller sur le site des modules complémentaires de Firefox (https://addons.mozilla.org/fr/firefox/search/?q=firebug&appver=12.0&platform=windows) (ouvrez le site avec Firefox sinon ça ne fonctionnera pas)
  • Cliquez sur « Firebug » dans la liste
  • Dans la fenêtre qui s’ouvre, cliquez sur le bouton « Installez »
  • Quand le module est installé, fermez votre navigateur et rouvrez-le pour que les modifications soient prises en compte
  • Appuyer alternativement sur F12 pour ouvrir ou fermer Firebug

Firebug Lite pour Chrome

  • Allez sur le site officiel de Firebug, sur la page concernant Firebug Lite ) (ouvrez le site avec Chrome sinon ça ne fonctionnera pas)
  • Cliquez sur le gros bouton rouge à droite « Install Firebug »
  • Vous êtes envoyé un peu plus bas sur la page, dans une section « Install ». Cliquez sur le lien rouge « Stable channel »
  • Vous êtes envoyé un peu plus bas sur la page, dans une section « Stable Channel ». Glissez-déposez le lien dans votre barre de favoris
  • Appuyer alternativement sur ce raccourci pour ouvrir ou fermer Firebug Lite

Si vous n’avez pas de barre de favoris en haut de votre navigateur: allez dans les paramètres, puis « Favoris » puis cochez « Afficher la barre de favoris ». Regardez la vidéo pour une démonstration plus vivante !

Firebug Lite pour Internet Explorer (IE pour les intimes)

  • Allez sur le site officiel de Firebug, sur la page concernant Firebug Lite ) (ouvrez le site avec IE sinon ça ne fonctionnera pas)
  • Cliquez sur le gros bouton rouge à droite « Install Firebug »
  • Vous êtes envoyé un peu plus bas sur la page, dans une section « Install ». Cliquez sur le lien rouge « Stable channel »
  • Vous êtes envoyé un peu plus bas sur la page, dans une section « Stable Channel ». Copiez l’adresse de ce lien avec un clic droit > « Copier le raccourci ».
  • Ouvrez le volet de favoris, et ajoutez la page courante comme favoris.
  • Editez les propriétés du Favoris et remplacer l’url par le lien copié précédemment.
  • Appuyer alternativement sur ce raccourci pour ouvrir ou fermer Firebug Lite

Plus de renseignement concernant le volet de raccourci dans la vidéo!

Avez-vous réussi à installer Firebug dans votre navigateur favoris ? Savez-vous à quoi sert Firebug ?

firebug lite avis, firebug lite installation, firebug pour chrome, firebug pour internet explorer, installer firebug lite, tutoriel, vidéo, webmaster

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

15 commentaires

  1. un bon video, firebug est utile surtout si on veut analyser, personnaliser nos blogs…
    Un must have pour un blogueur, non?

    Répondre
  2. Salut Marie-Eve,

    C’était ma question : à quoi sert Firebug ou Firebug Lite?

    Je n’ai ni l’un ni l’autre et si je clique droit, j’ai «inspecter l’élément» et le tableau qui s’affiche en bas ressemble à ce que tu nous montres avec Firebug. J’utilise Chrome.

    Bonne journée!

    Sco! :)

    Répondre
  3. Bonjour,

    Je me joins à Sco pour sa question et hâte d’avoir des réponses. j’ai chrome également.

    A bientôt et merci

    Répondre
  4. @ Ahmed: tout à fait d’accord, à avoir absolument!

    @Sco!: salut Sco!, ça fait plaisir de te revoir dans le coin 😉 Ce que tu décris, c’est l’outil de développement natif de chrome. Il existe aussi chez d’autres navigateurs. C’est un genre de mini-firebug. Moins complet et moins puissant mais on peut déjà faire quelques trucs. Jusque là, je me contentais de ça sur chrome, et depuis que j’ai tourné cette vidéo, j’utilise FirebugLite. Avec un peu plus d’expérience, je pourrais comparer les deux.A+

    @Trendi: bonjour, j’ai répondu à Sco! 😉 A très bientôt

    Répondre
  5. Salut Marie Eve, belle vidéo, tu utilise quel logiciel ? Moi sous mac je conseils ScreenFlow.

    FireBug outil indispensable pour les développeurs ou tout ceux qui touchent un peu au code !! Il y a aussi MARKLOGIC qui est complémentaire. Par contre je ne savais pas que FireBug existant sous Chrome via LITE. Génial !!

    Répondre
    • Salut David,
      J’utilise Camtasia (sous PC), il me semble que la section « screencast » de camtasia est équivalent à screenflow. Est-ce que screenflow permet aussi de filmer via la caméra et de faire des montages son et vidéo ?

      Répondre
      • Salut Marie-Eve, je n’avais pas vu ta réponse.
        Oui il y a un petit logiciel de montage inclus. Il y a moyen de faire pas mal de choses.

        Merci pour tes retours !! J’espere que tu va bien !

        Bizouxx

  6. Petite question : Quel est l’intérêt d’installer firebug sur Chrome alors qu’il fourni une analyse similaire de site internet ? Après ça peut être une histoire d’habitude mais je trouve limite mieux l’analyse de Chrome que celle de Firebug.

    Répondre
    • En fait, je n’utilisais pas Firebug Lite jusqu’à la publication de cet article (demandé par un lecteur). Moi aussi, je me contentais de l’outil d’analyse intégré en natif dans Chrome. (surtout parce que je fais 95% du dev sur Firefox)

      Et puis finalement, depuis que je l’ai installé, je l’utilise et j’avoue que je préfère l’ergonomie de Firebug Lite à celui de l’outil natif. Mais je pense que c’est surtout du fait de l’habitude, je suis complètement accro à Firebug…

      Et dans votre cas, c’est l’inverse…l’habitude aussi sûrement.

      Sinon côté fonctionnalité, je trouve Firebug Lite plus fourni que l’outil de Chrome, mais encore une fois, je pense que ça vient de mon expérience, connaissant très bien Firebug…

      Répondre
  7. Sur IE, il y a aussi la debugbar qui permet de faire plein de choses et qui a évolué récemment avec de nouvelles fonctionnalités.

    Bien pratique quand c’est relié avec IEtester pour tester toutes les versions d’IE d’un coup et trouver où est le souci.

    bonne continuation

    Répondre
    • Ah oui, j’utilisais ça aussi avant! Bien pratique en effet, quand on doit débugger sur IE. Et une mention spéciale pour IEtester, qui est incontournable sur IE! Savais-tu que les développeurs demandaient depuis longtemps à MS de faire cet outil ? Mais ils répondaient que c’était techniquement impossible…jusqu’à ce quelqu’un le fasse (en dehors de MS bien sûr).

      Répondre
      • HAHA Techniquement impossible ou pas rentable, tel est la question …

        Enfin, on a des outils très correct, le développement web à bien changé et change encore de jours en jours c’est fou !!

        J’adore ca même si parfois c’est pénible ^^

        Amicalement

  8. salut !

    le titre de ton post m’a interpellé et je me suis posé directement cette question « pourquoi installer firebug lite » sous chrome alors que chrome intégre un outil plus complet en natif « procéder à l’inspection de l’élément » ???

    Répondre
    • Parce que l’outil de développement de Chrome ne propose pas les mêmes fonctionnalités, et par plaisir de comparer Firebug à Firebug Lite (moi qui suit Firebugo-dépendante, je me devais de tester les deux). 😉

      Répondre
  9. Thanks pour le tip :)
    J’ai un site à debugger pour ie7 et je galérais avec l’outil par defaut de IE..

    Répondre

Trackbacks/Pingbacks

  1. Trouver et utiliser un plugin jQuery sur votre site web - Les Doigts dans le Net - [...] Firebug vous sera d’un grand secours en cas de problème. L’onglet « Console » vous donne les erreurs : n’oubliez…

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint