CMS Made Simple France

Ce logiciel (ou devrais-je dire cet addon) est une extension que l'on ajoute à Firefox. Une fois installé il facilite la vie du développeur en lui indiquant de possibles problèmes de temps de chargement. Il permet également la modification du CSS d'un site distant ou local afin de faire des ""bidouille"" avec son CSS et trouver rapidement la solution à ses problèmes.^[1]

Ce module ne vous apprendra pas le CSS, il fait l'auto-complexion des propriétés CSS 2.1.

L'installation.

Firebug (c'est son nom) est disponible en téléchargement via Firefox et uniquement pour Firefox : lien et sous forme de compilation d'extension pour développeur web : lien

Un équivalent existe pour Internet Explorer 8 : lien ^[2]

Son installation étant basique je ne vais pas m'étendre dessus et passerais direct sur ses deux fonctionnalités phares.

Le réseau.

Une fois installé une icône apparait en bas à droite de votre Firefox :. Cliquez dessus pour ouvrir le panneau Firebug

Cliquez sur Réseau et activez le panneau réseau comme montré ci dessous :

recharger la page, un joli graphique s'offre à vous, voilà vous obtenez la courbe de chargement de votre site web. A vous d'en tirer les conclusions.

Justement les conclusions de ce graphique, elles ne sont pas toujours évidentes mais peuvent donner certaines pistes :

légende : -colonne 1 l'élément de votre site que Firefox a chargé, pièce par pièce -colonne 2 : le code HTTP retourné par le serveur, retenez simplement que 200 = ok, 304 = aucune modification depuis ta dernière visite, reprend l'image de la dernière fois, 404 = pas trouvé !, 500 = erreur interne inattendue. -colonne 3 : le nom du site -colonne 4 : le poids de l'élément -colonne 5 : les temps des téléchargements en millisecondes suivant un diagramme de Gantt

fin de la colonne 5 en gris foncé, le temps qu'a mit Firefox pour compiler tout ce qu'il a reçu et l'afficher sous la forme que vous aurez au final.

Ainsi un tel graphisme me permet de voir que apparemment tous va bien, aucune ligne ne dépasse la seconde de chargement, donc je n'ai aucune image trop lourde et je n'ai aucune erreur 404, je n'ai donc aucun fichier absent.

Que faire si j'ai une erreur 404 en colonne 2 ?

regarder si le fichier est bien placé dans vos répertoires et vérifier également si vous avez écrit fichier.JPG ou fichier.jpg, les majuscules c'est tuant...

Que faire si j'ai un temps de chargement d'une image trop longue ?

réduisez sa taille ? sa qualité ? revoyez la manière dont elle est chargé par le site (découpez la judicieusement).

Que faire si j'ai un fichier (image compris) qui n'est pas lourd mais prend un temps monstre à charger ?

hormis pour les fichiers PHP vous pouvez vous poser la question de savoir si ce n'est pas votre hébergeur qui vous débloque trop lentement le contenu de votre site ? (ou si votre ligne internet tire la gueule) Testez sur un autre hébergeur gratuit ou non, testez d'une autre connexion internet ( = différent bâtiment, = différent fournisseur d'accès). Pour les fichier PHP on peut se demander si le programme travail pas trop. avez vous 3000 pages dans CMSMS ? quel est le contenu de votre site en terme de volume ? qu'avez vous modifier ? quelle est votre configuration ? Répondez à toutes ces questions et ouvrez une discussion sur ce forum

Le CSS.

Le module Firebug comporte également une partie de gestion du CSS à la volée.

Attention : toutes les modifications faites dans Firebug restent dans Firebug ! ce qui a pour avantage de ne pas risquer de foutre en l'air votre site. ça a le désavantage de tout perdre niveau modification faite en live si il vous prend l'envie de recharger la page en oubliant de copier les modifications apportée

Ce n'est pas par ce que Firebug vous permet de modifier le CSS qu'il va vous donner des cours en même temps. Ce n'est pas son job et il ne sait pas le faire. Si vous ne connaissez pas/mal/pas suffisamment le CSS je ne peux que vous motiver à vous former préalablement sur le sujet ^[3]

Firebug dans son onglet Principal possède deux fenêtres. A gauche vous avez le code généré par le site web, à droite vous retrouvez le CSS de l' élément de gauche sélectionné (dans l'exemple la balise <body>)

De là 3 possibilités pour atteindre le point qui vous intéresse :

Vous retrouvez déjà dans la partie de droite l'élément qui vous intéresse, vous avez alors la possibilité de modifier ses attributs par un simple clic sur la valeur en bleu, vous pouvez également désactiver l'attribut par un clic gauche à gauche du libellé vert, vous pouvez ajouter un nouvel attribut par un double clic gauche sur la droite d'un des points-virgules, Enfin plein d'autre opération sont réalisable via le clic droit de votre souris. Dans tous les cas les modifications sont immédiates sur la page ! A noter que les styles CSS se superposant les uns les autres vous pouvez retrouver les autres codes CSS associés à l'élément sélectionné dans la partie de gauche.

Vous savez ou se trouve la balise qui vous embête ? alors parcourez le code sur la partie de gauche jusqu'à atteindre le nœud qui vous intéresse, retour alors dans la situation précédente.

Vous souhaitez récupérer directement dans le site l'élément qui vous intéresse, c'est possible en cliquant sur ""INSPECTER"" puis en cliquant sur l'un des élément de la page web, Firebug vous positionne alors sur le code HTML de l'élément sélectionné + affiche le code CSS associé à l'élément sélectionné, retour alors dans la situation 1.

N'oubliez jamais que le code modifié n'est pas répercuté sur le site. Pensez donc à sauvegarder régulièrement le code CSS ajouté/modifié vers les fichiers .css de votre site lorsque vous avez atteint une qualité de rendu acceptable

Bilan

Voilà pour les explications rapides qui vous permettront j'espère de gagner un temps précieux dans votre débugage de vos soucis. Ce n'est évidement pas une bible pour Firebug, je suis certain que des tuto bien plus précis existent mais maintenant vous avez l'outil alors foncez !