Firebug : L'utiliser & modifier facilement.

É-B · Décembre 15, 2012, 07:58:42

Bonjour,
Pour ceux qui en douterait, je suis novice en informatique, notamment et surtout en ce qui concerne la fabrication d'un site Internet.

Il existe peut-être mieux, mais Firebug sous Firefox est bien pratique pour voir ce que l'on modifie et faire des tests. C'est l'idéal pour éviter des catastrophes dans mon "cas blonde".

Mon problème réside pour effectuer mes modifications.
Mon dossier "Wordpress" est sur mon hébergement OVH.
Je m'y rends donc à chaque fois pour appliquer les changements que j'ai auparavant testés. Mes soucis commencent à cet instant. Les fichiers sont ouverts avec TextEdit (Mac) et je n'ai pas de numéro de ligne verticales pour trouver rapidement la ligne à modifier. J'ai loupé un truc ?

Enfin, je veux bien avoir des retours sur l'utilisation que vous faites de Firebug et sur votre manière de procéder pour effectuer les modifications. Il y a peut-être des astuces qui simplifient la vie...

Merci d'avance.
Bonne fin de semaine.

Nikojorj · Décembre 15, 2012, 13:25:50

Pour les numéros de ligne, un éditeur de texte décent genre Notepad++ ou SciTE.

Pour firebug par contre je ne saurais te dire... le peu de bricolage de mon site, je l'ai fait en local sur mon poste.

É-B · Décembre 15, 2012, 13:40:58

Citation de: Nikojorj le Décembre 15, 2012, 13:25:50
Pour les numéros de ligne, un éditeur de texte décent genre Notepad++ ou SciTE.

Merci, mais je suis sur Mac...

Nikojorj · Décembre 15, 2012, 14:19:59

Ah, je croyais que ces bouzingues étaient multiplateforme désolé, le libre c'est plus ce que c'était! je laisse donc la parole aux macistes (demande en section Mac peut-être?).

É-B · Décembre 15, 2012, 14:23:02

Citation de: Nikojorj le Décembre 15, 2012, 14:19:59
Ah, je croyais que ces bouzingues étaient multiplateforme désolé, le libre c'est plus ce que c'était! je laisse donc la parole aux macistes (demande en section Mac peut-être?).

Oui, je pensais être un bon membre en postant ce sujet ici

vincent3569 · Décembre 17, 2012, 15:51:01

ma méthode (bonne / pas bonne, à vos critiques) :

n'ayant pas créé de serveur web sur mon PC, pour réaliser des tests, j'ai créé 2 environements sur mon hébergeur : prod et test.
les données de l'un (photos, blogs, pages, config) sont répliquées régulièrement sur l'autre afin d'avoir un environnement de test qui soit le reflet de la prod.

pour autant, tous les fichiers sont modifiés en local sur mon pc et envoyé en ftp sur l'environement de test pour qualification "in situ" (mon pc sert donc à la foit de stockage des fichiers en cours de modif et surtout de back up du site : important en cas de crash ou de fausse manip sur le serveur).

une fois que tout est bien validé, alors les fichiers de tests sont basculés sur la prod.

pour ce qui est de Firebug :
- je m'en sert pour détecter les erreurs ou les trucs qui ne fonctionnement pas comme je le souhaite.
- Firebug est donc configuré pour montrer toutes les règles CSS utilisées, même celles-qui sont écrasées, histoire de détecter des problèmes de cascades
- il m'arrive régulièrement de réaliser des modifs de CSS directement depuis FireBug :
- je sélectionne "inspecter un élément" et une fois l'élément choisit, je modifie ces règles CSS dans l'onglet Style
- une fois que je suis satisfait du résultat, je reporte ça dans le CSS sur mon PC, j'exporte et je valide que tout est OK
- plus rarement, il m'arrive de travailler sur le HTML généré via le menu éditer : FireBug se comporte alors comme un éditeur de texte sur lequel tu peux faire ce que tu souhaites.
- une fois les modifs validées, je reporte dans le fichier correspondant sur mon PC, j'exporte et je valide que tout est OK

É-B · Décembre 17, 2012, 16:51:05

Citation de: vincent3569 le Décembre 17, 2012, 15:51:01
ma méthode (bonne / pas bonne, à vos critiques) :

n'ayant pas créé de serveur web sur mon PC, pour réaliser des tests, j'ai créé 2 environements sur mon hébergeur : prod et test.
les données de l'un (photos, blogs, pages, config) sont répliquées régulièrement sur l'autre afin d'avoir un environnement de test qui soit le reflet de la prod.

pour autant, tous les fichiers sont modifiés en local sur mon pc et envoyé en ftp sur l'environement de test pour qualification "in situ" (mon pc sert donc à la foit de stockage des fichiers en cours de modif et surtout de back up du site : important en cas de crash ou de fausse manip sur le serveur).

une fois que tout est bien validé, alors les fichiers de tests sont basculés sur la prod.

pour ce qui est de Firebug :
- je m'en sert pour détecter les erreurs ou les trucs qui ne fonctionnement pas comme je le souhaite.
- Firebug est donc configuré pour montrer toutes les règles CSS utilisées, même celles-qui sont écrasées, histoire de détecter des problèmes de cascades
- il m'arrive régulièrement de réaliser des modifs de CSS directement depuis FireBug :
- je sélectionne "inspecter un élément" et une fois l'élément choisit, je modifie ces règles CSS dans l'onglet Style
- une fois que je suis satisfait du résultat, je reporte ça dans le CSS sur mon PC, j'exporte et je valide que tout est OK
- plus rarement, il m'arrive de travailler sur le HTML généré via le menu éditer : FireBug se comporte alors comme un éditeur de texte sur lequel tu peux faire ce que tu souhaites.
- une fois les modifs validées, je reporte dans le fichier correspondant sur mon PC, j'exporte et je valide que tout est OK

J'ai dit facilement

Blague à part, c'est peut-être simple en fait, mais en ce qui me concerne j'ai rien compris

Merci pour le retour.

vincent3569 · Décembre 18, 2012, 09:21:29

Citation de: É-B le Décembre 17, 2012, 16:51:05

J'ai dit facilement

Blague à part, c'est peut-être simple en fait, mais en ce qui me concerne j'ai rien compris

Merci pour le retour.

A me relire, je conviens que ce n'est pas forcément facile de suivre.
En même temps, il n'est pas simple non plus d'expliquer un logiciel en quelques lignes...

Un autre solution : cherches "utilisation firebug" sur google ;-)
J'ai trouvé quelques liens intéressants que je te laisse parcourir (notamment sur siteduzero, alsacreations), en espérant qu'ils seront plus didactiques que moi

jesus · Décembre 18, 2012, 22:11:01

Il y a un équivalent de notepad++ pour mac (et d'autres) TextWrangler.
Sur pc, je me sert de Notepad++ avec filezila, mais il y a d'autre solution.
Et je me sert de firebug aussi.

ovody · Décembre 23, 2012, 16:23:48

komodo pour mac remplace très bien notepad sur windows

Utiliser frebug est une très bonne solution pour tester des petites modifications de CSS.

Personnellement je préfère utiliser google chrome et son "firebug" intégré : on peut faire plus de choses comme changer les classes (ok, avec firebug c'est possible mais sa manipulation du clic me prend la tête.

kenzo20 · Janvier 08, 2013, 11:08:57

Citation de: vincent3569 le Décembre 17, 2012, 15:51:01
pour ce qui est de Firebug :
- il m'arrive régulièrement de réaliser des modifs de CSS directement depuis FireBug :
- je sélectionne "inspecter un élément" et une fois l'élément choisit, je modifie ces règles CSS dans l'onglet Style
- une fois que je suis satisfait du résultat, je reporte ça dans le CSS sur mon PC, j'exporte et je valide que tout est OK
- plus rarement, il m'arrive de travailler sur le HTML généré via le menu éditer : FireBug se comporte alors comme un éditeur de texte sur lequel tu peux faire ce que tu souhaites.
- une fois les modifs validées, je reporte dans le fichier correspondant sur mon PC, j'exporte et je valide que tout est OK

Salut à tous,

Je débute sous joomla pour monter mon site. J'avoue que ce n'est pas une chose aisée mais une fois la logique intégrée, on arrive à des résultats assez plaisants. Pareil, j'utilise Firebug sous firefox pour repérer les éléments à modifier (notamment les .css) et visualiser les modifs dans les templates. Vous me confirmez qu'on ne peut pas modifier directement les .css incriminés ?

Une alternative pour l'éditeur de texte sous Mac, c'est simultron. C'est simple et pratique puisqu'il colore la syntaxe selon l'extension du fichier (php, xml, css).

Bonne journée à tous.