Accès rapide : Aller au contenu de l'article |  Aller au menu |  Liste complète des articles  |  Aide  |  Contact |
bandeau

Accueil > Aides pour les nuls > Debug, comment ça marche ?

Debug, comment ça marche ?

Je suis en pleine recherche.

J’ai un site : http://echanger.ovh.org et j’obtiens une page blanche. Pourquoi donc ?

il faut utiliser le mode debug en ajoutant ceci à l’url : ?var_mode=debug
cela donne donc ceci :

http://echanger.ovh.org/?var_mode=debug

 Première réponse

Si on obtient ceci :

debug1

c’est relativement facile, il faut aller voir du côté du fichier inc-partenaires et du côté du fichier bandeau.html

 Deuxième réponse

Si on obtient ceci

debug

.... ........ alors je ne sais pas encore quoi faire.

J’ai trouvé quelques indications ici :
– http://www.spip-contrib.net/La-balise-ENV
............................................................. sans être plus avancée. Si vous savez comment faire, écrivez moi : qisbug(at)wanadoo.fr. Merci

 

 Firebug

Mais j’ai découvert le logiciel Firebug (gratuit) que l’on peut télécharger ici : http://extensions.geckozone.org/FireBug. Attention, il ne fonctionne qu’avec Mozilla Firefox, pas avec Internet Explorer. Mais comme Mozilla Firefox est largement mieux que Internet Explorer, faut pas hésiter à changer !

On trouve des explications ici (très bien pour démarrer) :
– http://www.siteduzero.com/tuto-3-28993-1-firebug-une-merveille-de-plus-pour-firefox.html

On trouve aussi des explications en anglais : - http://www.getfirebug.com/docs.html

Voici des explications supplémentaires

– 1) j’ouvre un site (page d’accueil ou autre page)
– 2) je clique en bas à droite de mon écran pour activer Firebug
– 3) Et voilà qu’il m’affiche « 1 erreur » (en fait je verrai qu’il y en a plusieurs).
– 4) je clique sur l’expression « 1 erreur »
– alors je vois ceci :

debug3

Je sais donc qu’il y a des erreurs dans style.css et dans style-menu-deroulant.

Alors j’ouvre style.css avecPSPad, qui me donne le numéro des lignes et je vais voir _margin-left à la ligne 2177. Je supprime cette ligne, j’enregistre le fichier, je le renvoie sur le site distant (en prenant des précautions, voir Post-scriptum).

Je fais de même avec style-menu-deroulant aux lignes indiquées (22 et 40)

Finalement, ça va ! Il reste l’erreur sur menuderoulant.js ligne15 ........ mais je ne sais pas quoi y faire.

 

 Erreurs dans le CSS

– 1) j’ouvre de nouveau le site (page d’accueil ou autre page)
– 2) je clique en bas à droite de mon écran pour activer Firebug
– 3) je clique à gauche sur « html » (voir dessin, flèche 1)
et éventuellement sur le petit + qui est devant les lignes (voir dessin, flèche 2) et à droite je clique sur CSS

Il apparaît alors ceci :

body {
background:transparent  
          url(http://www.lisez-moi.info/images/pays-fond.jpg)
          no-repeat fixed 0% !important;
margin:0px;
padding:20px;  

C’est très commode pour tenter des modifications

debug4

Je clique sur « transparent ....etc » qui m’indique qu’il y a un fond transparent avec une image (voir flèche 3) et je mets #FFFFFF et je vois aussi ce que cela fait avec un fond blanc

Je clique sur « margin : 0px » (voir flèche 4) et je mets « margin : 100px » et je vois aussi ce que cela fait

Je clique sur « padding : 20px »(voir flèche 5) et je mets « padding : 200px » et je vois aussi ce que cela fait

Je sais ainsi les modifications que je dois faire en allant dans le fichier marqué en bleu en haut à droite, ici style.css (ligne 1).

 

 Html et joujou avec CSS

C’est un bon moyen pour tenter des modifications de design.

– 1) j’ouvre de nouveau le site (page d’accueil ou autre page)
– 2) je clique en bas à droite de mon écran pour activer Firebug
– 3) je clique à gauche sur « html »
– 4) et sur le petit + qui est en tête des lignes.

Je vois apparaître des tas de <div id = ...> et des mots que je ne maîtrise pas forcément : « page » « conteneur » « contenu » « navigation » « annonce » « entete » « bandeau » « bande-chemin » etc. Ce sont les différentes boites qui s’encastrent les unes dans les autres, ou à côté des autres, pour constituer le design de mon site. Voilà donc comment je fais :

– 1) je mets une de ces lignes en surbrillance
– 2) en passant la souris dessus je vois apparaître, sur le site, une plage bleue qui m’indique l’emplacement de la « boîte » correspondante.
– 3) à droite des indications permettent d’essayer des modifications en voyant ce que cela donne. (pour essayer, relire ci-dessus)
– 4) si on est satisfait, il n’y a plus qu’à aller modifier les fichiers indiqués, aux lignes indiquées.

debug5


NOTES:

Méthode de sûreté

Utiliser un logiciel FTP par exemple Filezilla

– a) sur le site distant, dans squelettes/styles, renommer style.css en - style-ORI.css, pour le sauvegarder
– b) par FTP, envoyer style-ORI.css vers l’ordinateur, puis ouvrir ce fichier.
Chercher 6262A4 (qui est la couleur bleue du site de base) et mettre une autre couleur.
– c) Enregistrer sous le nom : style-1.css
– d) Envoyer le fichier style-1.css vers le site distant
– e) renommer style-1.css en ...... style.css

Utiliser PSPad

On peut le télécharger ici :
– http://www.01net.com/telecharger/windows/Bureautique/editeur_de_texte/fiches/37874.html

Quand il est actif, cliquer sur :
– affichage/coloration syntaxique, très pratique pour voir où s’ouvre et où se ferment les « boites » div, p, etc
– affichage/ numérotation des lignes qui fait apparaître un numéro en début de ligne.

Voir aussi :
– outils/palette des couleurs qui montre les couleurs et leur nom en six lettres du genre : blanc=#FFFFFF
– outils/différence des textes qui permet de comparer des textes différents