Méthodes pour la correction de bugs

Objectif

  • Connaître des méthodes pour la correction de bugs.

Mise en situation

Les bugs sont inévitables. Il arrive systématiquement un moment où on doit corriger ces bugs. Suivre une méthode rigoureuse de correction de bugs permet de gagner du temps et de s'assurer que la correction est efficace.

MéthodeIsoler et minimiser la partie du code contenant le problème

Pour mieux comprendre le problème, il est préférable de l'isoler en un exemple simple. Une fois cet exemple isolé, on peut le simplifier le plus possible pour trouver le problème correspondant, s'assurer de l'élément causant le dysfonctionnement et le corriger.

Exemple

On dispose du code suivant avec deux fonctions :

1
function fahrenheitToCelsiusFormatting (temperatureF) {
2
  // Conversion d'un valeur de degré Fahrenheit à degré Celsius
3
  const temperatureC = (temperatureF - 32) * 5 / 9
4
}
5
6
function temperatureConversion (startTempF, nTemperatures, scale) {
7
8
  console.log('Début de la conversion des températures ...')
9
10
  let temperature = startTempF
11
12
  let countTemperature = 0
13
14
  while (countTemperature !== nTemperatures) {
15
    fahrenheitToCelsiusFormatting(temperature)
16
    nTemperatures = nTemperatures + 1
17
    temperature = temperature + scale
18
  }
19
}
20
21
const startTempF = -459
22
const nTemperatures = 10
23
const scale = 40
24
temperatureConversion(startTempF, nTemperatures, scale)
25
L'exécution de ce code ne se termine jamais.
On sent que le problème se situe au niveau de la boucle while, qui ne s'arrête jamais, et produit une boucle infinie.
1
while (countTemperture !== nTemperatures) {
2
  fahrenheitToCelsiusFormatting(temperature)
3
  nTemperatures = nTemperatures + 1
4
  temperature = temperature + scale
5
}
On peut isoler ces lignes avec le nécessaire pour reproduire le problème ainsi :
1
let startTempF = -459
2
let nTemperatures = 10
3
let scale = 40
4
5
function fahrenheitToCelsiusFormatting (temperatureF) {
6
  // Conversion d'un valeur de degré Fahrenheit à degré Celsius
7
  const temperatureC = (temperatureF - 32) * 5 / 9
8
}
9
10
let temperature = startTempF
11
let countTemperature = 0
12
13
while (countTemperature != nTemperatures) {
14
  fahrenheitToCelsiusFormatting(temperature)
15
  nTemperatures = nTemperatures + 1
16
  temperature = temperature + scale
17
}
On obtient une donc un code bien plus court, produisant le même problème et qui peut être inspecté plus facilement.
Remarque
Un tel exemple est appelé MWE, pour Minimal Working Example. Cette pratique permet d'isoler précisément le bug, et de s'assurer qu'il n'est pas produit par une instruction située à un autre endroit et n'est pas dépendante du contexte. Pour signaler un bug à d'autres développeurs, il est courant de construire un MWE, qui permet à chacun de reproduire le problème.
MéthodeEffectuer une recherche efficacement
On obtient généralement un message d'erreur en présence de bug de syntaxe. Une bonne pratique est d'approfondir la signification de l'erreur et de chercher une solution sur le Web, en se basant sur ce message. Afin de trouver de manière plus rapide ou exacte un résultat, on peut grâce à une certaine syntaxe sur certains navigateurs réaliser des requêtes plus fines.
Dans le cas de Duckduckgo par exemple, on peut saisir :
  • 'chien chat', pour trouver des résultats avec cette chaîne de caractères exacte.
  • chien -chat, pour trouver des résultats qui font mention de « chien » mais qui ne font pas mention de « chat ».
  • chien filetype:pdf, pour trouver des documents pdf qui font mention de « chien ».
  • chien site:exemple.fr, pour trouver des résultats qui font mention de « chien » sur exemple.fr.
Plus de détails ici : https://help.duckduckgo.com/duckduckgo-help-pages/results/syntax/
Exemple
Si on tombe en programmant avec JavaScript sur l'erreur suivante :
1
Uncaught TypeError: undefined is not a function
Une bonne requête ciblée, pour trouver des éléments de réponse, sera :
1
javascript site:stackoverflow.com 'Uncaught TypeError: undefined is not a function'
Qui nous permet d'accéder à des réponses sur StackOverflow, un site d'échanges sur la programmation en ligne.
Par exemple celle-ci qui indique qu'une fonction a sûrement mal été définie : https://stackoverflow.com/questions/13502733/uncaught-typeerror-undefined-is-not-a-function-beginner-backbone-js-applica
MéthodeAfficher les différentes valeurs des variables
Afficher les différentes valeurs des variables de l'exemple isolé permet de mieux les comprendre. Sous JavaScript, on peut réaliser cela avec console.log.
Exemple
Soit l'exemple d'une boucle infinie ci-après. On peut arriver à comprendre le problème en affichant la valeur de la variable countTemperature.
1
let startTempF = -459
2
let nTemperatures = 10
3
let scale = 40
4
5
function fahrenheitToCelsiusFormatting (temperatureF) {
6
  // Conversion d'un valeur de degré Fahrenheit à degré Celsius
7
  const temperatureC = (temperatureF - 32) * 5 / 9
8
  console.log(temperatureF, ' °F est équivalent à ', temperatureC, ' °C')
9
}
10
11
let temperature = startTempF
12
let countTemperature = 0
13
14
while (countTemperature !== nTemperatures){
15
  console.log('countTemperature = ', countTemperature)
16
  console.log('nTemperatures = ', nTemperatures)
17
  fahrenheitToCelsiusFormatting(temperature)
18
  nTemperatures = nTemperatures + 1
19
  temperature = temperature + scale
20
}
Ici, on obtiendrait en sortie :
1
countTemperature =  0
2
nTemperatures =  10
3
-459  °F est équivalent à  -272.77777777777777  °C
4
countTemperature =  0
5
nTemperatures =  11
6
-419  °F est équivalent à  -250.55555555555554  °C
7
countTemperature =  0
8
nTemperatures =  12
9
-379  °F est équivalent à  -228.33333333333334  °C
10
countTemperature =  0
11
nTemperatures =  13
12
-339  °F est équivalent à  -206.11111111111111  °C
13
countTemperature =  0
14
nTemperatures =  14
15
-299  °F est équivalent à  -183.88888888888889  °C
16
countTemperature =  0
17
nTemperatures =  15
18
-259  °F est équivalent à  -161.66666666666666  °C
19
countTemperature =  0
20
nTemperatures =  16
21
-219  °F est équivalent à  -139.44444444444446  °C
22
countTemperature =  0
23
nTemperatures =  17
24
-179  °F est équivalent à  -117.22222222222223  °C
25
countTemperature =  0
26
nTemperatures =  18
27
-139  °F est équivalent à  -95  °C
28
countTemperature =  0
29
nTemperatures =  19
30
-99  °F est équivalent à  -72.77777777777777  °C
Ce qui nous montre que le comportement n'est pas le bon : nTemperatures est incrémenté à la place de countTemperature.
MéthodeCommenter temporairement les parties non essentielles
Afin de plus rapidement comprendre un bug, on peut commenter les parties de code non essentielles à la résolution du problème.
Cela a l'avantage de :
  • réduire le temps d'exécution pour avoir des itérations plus rapide lors du débogage,
  • avoir moins de sorties pour mieux se concentrer sur les affichages de débogage.
Exemple
Si on reprend l'exemple précédent, on peut commenter fahrenheitToCelsiusFormatting ici pour plus rapidement faire exécuter la boucle et se concentrer sur la sortie de l'affichage du débogage.
1
let startTempF = -459
2
let nTemperatures = 10
3
let scale = 40
4
5
function fahrenheitToCelsiusFormatting (temperatureF) {
6
  // Conversion d'un valeur de degré Fahrenheit à degré Celsius
7
  const temperatureC = (temperatureF - 32) * 5 / 9
8
  console.log(temperatureF, ' °F est équivalent à ', temperatureC, ' °C')
9
}
10
11
let temperature = startTempF
12
let countTemperature = 0
13
14
while(countTemperature !== nTemperatures){
15
  console.log('countTemperature = ', countTemperature)
16
  console.log('nTemperatures = ', nTemperatures)
17
  // fahrenheitToCelsiusFormatting(temperature)
18
  nTemperatures = nTemperatures + 1
19
  temperature = temperature + scale
20
}
Ici, on obtiendrait uniquement les valeurs des variables à déboguer.
1
countTemperature =  0
2
nTemperatures =  10
3
countTemperature =  0
4
nTemperatures =  11
5
countTemperature =  0
6
nTemperatures =  12
7
countTemperature =  0
8
nTemperatures =  13
9
countTemperature =  0
10
nTemperatures =  14
11
countTemperature =  0
12
nTemperatures =  15
13
countTemperature =  0
14
nTemperatures =  16
15
countTemperature =  0
16
nTemperatures =  17
17
countTemperature =  0
18
nTemperatures =  18
19
countTemperature =  0
20
nTemperatures =  19
21
countTemperature =  0
22
nTemperatures =  20
23
countTemperature =  0
24
nTemperatures =  21
25
countTemperature =  0
26
nTemperatures =  22
27
countTemperature =  0
28
nTemperatures =  23
29
countTemperature =  0
30
nTemperatures =  24
31
...
L'affichage est moins pollué, ce qui permet de comprendre plus facilement l'origine du problème.
MéthodeS'expliquer le problème.
Afin de mieux comprendre l'exemple défectueux, on peut essayer d'expliquer le problème. Cela facilite la compréhension de celui-ci et donc sa résolution. Écrire le problème que l'on rencontre peut aussi permettre de mieux le résoudre. Une telle technique peut s'opérer en en 5 étapes :
  1. Écrire le nom du concept en haut d'une page blanche.
  2. Lister le contexte du problème : les éléments connus, l'erreur rencontrée, les personnes ayant travaillé dernièrement sur le code.
  3. Expliquer avec des phrases, comme si cela s'adressait à une autre personne, le problème et sa manifestation. Cela doit permettre de vous faire découvrir ce que vous ne savez pas sur le problème.
  4. Explorer les zones d'ombres identifiées, poser des hypothèses et noter les différentes expériences que vous pouvez réaliser pour tester ces hypothèses.
  5. Implémenter ces expériences et en fonction des résultats mettre à jour vos connaissances du problèmes en réitérant à partir de l'étape 3.
ComplémentMéthode du canard en plastique (Rubber Duck Debugging)
En programmation, il existe une méthode similaire appelée « méthode du canard en plastique » : la méthode consiste à expliquer le problème à une personnage ou à une autre personne à haute voix. De manière similaire à la technique précédente, il est possible que la solution au problème vienne en explicitant celui-ci.
Debugging assistant #geekInformations[1]
AttentionRéaliser une correction incrémentale de l'exemple simplifié
Lorsque l'on corrige le problème, il est préférable d'utiliser une approche incrémentale et de ne modifier qu'un petit nombre d'instructions pour s'assurer que la correction que l'on opère est la bonne.
À retenir
Les méthodes pour la correction de bugs tiennent essentiellement en trois points :
  • Une capacité à expliquer et donc comprendre le problème.
  • Une capacité à modifier et simplifier du code pour isoler le problème.
  • Une capacité à réaliser des recherches ciblées pour trouver de l'information.