Initiation a Firebug

Cet élément s’adresse en priorité aux néophytes ou à ceux ou celles qui n’ont que peu de connaissances en informatique. C’est la raison pour laquelle je n’aborderai pas la partie développement. Cela ne serait pas d’un grand intérêt, les développeurs sachant pertinemment utiliser ce type d’utilitaire. Afin de l’utiliser d’une manière simple et concrète, j’invite le lecteur de ce post à installer (voir télécharger au préalable) l’application Firefox (Pour les vraiment novices, Firefox est ce que l’on appelle un browser - en français un navigateur - un utilitaire qui vous permet de « naviguer » sur le web.

Dès Firefox en place, nous allons procéder à l’installation de FIREBUG. L’application est très simple à installer. Il faut vous rendre dans le menu Outils de Firefox, de sélectionner l’option « Modules complémentaires » et de faire une recherche sur le mot firebug. Attention néanmoins à bien choisir FIREBUG et non pas certains projets associés à cette extension.

Recherche Firebug2

Ensuite cliquez sur Installer. Dès l’installation terminée, redémarrez Firefox et le tour est joué. Pour être sur que tout s’est bien passé, retournez dans le menu Outils, puis dans Modules Complémentaires. Une fois le module complémentaire ouvert (un onglet supplémentaire dans Firefox), cliquez dans Extensions sur la partie gauche et vous devriez voir apparaitre le nom de notre application ainsi que sa version.

Installation Firebug2

Maintenant que votre utilitaire est installé, nous allons voir comment l’utiliser. Tout d’abord, il faut le lancer. En effet, il faut l’initialiser au moins une fois. Pour ce faire, regardez dans le coin supérieur droit,sur la même ligne ou vous écrivez l’adresse du lien web que vous voulez visiter, et à droite de la cellule de recherche. Vous voyez un "bug" de couleur grisée. C’est lui. Pour l'initialiser, il suffit simplement de cliquer dessus. Il brille maintenant de toutes ses couleurs. Sur la droite, on aperçoit une icone (triangle pointe en bas). C'est le premier paramétrage que nous allons effectuer. Pour ce faire, cliquez sur l'icone pointe en bas puis sur "Disposition de Firebug" Vous avez le choix entre plusieurs positions. Essayez les toutes, cela permet un tour d'horizon.

Initialisation Firebug2

Afin de pouvoir suivre ce tutoriel, nous allons placer la position sur la partie "BAS" de l'écran comme ceci :

Visualisation Firebug

Nous allons maintenant étudier comment Firebug peut nous être utile. A cette fin, nous allons nous connecter sur le lien suivant : http://plongeurlibre.fr/maritime/la-flibuste/historique/11-introduction-maritime.html. Avec Firebug activé, voila ce que nous obtenons en bas de page

premiers pas Firebug 1

Nous allons nous assurer que deux paramètres soient bien affichés pour la suite des opérations :

1 - Que l'onglet "HTML" est bien sélectionné

2 - Que l'onglet "Styles" est bien sélectionné.

S'assurer que ce que vous avez sur votre écran est bien conforme à l'image ci-dessous :

1er ecran Firebug

Passons maintenant dans le vif du sujet. Nous avons une page web et nous avons ouvert Firebug. Le premier geste que nous allons accomplir est de sélectionner un élément. Nous allons commencer par un élément texte qui est le plus simple, mais nous pouvons sélectionner une image, un paragraphe entier, voir une page entière... Dans l'écran Firebug (partie bas de notre page), nous pouvons voir l'icone brillante de notre "bug". Juste à coté, sur la droite, une autre icone (bleue) représentant une flèche pointant sur un rectangle. Cliquez sur cette icone et remontez votre souris jusqu'à la première ligne de texte qui commence par : " Si les pirates sont de nos jours... " jusqu'à la fin de la phrase. Vous apercevez un rectangle bleu qui suit votre souris. Dès que cette phrase est entourée par ce rectangle bleu, comme dans l'image ci-dessous, cliquez une fois. La sélection est prise en compte.

Sélection texte

Jetons maintenant un coup d'oeil dans l'écran gauche en bas de votre écran dans la zone de Firebug. On y retrouve, surlignée en bleu notre phrase que nous avons sélectionnée :

Sélection Firebug 2

Ainsi chaque élément que nous allons sélectionner, sera affiché de cette manière, que cela soit du texte, une image ou un autre élément, quelqu'il soit. Si on regarde plus loin sur la dernière copie d'écran, on peut également s'aperçevoir que certaines informations sont aussi disponibles telles que la taille et la police utilisée ainsi que la forme (justifiée pour cet exemple). Voila de précieuses informations qui pourront nous aider pour utiliser la même police, ou la même taille.

Pour aller un peu plus loin, sélectionons maintenant dans la page web, l'image située tout en haut. Nous utiliserons la même méthode pour la sélectionner à savoir :

Cliquer sur l'icone (flèche vers rectangle)

Remonter la souris au niveau de l'image

Dès que le rectangle bleu enveloppe l'image, cliquez

Allons maintenant au résultat :

Sélection image

1 - L'image qui a été sélectionnée

2 - Les paramètres concernant cette image. On peut remarquer par ailleurs que les balises "alt" et "title" n'ont pas été renseignées.

3 - Informations supplémentaires importante : Nous avons le fichier dans lequel l'image est positionnée mais également la lligne qui lui correspond. Imaginez maintenant ce que cet outil nous offre comme possibilités.

Je rappelle que ce tutoriel ne s'adresse principalement qu'aux néophytes ou novices. Pour aller plus loin, il vous faudra franchir certaines difficultés comme le "HTML" ou le "CSS" mais ceci est une autre affaire.

Notez cet article:
0
Mise à jour vers Joomla 3.2 à partir d'une version...
Joomla! 3.2 - Comment mettre en place le versionin...

Articles en relation

Commentaires

 
Pas encore de commentaire
Déjà inscrit ? Connectez-vous ici
Guest
samedi 20 juillet 2019
Si vous souhaitez vous inscrire, veuillez saisir un nom d'utilisateur, mot de passe et nom.

Image Captcha

Sur ce site, nous utilisons des cookies.