Détectez la présence de Firebug chez vos visiteurs

Non, je ne suis pas mort. Juste un emploi du temps de fou qui m'empêche d'alimenter ce pauvre blog. Je passe "5 minutes" poster cette petite astuce qui pourra servir à certains.

Firebug est un excellent outil de debug Javascript / Css de plus en plus installé sur le Firefox des développeurs. Seulement Firebug lorsqu'il est activé peut grandement ralentir l'exécution d'une page, surtout si elle est bourrée de scripts comme le sont très régulièrement nos jolies applis Web2.x.

Gmail et ExtJs, entre autres, l'ont compris et préviennent leurs visiteurs du possible ralentissement engendré par l'activation du plug-in.

Mieux, Gmail propose un lien pour corriger ces ralentissements par une meilleure configuration.

Le Defensive Design * étant mon sujet du moment, je me suis penché sur ce modèle d'alerte et partage ici comme en réaliser simplement une.

* Je recommande vivement aux anglophones la lecture de Defensive Design for the Web: How to Improve Error Messages, Help, Forms, and Other Crisis Points. L'art de guider le visiteur sur les erreurs et confusions que l'on sait inévitables.

Allons-y !

Le résultat final sera cette alerte, affichée qu'aux utilisateurs de Firebug. J'ai volontairement évité ici d'utiliser jQuery pour rendre la fonction universelle. Elle est simplissime est peut être rapidement adaptée à n'importe quelle librairie. Ce qui compte c'est la détection du plug-in. Le reste c'est affaire de goût et de besoin.

Comment détecter la présence de Firebug ? Tout simplement par l'existence des fonctions ajoutées par celui-ci.

if (window.console && window.console.firebug) {
    // ...
}

A partir de là, il suffit de créer une petite alerte. Ne pas oublier de laisser une porte de sortir au visiteur pour ne pas l'importuner avec un message qu'il a déjà lu : ici un lien [ masquer ] qui passera le tout en display:none.

Javascript

<script type="text/javascript">
function detectFirebug() {
   if (window.console && window.console.firebug) {
      var html = '';
      html += '<div id="firebug-alert">';
      html += '<b>Firebug peut ralentir l\'execution de cette page</b>, ¬
              … il est recommander de le désactiver. ';
      html += '<a href="#" onclick="javascript:document.getElementById(\'firebug-alert\') ¬
              … .style.display=\'none\'">[ masquer ]</a>';
      html += '</div>';
      document.write(html);
   }
}
</script>

Vient la feuille de style pour mettre un peu de couleur là dessus. Voici la mienne.

Feuille de style

<style type="text/css">
    #firebug-alert {
        background:#FFFFCC;
        border:1px solid #666666;
        color:#666666;
        font:12px "Trebuchet MS", Tahoma, sans-serif;
        padding:5px;
    }
    #firebug-alert a {
        color:#FF6600;
        text-decoration:none;
    }
</style>

Usage

Une fois la fonction detectFirebug() ajoutée ou inclue dans la page, placez les lignes ci-dessous à l'endroit ou vous souhaitez voir apparaitre l'éventuelle alerte.

<script type="text/javascript">
    detectFirebug();
</script>