🚧 Attention, peinture fraîche !

Cette page a été traduite par une seule personne et n'a pas été relue et vérifiée par quelqu'un d'autre ! Les informations peuvent par exemple être erronées, être formulées maladroitement, ou contenir d'autres types de fautes.

Débogage

Avant d'écrire plus de code, nous devons nous équiper d'outils de débogage pour les moments où cela se passe mal. Prenez donc une minute pour consulter la page de référence qui liste les outils et les approches pour déboguer le WebAssembly généré par Rust.

Activer les journaux pour les paniques

Si notre code panique, nous souhaitons avoir un message d'erreur qui nous en informe dans la console de développement.

Notre wasm-pack-template-fr applique une dépendance optionnelle et activée par défaut envers la crate console_error_panic_hook qui est configurée dans wasm-jeu-de-la-vie/src/utils.rs. Tout ce que nous avons besoin de faire est d'installer le système dans une fonction d'initialisation ou dans un code standard qui s'exécutera. Nous pouvons faire appel à cela dans le constructeur Univers::new dans wasm-jeu-de-la-vie/src/lib.rs :

#![allow(unused)]
fn main() {
pub fn new() -> Univers {
    utils::set_panic_hook();

    // ...
}
}

Ajouter des journaux dans notre jeu de la vie

Utilisons la fonction console.log via la crate web-sys pour ajouter quelques journaux sur le traitement de chaque cellule dans notre fonction Univers::tick.

Pour commencer, ajoutez web-sys comme dépendance et ajoutez sa fonctionnalité "console" dans wasm-jeu-de-la-vie/Cargo.toml :

[dependencies.web-sys]
version = "0.3"
features = [
  "console",
]

Pour que ce soit plus pratique, nous allons intégrer la fonction console.log dans une macro du même style que println! :

#![allow(unused)]
fn main() {
extern crate web_sys;

// Une macro dans le même style que `println!(..)` pour la journalisation avec
// `console.log`.
macro_rules! log {
    ( $( $t:tt )* ) => {
        web_sys::console::log_1(&format!( $( $t )* ).into());
    }
}
}

Maintenant nous pouvons commencer à ajouter des journaux dans la console en insérant des appels à log dans le code Rust. Par exemple, pour afficher l'état de chaque cellule, le compteur de ses voisines vivantes, et le prochain état, nous pouvons modifier wasm-jeu-de-la-vie/src/lib.rs comme ceci :

diff --git a/src/lib.rs b/src/lib.rs
index f757641..a30e107 100755
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -123,6 +122,14 @@ impl Univers {
                 let cellule = self.cellules[indice];
                 let voisines_vivantes = self.compter_voisines_vivantes(ligne, colonne);

+                log!(
+                    "La cellule [{}, {}] est initialement {:?} et a {} voisines vivantes",
+                    ligne,
+                    colonne,
+                    cellule,
+                    voisines_vivantes
+                );
+
                 let prochain_etat = match (cellule, voisines_vivantes) {
                     // Règle 1 : toute cellule vivante avec moins de deux
                     // voisines vivantes meurt, comme si cela était un effet de
                     // sous-population.
@@ -140,6 +147,8 @@ impl Universe {
                     (statut, _) => statut,
                 };

+                log!("    et elle devient {:?}", prochain_etat);
+
                 generation_suivante[idx] = prochain_etat;
             }
         }

Utiliser un débogueur pour faire une pause entre chaque tick

Les débogueurs par étape des navigateurs sont utiles pour inspecter le JavaScript avec lequel interagit notre WebAssembly généré par Rust.

Par exemple, nous pouvons utiliser le débogueur pour faire une pause sur chaque itération de notre fonction boucleDeRendu en plaçant une instruction JavaScript debugger; juste avant l'appel à univers.tick().

const boucleDeRendu = () => {
  debugger;
  univers.tick();

  dessinerGrille();
  dessinerCellules();

  requestAnimationFrame(boucleDeRendu);
};

Cela nous fournit un point de passage efficace pour inspecter les journaux, et pour comparer le rendu actuel avec le précédent.

Exercices

• Ajoutez des journaux à la fonction tick qui affiche la ligne et la colonne de chaque cellule qui chaque d'état, de vivante à morte et vice-versa.

• Ajoutez un panic!() dans la méthode Univers::new. Inspectez alors la trace de pile dans le débogueur JavaScript de votre navigateur Web. Puis, désactivez les symboles de débogage, recompilez sans la dépendance optionnelle à console_error_panic_hook, et inspectez à nouveau la trace de pile. Pratique, n'est-ce pas ?