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