Détecter la présence de Firebug

« Il est bien connu que Firebug ralentit Gmail, sauf s’il est configuré correctement. »

Voilà le message que vous avez sans doute tous obtenus en ouvrant Gmail dernièrement. Je trouve que le « Il est bien connu » est un peu exagéré (c’est pas vraiment une vérité absolue depuis la nuit des temps non plus) mais c’est vrai : Firebug ralentit les sites où il y a beaucoup de JavaScript et de XMLHttpRequest (AJAX pour les intimes).

On est bien d’accord, Firebug est un outil fantastique dont n’importe quel développeur Web de cette vieille terre ne pourrait plus se passer. D’ailleurs, à la question : « Comment on faisait du debug JavaScript avant Firebug ? », la première réponse qui me vient généralement à l’esprit est : « Avant, on ne faisait pas de JavaScript ! » (de la même manière qu’on n’envoyait pas de SMS avant l’apparition des téléphones portables).

Mais voilà, surfer avec Firefox et Firebug, c’est un peu comme faire les 20 Km de Bruxelles avec un sac à dos rempli de cailloux ! Une solution loin d’être idiote est de faire deux profils : un pour le développement et un pour le surf.

Mais venons-en au vrai sujet de ce billet : détecter la présence de Firebug à partir du browser. Cela pourrait être utile pour prévenir vos visiteurs que s’ils désactivent Firebug, leur expérience utilisateur sera améliorée dans votre application.

Pour cela, la première chose à faire est de vérifier la présence de l’objet console. Mais comme Firebug n’a pas l’exclusivité sur l’objet console (Companion.JS l’implémente sur IE), ce n’est malheureusement pas suffisant ! Heureusement, Firebug ajoute la propriété firebug à l’objet console et c’est ce qui permet de détecter que notre ami Firebug est là :

if (console && "firebug" in console) {
	// afficher un message de mise en garde (ou de félicitations)
}

ou encore :

if (console && console.firebug) {
	// afficher un message de mise en garde (ou de félicitations)
}

Ce n’est pas plus compliqué que ça mais je suis certain que votre vie a changé depuis le moment où vous avez lu ce billet. Bon amusement !

9 Comments

  1. vinch's avatar antouane says:

    @ LateLament

    Tu peux désactiver Firebug et ne l’activer que pour les sites que tu désire.

    Like

  2. Palleas's avatar Palleas says:

    Effectivement c’est pas bête, limite ce pourrait être super si on affiche un message à la GMail lorsqu’une requête est trop longue, sinon ça peut faire fuir =/

    Like

  3. Marin's avatar Marin says:

    Avant, on faisait du JS proprement, un version pour NS, et une version pour IE. On testait avec des bonnes alert(‘bla’) et autre Visual Interdev 🙂

    Pour revenir à la détection de Firebug, je ne suis vraiment pas sur que celle que tu préconises soit la meilleure:
    si dans un de mes scripts a moi (ou d’une tierce partie) je fais un bel objet

    var console={version:”1.0″,firebug:function(){alert(“Hé tu as firebug installé”)}}

    ton script croira que le visiteur de la page a firebug.

    C’est un début de piste mais tu ne peux pas te baser a 100% dessus.
    Et aussi, un gars qui a Firebug sur son pc/mac… il devrait savoir comme le configurer correctement non?

    Like

  4. NiKo's avatar NiKo says:

    Tu peux aussi utiliser les blocs try/catch 🙂 (et du coup gérer de la même façon la console d’Opera) :

    try {
    console.firebug;
    // afficher un message de mise en garde (ou de félicitations)
    } catch(e) {
    // Firebug n’est pas actif
    }

    try {
    opera.postError;
    // afficher un message de mise en garde (ou de félicitations)
    } catch(e) {
    // la console d’Opera n’est pas active
    }

    Like

  5. vinch's avatar LateLament says:

    Dommage qu’on ne puisse pas désactiver Firebug par défaut pour tous les sites et ne l’activer que pour certains. Enfin je crois…

    Like

  6. Unknown's avatar antouane says:

    @ LateLament

    Tu peux désactiver Firebug et ne l’activer que pour les sites que tu désire.

    Like

  7. vinch's avatar Martius says:

    C’est bon à savoir, mais désactiver firebug est plus simple quand même…

    Like

  8. thadeu's avatar thadeu says:

    It’s too simple to deactivate it…

    But I think that, using an specific piece of JS to disable or show big red things (like in gmail), could seems a violation of user space. A gently advice is prettier.

    I never felt Gmail slow with firebug enabled… but… in pageflakes you can have a terrible experience, cause many bad JS are contained in widgets… sometimes I’m dev’ing in other pages, but many messages pops in my screen coming from the pageflakes tab. But disabling Firebug, Firefox can still be slowed with worse codes…

    Anyway, great post.

    Like

  9. mavoiture's avatar mavoiture says:

    Avant, on ne faisait pas de JavaScript ! ou on fesait pas de debug pour le javascript?

    Like

Leave a reply to LateLament Cancel reply