Firebug et ses extensions

L'un des outils privilégiés lors du développement de pages web est Firebug (utilisable sur Firefox uniquement). Pour ceux qui ne le connaissent pas ou peu, il s'agit d'un outil qui de base lui permet de debugger, éditer de l'HTML, CSS et du Javascript dans une page. Un des grands avantages de Firebug est sa capacité de lui ajouter différentes extensions pour de nouvelles fonctionnalités. Voici les extensions que j'ai pu trouver en surfant un peu partout et mon avis personnel mais j'encourage chacun à compléter la liste et à donner son avis.

Javascript

Firebug Code Coverage

Cette extension permet de déterminer les fonctions Javascript appelées ou non dans une page.

Firebug Code Coverage
Firebug Code Coverage

FireQuery

Cette extension permet de développer plus aisément des pages contenants du JQuery.

FireQuery
FireQuery

FireUnit

Cette extension permet d'effectuer des tests unitaires Javascript

FireUnit
FireUnit

Inline Code Finder for Firebug

Cette extension  permet de "surligner" les éléments suivants :

  • les évènements Javascript inline
  • les styles inline
  • les liens Javascript

Il est recommandé pour bien séparer le contenu du style et des interactions (surtout dans le cas de l'unobtrusive Javascript)

Inline Code Finder for Firebug
Inline Code Finder for Firebug

CSS

CSS Usage

Cette extension permet de voir les règles CSS utilisées dans la page et celles qui ne le sont pas.

CSS Usage
CSS Usage

FireFile

Cette extension permet de sauvegarder les modifications de CSS réalisées dans Firebug.

FireFile
FireFile

FireFontFamily

Cette extension permet de surligner les "font-family" qui sont utilisés dans le rendu de la page dans le panneau

FireFontFamily
FireFontFamily

FirePalette

Cette extension fournit un color picker dans le panneau CSS.

FirePalette
FirePalette

Firepicker

Cette extension fournit un color picker dans l'éditeur inline de CSS.

Firepicker
Firepicker

Firequark

Cette extension permet principalement d'extraire les sélecteurs CSS sur un élément de la page courante.

Firequark
Firequark

Performances

Hammerhead

Cette extension permet d'ajouter un panneau pour effectuer des mesures de chargement de temps de pages.

Hammerhead
Hammerhead

Jiffy

Cette extension ajoute un onglet à Firebug pour visualiser les mesures de temps fournies par Jiffy-Web.

Jiffy
Jiffy

Page Speed

Cette extension est proposée par Google pour contrer l'extension de Yahoo ( YSlow ) et qui permet d'évaluer les performances d'affichage de la page. Elle fournit également des conseils pour améliorer celles-ci.

Page Speed
Page Speed

SenSEO

Cette extension permet d'analyser une page et d'indiquer la manière de bien remplir celle-ci pour un bon référencement dans les moteurs de recherches.

SenSEO
SenSEO

YSlow

Cette extension analyse les performances de la page et préconise des règles de développement pour améliorer celles-ci.

YSlow
YSlow

Aide graphique

Firediff

Cette extension permet de surligner les modifications qui ont eu lieu au sein du DOM et des CSS.

Firediff
Firediff

FireFocus

Cette extension permet de suivre l'élement qui a actuellement le focus.

FireFocus
FireFocus

FireLinkReport

Cette extension permet de visualiser tous les liens présents dans une page (inclus les mailto, ftp, javascript)

FireLinkReport
FireLinkReport

FireRainbow

Cette extension permet d'ajouter la coloration syntaxique au javascript. Très pratique pour s'y retrouver dans le code.

FireRainbow
FireRainbow

Pixel Perfect

Cette extension permet d'ajouter un calque image par dessus le HTML développé.

Pixel Perfect
Pixel Perfect

Autres langages

AMF Explorer

Cette extension permet de visualiser les messages AMF désérialisés dans l'onglet réseau.

AMF Explorer
AMF Explorer

Chromebug

Cette extension est utilisée pour le débuggage des applications XUL pour Chrome. Personnellement je ne m'en suis jamais servi et à moins de faire un plugin pour Firefox ou Firebug, je ne pense pas m'en servir

Chromebug
Chromebug

ColdFire

Cette extension permet d'ajouter les informations de débuggage sur les applications ColdFusion

ColdFire
ColdFire

Drupal For Firebug

Cette extension permet d'ajouter des fonctionnalités propres à Drupal.

Drupal For Firebug
Drupal For Firebug

FireAtlas

Cette extension permet de débugger des pages en ASP .NET AJAX

FireAtlas
FireAtlas

FirePHP

Cette extension permet d'utiliser la console de Firebug pour une application PHP.

FirePHP
FirePHP

FirePython

Cette extension est une console de log pour Python

FirePython
FirePython

Firesymfony

Cette extension permet d'intégrer le débuggage d'application développé avec le framework PHP Symfony.

Firesymfony
Firesymfony

Flashbug

Cette extension permet d'afficher les sortie des fichiers flash (nécessite Flash Player Debugger)

Flashbug
Flashbug

LiveCoder

Cette extension permet d'avoir un regard plus avancé sur les fonctionnalités de Firebug, permettant d'éditer des fonctions. Il est utile au développement de plug-in pour Firefox.

LiveCoder
LiveCoder

Divers

CodeBurner

Cette extension permet d'ajouter une fonction d'historique dans l'onglet réseau.

CodeBurner
CodeBurner

Firebug Paints Events

Cette extension permet d'ajouter des références sur les tags HTML et sur les CSS

Firebug Paints Events
Firebug Paints Events

Firebug Net Panel History Overlay

Cette extension permet de connaître et d'afficher les zones de l'écran qui ont subi un "paint" ou un "reflow".

Firebug Net Panel History Overlay
Firebug Net Panel History Overlay

Firecookie

Cette extension permet des gérer les cookies présents dans le navigateur.

Firecookie
Firecookie

Fireclipse

Cette extension permet de faire communiquer Firebug et Eclipse.

Firefinder

Cette extension permet de trouver simplement des éléments HTML présents dans la  page grâce à des sélecteurs CSS ou des expressions XPath.

Firefinder
Firefinder

FireSpider

Cette extension permet de trouver les liens brisés et d'optimiser la page courante pour les moteurs de recherches.

FireSpider
FireSpider

FireXPath

Cette extension permet d'éditer inspecter et générer des expressions XPath dans la page. Très utile dans le cas de l'écriture de tests Selenium par exemple, ou pour de l'analyse de site.

FireXPath
FireXPath

FormBug

Cette extension permet de développer de manière simplifier les formulaires.

FormBug
FormBug

Log to Net panel

Cette extension permet d'ajouter dans l'onglet réseau des logs depuis l'exécution du Javascript

Log to Net panel
Log to Net panel

NetExport

Cette extension permet d'exporter les données de l'onglet réseau.

NetExport
NetExport

Omnibug

Cette extension permet d'obtenir des détails sur les requêtes effectuées.

Omnibug
Omnibug

XRefresh

Cette extension permet de rafraîchir  automatiquement la page lorsque les fichiers de ressources sont modifiées.

XRefresh
XRefresh

Widerbug

Cette extension est une optimisation de Firebug pour les écrans widescreen.

Widerbug
Widerbug

Cette liste est loin d'être exhaustive, de nouvelles extensions sortent jour après jour. Celles-ci peuvent se trouver sur le site des addons de firefox :

Pour les autres navigateurs, il existe une version allégée de Firebug mais sans la possibilité (à ma connaissance) de pouvoir rajouter tous ces plug-ins.

Debogguer sous IE6+ (suite)

En rapport avec l'article précédent sur le sujet, j'ajoute ma pierre à l'édifice. En effet, pour débugger sous IE6, j'ai utilisé le Microsoft Script Debugger, cependant, j'ai souvent été confronté au fait qu'une fois celui-ci lancé, mon navigateur plantait et du coup j'étais obligé de tout recommencer à chaque fois (clôture d'IE et de MSD par le taskmanager).

Du coup, j'ai cherché une autre solution, et j'ai pensé à Visual Studio, dans l'article précédent il était précisé que Visual Studio est payant, ce qui est vrai. Cependant, il existe des versions gratuites dites "express" qui permettent un développement rapide d'applications. Et il existe particulièrement la version Visual Web Developer 2008 Express Edition (téléchargeable ici).

J'ai donc installé cette version. Après un redémarrage de ma machine j'ai cherché comment utiliser le debugger avec mon application. Et au lieu que tout le monde galère ou fasse sa recherche sur Google, voici ma recette.

Premièrement il faut créer un nouveau site web (choisir un site vide) dans Visual Web Developer 2008 Express Edition (appelé par la suite VWDEE). Ensuite, j'ai activé la barre d'outils du débugger (Affichage -> Barre d'outils -> Déboguer), il faut ensuite cliquer sur la petite flèche verte pour activer le débuggeur, celui-ci lance le navigateur par défaut. Si votre navigateur par défaut est Firefox, une petite démarche supplémentaire est à faire. A savoir, arrêter le débuggeur. Et dans l'explorateur de solutions, faire un clic droit sur le projet de site web qui vient d'être créé et cliquer sur "Naviguer avec...", et donc il faut choisir le navigateur pour les tests (dans notre cas IE).

Une fois ceci effectué, notre Internet Explorer est lancé en mode debug et il suffit de saisir l'adresse de la page à tester pour que la page s'ajoute dans WSDEE avec les fichiers de scripts associés. Il est possible alors de poser des points d'arrêts dans les fichiers javascript.

Les raccourcis sont les suivants :

  • F9 - ajouter/supprimer un point d'arrêt sur la ligne courante
  • F10 - pas à pas principal
  • F11 - pas à pas détaillé
  • Shift + F11 - pas à pas sortant
  • F5 - Continuer jusqu'au prochain point d'arrêt

Autre petite astuce, le survol d'une variable permet une inspection de celle-ci.

J'espère que cet article vous servira pour un debuggage plus efficace sous Internet Explorer

Gestion des attributs – IE vs FF

Un nouvel exercice m'a permis de trouver de nouvelles différences entre Internet Explorer et Firefox (et je pense les autres navigateurs aussi)

Il s'agissait de modifier le style d'un élément, jusque là rien de difficile me direz vous. Faux

Premièrement, il a fallu récupérer l'élément où je voulais modifier le style (en fait je modifie l'élément suivant). Cet élément est le tag <label> et ce qui permet de le différencier c'est l'attribut for ce qui nous donne quelque chose de la forme :

<label for="IEvsFF">

Pour cela, en javascript, je faisais quelque chose comme :

var labels = document.getElementsByTagName("label");
for(var i = 0; i < labels.length; i++){ if( labels[i].getAttribute("for") == "IEvsFF"){ .... // Mon traitement } }

Ce qui passe bien sur Firefox. Cependant le résultat n'est pas le même sur Internet Explorer, en fait je n'ai rien même pas un message d'erreur. Aïe, aïe.

Après un debug, je m'aperçois que l'attribut s'appelle htmlFor. Du coup, ça marche mieux ! Et donc mon code devient quelque chose du genre :

var labels = document.getElementsByTagName("label");
for(var i = 0; i < labels.length; i++){ if (typeof ActiveXObject != "undefined") { if(labels[i].getAttribute("htmlFor") == "IEvsFF"){ .... // Mon traitement } } else{ if(labels[i].getAttribute("for") == "IEvsFF"){ .... // Mon traitement } } }

Merci l'alourdissement et l'imbrication des if.

Bon j'ai récupéré mon élément, maintenant je vais modifier son style tout simplement de la manière suivante :

myElement.setAttribute('class', 'topinambour');

Sous Firefox, pas de soucis tout marche bien. Par contre IE rien du tout, il modifie bien l'attribut dans le DOM (vérifié sur Firebug lite) mais il n'a pas l'air de modifier les couleurs.

Après quelques recherches, je tombe sur le fait qu'Internet Explorer ne gère pas l'attribut class de la même manière que les autres navigateurs. Voici ce qu'il faut à la place :

myElement.setAttribute('className', 'topinambour');

Et il faut donc modifier le code en conséquence de la même manière que précédemment.

Super !

Donc encore une fois, il faut rajouter plein de code pour gérer le fait qu'Internet Explorer ne gère pas le DOM de la même manière que les autres navigateurs ce qui alourdit la travail des développeurs que nous sommes.

Pour d'autres subtilités je vous conseille la lecture de l'article suivant : http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie/

Gestion des colspan – IE vs FF

Introduction

Lors de l'ajout de la fonctionnalité des multiheader dans le grid de SweetDev Ria, nous avons été confrontés à un problème de compatibilité entre Internet Explorer et Firefox.

Le but étant de pouvoir masquer une colonne dans la grid de SweetDev Ria.

Existence de <colgroup> et <cols>

Tout d’abord un petit rappel sur les structures des tables.
Nous sommes habitués à utiliser le tag <table> avec sa structure classique des <td> inclus dans des <tr>, voir nous utilisons le tag <th> pour avoir de beaux headers de colonnes. Cependant, il est moins connus d’utiliser la structuration des colonnes avec les deux tags que sont <colgroup> et <cols>, ceux-ci permettent ainsi d’appliquer un style à toute une colonne ou un groupe de colonnes.

Avec des colonnes normales sans colspan

Lorsque nous n’avons qu’une seule ligne de header dans la grid, le comportement est plutôt simple. Il suffit dans les grandes lignes de modifier le style de la balise <cols> correspondante. Seulement voilà, le comportement entre Internet Explorer et Firefox n’est pas le même.
Sous Firefox, nous utilisons la propriété visibility que nous mettons à collapse.  Le fait de mettre la visibility à collapse permet de masquer la colonne tout en récupérant la place par les autres colonnes.
Sous Internet Explorer, malheureusement la valeur collapse n’est pas autorisée pour la propriété visibility. Et nous devons utiliser autre chose à savoir display que nous mettons à none et width à 0px pour avoir le même effet que sous Firefox.
Voici le code utilisé dans la table :

<table width="500px" cellspacing="0" cellpadding="0" border="1">
<colgroup id="grid1_headTable_colgroup">
<col style="background-color:red" id="grid1_head_col_0"/>
<col style="background-color:white" id="grid1_head_spliter_0"/>
<col style="background-color:yellow" id="grid1_head_col_1"/>
<col style="background-color:lightblue" id="grid1_head_spliter_1"/>
<col style="background-color:lightgreen" id="grid1_head_col_2"/>
</colgroup>
<tr>
<td>th1</td>
<td>th2</td>
<td>th3</td>
<td>th4</td>
<td>th5</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
</table>

Et la fonction qui est contenu dans le bouton :

<script language="javascript">
function test(){
var maCol=document.getElementById("grid1_head_col_1");
maCol.style.visibility="collapse";
}
</script>

Ce qui donne ceci :

Avant de cliquer sur le bouton pour masquer la colonne
Avant de cliquer sur le bouton pour masquer la colonne
Après avoir cliqué sur le bouton "Test"
Après avoir cliqué sur le bouton "Test"

Dans l'autre cas :

<script language="javascript">
function test(){
var maCol=document.getElementById("grid1_head_col_1");
maCol.style.display="none";
maCol.style.width="0px";
}
</script>

Ce qui donne ceci :

Après click du bouton Test

Après avoir cliqué sur le bouton "Test"

Avec le problème du colspan et de la première colonne

La problématique était de rajouter un système de regroupement de colonnes afin de faire du multiheader. Jusque là tout va bien. Les tests que nous effectuons sont sur Firefox. Et donc les colonnes se masquent bien.
Nous faisons alors les tests sur Internet Explorer. Et là, los du masquage de la première colonne d’un groupe, la colonne se masque bien mais la totalité de label et du style du groupe disparait également. Ceci provient du fait que dans la structure de la table nous avons définit un regroupement de la colonne avec l’attribut colspan sur le nombre de colonnes contenu dans le groupe. Nous avons effectué alors effectués quelques tests.
Nous avons créé une table en html contenant des colspan, nous avons également ajouté un bouton qui grâce à du javascript à permis de masquer la première colonne d’un groupe.

<table width="500px" cellspacing="0" cellpadding="0" border="1">
<colgroup id="grid1_headTable_colgroup">
<col style="background-color:red" id="grid1_head_col_0"/>
<col style="background-color:white" id="grid1_head_spliter_0"/>
<col style="background-color:yellow" id="grid1_head_col_1"/>
<col style="background-color:lightblue" id="grid1_head_spliter_1"/>
<col style="background-color:lightgreen" id="grid1_head_col_2"/>
</colgroup>
<tr>
<td>thG1</td>
<td>thG2</td>
<td colspan="2">thG3</td>
<td>thG5</td>
</tr>
<tr>
<td>th1</td>
<td>th2</td>
<td>th3</td>
<td>th4</td>
<td>th5</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
</table>

Nous obtenu les résultats suivants :

Table contenant un colspan

Table contenant un colspan

Nous avons tout d’abord utilisé la propriété collapse de visibility (même fonction javascript que décrit dans la partie précédente) ce qui nous a donné les résultats suivants :

Après avoir cliqué sur le bouton "Test"

Après avoir cliqué sur le bouton "Test"

On peut que le résultat est à peu près le même que précédemment à l'exception que l'on perd le style au niveau du regroupement sous Firefox.

Nous avons ensuite essayé le display :none ; width :0px . Voici les résultats :

Après avoir cliqué sur le bouton "Test"

Après avoir cliqué sur le bouton "Test"

On peut voir que la colonne est bien masquée sur Internet Explorer, mais par contre le label a disparu ainsi que le style du regroupement. Ce qui pourrait apparaitre comme étant une réaction tout à fait normal, en effet, on demande au navigateur de masquer une colonne, chose qu'il fait sans se soucier si il y ou non un colspan présent.

Conclusion

Ce problème nous a permis de mettre en évidence un point qui n'est pas trivial. En effet, nous n'avons pas trouvé d'informations particulièrement précises vis à vis de ce problème sur Internet. Il y a bien des sites qui précisent la compatibilité des fonctions et propriétés CSS qui fonctionnent ou non en fonction des navigateurs, mais sans avoir pour autant les solutions à ces différents problèmes.

Pour notre part nous nous referons souvent au site suivant : http://www.quirksmode.org/ qui se veut être une référence dans le domaine

Dans notre cas précis nous nous sommes basés sur cette page là : http://www.quirksmode.org/css/columns.html

Encore une fois, nous nous sommes rendu compte que nous avons pris l'habitude de développer sur Firefox (essentiellement à cause des différents plugins facilitant la vie du développeur) et en pensant que les réactions sont les mêmes sur Internet Explorer (et je ne parle pas ici des autres navigateurs, mais le problème est le même).

Ainsi l'utilisation des CSS nécessite une grande connaissance de leurs rendus sur les différents navigateurs et augmente de manière non négligeable le temps de développement, chose souvent non anticipé.