Debugger soi-même son code HTML / CSS

Date de publication : 09 juillet 2011.

Cet article va vous apprendre à cibler les bugs dans un code HTML / CSS et ainsi orienter vos efforts au debuggage de ceux-ci, qui peut être un vrai casse-tête si on ne sait pas où chercher.

Version PDF (Miroir) Version hors-ligne (Miroir)

I. Principe
II. Exemple simple
II-A. Suppression du header
II-B. Suppression du footer
II-C. Suppression de l'article
II-D. Suppression du superflu ?
II-E. Appliquer le correctif

I. Principe

Debugger un code HTML / CSS peut parfois prendre énormément de temps, surtout si on ne sait pas ce qui provoque le bug en question.
On va voir dans cet article une méthode de debuggage qui consiste à supprimer du code HTML, CSS, voire JavaScript, jusqu'à n'avoir plus que quelques lignes de code, mais ces quelques lignes représenteront notre problème qui sera enfin ciblé.

Par exemple, on a un document composé d'un header, d'un footer, d'un menu à gauche et du contenu à droite. Notre bug se situe dans le contenu, donc on va retirer du fichier le header, le footer et le menu pour ne laisser que le contenu. On rafraichit notre page et on vérifie que le bug est toujours présent. Dans ce cas, on continue à supprimer des éléments dans le contenu jusqu'à ce que le bug disparaisse. Arrivé à ce stade, on remet ce qu'on avait supprimé en dernier et on supprime autre chose si c'est possible, et si ça ne l'est pas, on a finalement trouvé où était précisément notre bug.

Comme il est toujours plus facile de comprendre par l'exemple, on va étudier plusieurs exemples avec différents niveaux de difficulté et de complexité.

II. Exemple simple

On va tout d'abord étudier un exemple simple qui pourrait très facilement être résolu à l'aide d'outils comme Firebug, mais cet exemple va surtout servir de modèle pour apprendre à corriger des exemples plus complexes.

Voici les codes HTML et CSS de ce premier exemple :

Code HTML


<!DOCTYPE html>  
<html>
<head>
    <title>Debugger HTML / CSS</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="exemple-1.css" />
</head>
<body>

<div id="header">
    <h1>Ô mon beau site</h1>
</div>

<div id="main">
    <ul id="menu">
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
    </ul>
    
    <div id="contenu">
        <div class="article">
            <h1>Titre article</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum quam vel urna laoreet dignissim.
                Suspendisse posuere, turpis nec dapibus egestas, nisi erat ornare enim, ac ornare sem libero sit amet lorem.
                Maecenas elementum, justo sed ornare adipiscing, lacus odio rhoncus massa, ut auctor lacus lectus non dui.
                In scelerisque viverra enim in malesuada. Nam rutrum ultricies lacus nec suscipit. Duis leo velit, laoreet ac dignissim eget,
                mattis vulputate nibh. Proin dapibus justo eu lectus ullamcorper ultrices. Nunc aliquet odio vel augue laoreet dictum.
                Mauris felis dolor, commodo at convallis vitae, fermentum non felis. Vivamus in turpis lorem, a consequat ipsum.
                Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sed nulla nisl.
                Cras vitae eros sed elit ultricies ultrices. Cras imperdiet augue at ante rutrum lacinia. Nam turpis ligula,
                commodo fringilla commodo quis, viverra vel elit. Maecenas ut nisl sed sem ornare tincidunt vitae in elit.
                Aenean at gravida diam. Mauris fringilla lorem nec diam vulputate id fermentum lectus pharetra. Aenean augue eros,
                sodales vitae pulvinar id, porta a urna.
            </p>
        </div>
    </div>
</div>

<div id="footer">
    <p>Copyright</p>
</div>

</body>
</html>

Code CSS


#header, #footer, #main {
    width : 900px;
    margin : auto;
    border : 1px solid #666;
    overflow : hidden;
}
#header {
    background : #dedede;
}
h1 {
    text-align : center;
    padding : 20px;
}
#menu {
    float : left;
    width : 200px;
    background : #abc;
    margin : 0;
    padding : 0;
}
#contenu {
    float : left;
    width : 700px;
    padding : 5px;
}
.article h1 {
    text-decoration : underline;
    padding : 10px;
    margin : 0;
}
.article p {
    text-align : justify;
}
#footer {
    background : #c7c7c7;
    clear : both;
}
#footer p {
    text-align : center;
    color : #666;
    padding : 10px;
}

Voir le résultat dans le navigateur

Comme vous pouvez le constater, notre article passe sous le menu, alors que l'on aurait voulu l'avoir à côté.
On va procéder étape par étape pour trouver pourquoi ce n'est pas le cas.

II-A. Suppression du header

On va commencer par supprimer le header, à priori il n'y a pas de raison que ce soit lui qui gène :

Code HTML


<!DOCTYPE html>  
<html>
<head>
    <title>Exemple simple</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="exemple-1.css" />
</head>
<body>

<div id="main">
    <ul id="menu">
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
    </ul>
    
    <div id="contenu">
        <div class="article">
            <h1>Titre article</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum quam vel urna laoreet dignissim.
                Suspendisse posuere, turpis nec dapibus egestas, nisi erat ornare enim, ac ornare sem libero sit amet lorem.
                Maecenas elementum, justo sed ornare adipiscing, lacus odio rhoncus massa, ut auctor lacus lectus non dui.
                In scelerisque viverra enim in malesuada. Nam rutrum ultricies lacus nec suscipit. Duis leo velit, laoreet ac dignissim eget,
                mattis vulputate nibh. Proin dapibus justo eu lectus ullamcorper ultrices. Nunc aliquet odio vel augue laoreet dictum.
                Mauris felis dolor, commodo at convallis vitae, fermentum non felis. Vivamus in turpis lorem, a consequat ipsum.
                Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sed nulla nisl.
                Cras vitae eros sed elit ultricies ultrices. Cras imperdiet augue at ante rutrum lacinia. Nam turpis ligula,
                commodo fringilla commodo quis, viverra vel elit. Maecenas ut nisl sed sem ornare tincidunt vitae in elit.
                Aenean at gravida diam. Mauris fringilla lorem nec diam vulputate id fermentum lectus pharetra. Aenean augue eros,
                sodales vitae pulvinar id, porta a urna.
            </p>
        </div>
    </div>
</div>

<div id="footer">
    <p>Copyright</p>
</div>

</body>
</html>

On va également supprimer tous les styles liés au header dans le CSS, ce qui donne :

Code CSS


#footer, #main {
    width : 900px;
    margin : auto;
    border : 1px solid #666;
    overflow : hidden;
}
h1 {
    text-align : center;
    padding : 20px;
}
#menu {
    float : left;
    width : 200px;
    background : #abc;
    margin : 0;
    padding : 0;
}
#contenu {
    float : left;
    width : 700px;
    padding : 5px;
}
.article h1 {
    text-decoration : underline;
    padding : 10px;
    margin : 0;
}
.article p {
    text-align : justify;
}
#footer {
    background : #c7c7c7;
    clear : both;
}
#footer p {
    text-align : center;
    color : #666;
    padding : 10px;
}

Ce qui donne : Voir le résultat dans le navigateur

Comme prévu, le problème est toujours là.

II-B. Suppression du footer

On continue ensuite la suppression des éléments avec le footer. Notre code HTML ressemble à :

Code HTML


<!DOCTYPE html>  
<html>
<head>
    <title>Exemple simple</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="exemple-1.css" />
</head>
<body>

<div id="main">
    <ul id="menu">
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
    </ul>
    
    <div id="contenu">
        <div class="article">
            <h1>Titre article</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum quam vel urna laoreet dignissim.
                Suspendisse posuere, turpis nec dapibus egestas, nisi erat ornare enim, ac ornare sem libero sit amet lorem.
                Maecenas elementum, justo sed ornare adipiscing, lacus odio rhoncus massa, ut auctor lacus lectus non dui.
                In scelerisque viverra enim in malesuada. Nam rutrum ultricies lacus nec suscipit. Duis leo velit, laoreet ac dignissim eget,
                mattis vulputate nibh. Proin dapibus justo eu lectus ullamcorper ultrices. Nunc aliquet odio vel augue laoreet dictum.
                Mauris felis dolor, commodo at convallis vitae, fermentum non felis. Vivamus in turpis lorem, a consequat ipsum.
                Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sed nulla nisl.
                Cras vitae eros sed elit ultricies ultrices. Cras imperdiet augue at ante rutrum lacinia. Nam turpis ligula,
                commodo fringilla commodo quis, viverra vel elit. Maecenas ut nisl sed sem ornare tincidunt vitae in elit.
                Aenean at gravida diam. Mauris fringilla lorem nec diam vulputate id fermentum lectus pharetra. Aenean augue eros,
                sodales vitae pulvinar id, porta a urna.
            </p>
        </div>
    </div>
</div>

</body>
</html>

On va également supprimer tous les styles liés au footer dans le CSS, ce qui donne :

Code CSS


#main {
    width : 900px;
    margin : auto;
    border : 1px solid #666;
    overflow : hidden;
}
h1 {
    text-align : center;
    padding : 20px;
}
#menu {
    float : left;
    width : 200px;
    background : #abc;
    margin : 0;
    padding : 0;
}
#contenu {
    float : left;
    width : 700px;
    padding : 5px;
}
.article h1 {
    text-decoration : underline;
    padding : 10px;
    margin : 0;
}
.article p {
    text-align : justify;
}

Ce qui donne : Voir le résultat dans le navigateur

On constate que le problème est toujours là, on continue donc notre investigation.

II-C. Suppression de l'article

Maintenant qu'on a déjà enlevé deux gros morceaux, on peut se dire qu'on touche au but. On va alors supprimer l'article complet et voir le résultat :

Code HTML


<!DOCTYPE html>  
<html>
<head>
    <title>Exemple simple</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="exemple-1.css" />
</head>
<body>

<div id="main">
    <ul id="menu">
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
    </ul>
    
    <div id="contenu">
        Blabla
    </div>
</div>

</body>
</html>

Vous pouvez voir que j'ai laissé un texte minimum quand même, pour que notre contenu apparaisse dans la page.
On va aussi supprimer le CSS lié aux articles :

Code CSS


#main {
    width : 900px;
    margin : auto;
    border : 1px solid #666;
    overflow : hidden;
}
#menu {
    float : left;
    width : 200px;
    background : #abc;
    margin : 0;
    padding : 0;
}
#contenu {
    float : left;
    width : 700px;
    padding : 5px;
}

On regarde ce que ça donne : Voir le résultat dans le navigateur

Malheureusement, notre bug est toujours là, il va falloir continuer.

II-D. Suppression du superflu ?

Arrivé à ce stade, il ne reste déjà plus grand chose dans notre page HTML, donc on va se contenter de supprimer ce qui nous semble superflu dans le code CSS. On obtient alors :

Code CSS


#main {
    width : 900px;
    overflow : hidden;
}
#menu {
    float : left;
    width : 200px;
    background : #abc;
    margin : 0;
    padding : 0;
}
#contenu {
    float : left;
    width : 700px;
}

Ce qui nous donne : Voir le résultat dans le navigateur

Tiens, notre texte s'est bien mis à côté du menu, donc on a supprimé le morceau de code qui faisait apparaître le bug. Pour savoir de quoi il s'agissait, on va remettre les derniers éléments un à un, pour savoir lequel est le fautif.
On va aussi en profiter pour mettre des couleurs de fond pour voir chacun de nos éléments :

Code CSS


#main {
    width : 900px;
    overflow : hidden;
    margin : auto;
    background : red;
}
#menu {
    float : left;
    width : 200px;
    background : #abc;
    margin : 0;
    padding : 0;
}
#contenu {
    float : left;
    width : 700px;
    background : yellow;
}

On regarde si le bug est réapparu : Voir le résultat dans le navigateur

Ce n'est pas le cas, on continue à rajouter des éléments :

Code CSS


#main {
    width : 900px;
    overflow : hidden;
    margin : auto;
    background : red;
}
#menu {
    float : left;
    width : 200px;
    background : #abc;
    margin : 0;
    padding : 0;
}
#contenu {
    float : left;
    width : 700px;
    padding : 5px;
    background : yellow;
}

On vérifie : Voir le résultat dans le navigateur

Ah ça y est, voilà notre bug ! Qu'avons rajouté ? Le padding : 5px;. On se demande pourquoi ce padding fait passer le div #contenu en dessous, et on se souvient de la méthode de calcul du modèle de boite W3C.
Dans notre cas, notre div #main fait 900px de large, et son contenu est de 200px de #menu + 700px de #contenu, mais c'était sans compter les 10px de padding qui s'ajoute au #contenu. Le #contenu étant trop large, il passe donc à la ligne.

II-E. Appliquer le correctif

Le bug trouvé, on va appliquer le correctif sur le petit morceau de test, puis le reporter sur notre exemple original, si jamais il fonctionne.
Dans notre exemple, vu qu'on a 10px de trop sur le #contenu, on va réduire sa largeur d'autant :

Code CSS


#main {
    width : 900px;
    overflow : hidden;
    margin : auto;
    background : red;
}
#menu {
    float : left;
    width : 200px;
    background : #abc;
    margin : 0;
    padding : 0;
}
#contenu {
    float : left;
    width : 690px;
    padding : 5px;
    background : yellow;
}

On vérifie que le bug a bien disparu : Voir le résultat dans le navigateur

C'est bien le cas, il ne nous reste plus qu'à remettre nos fichiers en ordre (vous aurez bien pris soin de sauvegarder une version complète, pour ne pas perdre tout le travail effectué jusque là) :

Code HTML


<!DOCTYPE html>  
<html>
<head>
    <title>Debugger HTML / CSS</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="exemple-1.css" />
</head>
<body>

<div id="header">
    <h1>Ô mon beau site</h1>
</div>

<div id="main">
    <ul id="menu">
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
    </ul>
    
    <div id="contenu">
        <div class="article">
            <h1>Titre article</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum quam vel urna laoreet dignissim.
                Suspendisse posuere, turpis nec dapibus egestas, nisi erat ornare enim, ac ornare sem libero sit amet lorem.
                Maecenas elementum, justo sed ornare adipiscing, lacus odio rhoncus massa, ut auctor lacus lectus non dui.
                In scelerisque viverra enim in malesuada. Nam rutrum ultricies lacus nec suscipit. Duis leo velit, laoreet ac dignissim eget,
                mattis vulputate nibh. Proin dapibus justo eu lectus ullamcorper ultrices. Nunc aliquet odio vel augue laoreet dictum.
                Mauris felis dolor, commodo at convallis vitae, fermentum non felis. Vivamus in turpis lorem, a consequat ipsum.
                Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sed nulla nisl.
                Cras vitae eros sed elit ultricies ultrices. Cras imperdiet augue at ante rutrum lacinia. Nam turpis ligula,
                commodo fringilla commodo quis, viverra vel elit. Maecenas ut nisl sed sem ornare tincidunt vitae in elit.
                Aenean at gravida diam. Mauris fringilla lorem nec diam vulputate id fermentum lectus pharetra. Aenean augue eros,
                sodales vitae pulvinar id, porta a urna.
            </p>
        </div>
    </div>
</div>

<div id="footer">
    <p>Copyright</p>
</div>

</body>
</html>

Code CSS


#header, #footer, #main {
    width : 900px;
    margin : auto;
    border : 1px solid #666;
    overflow : hidden;
}
#header {
    background : #dedede;
}
h1 {
    text-align : center;
    padding : 20px;
}
#menu {
    float : left;
    width : 200px;
    background : #abc;
    margin : 0;
    padding : 0;
}
#contenu {
    float : left;
    width : 690px;
    padding : 5px;
}
.article h1 {
    text-decoration : underline;
    padding : 10px;
    margin : 0;
}
.article p {
    text-align : justify;
}
#footer {
    background : #c7c7c7;
    clear : both;
}
#footer p {
    text-align : center;
    color : #666;
    padding : 10px;
}

Et le résultat final : Voir le résultat dans le navigateur

Bravo, voilà un bug corrigé, notre site s'affiche correctement !

Version PDF (Miroir) Version hors-ligne (Miroir)

Copyright © 2011 Josselin Willette. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.