当前位置：首页 > news >正文

调试 Rust + WebAssembly 版康威生命游戏

news 来源：原创 2025/5/14 8:30:49

1. 启用 Panic 日志

1.1 让 Panic 信息显示在浏览器控制台

如果 Rust 代码发生 panic!()，默认情况下不会在浏览器开发者工具中显示详细的错误信息。这使得排查问题变得困难。

我们可以使用 console_error_panic_hook 这个 Rust crate，将 Panic 信息打印到 浏览器控制台。

1.2 在 `wasm-game-of-life/src/lib.rs` 中修改 `new` 方法

pub fn new() -> Universe {
    utils::set_panic_hook();  // 让 Panic 信息出现在控制台

    // 其他初始化代码...
}

1.3 安装 `console_error_panic_hook`

如果 wasm-game-of-life/src/utils.rs 还没有 set_panic_hook() 方法，我们需要手动引入 console_error_panic_hook：

pub fn set_panic_hook() {
    console_error_panic_hook::set_once();
}

这样，当 Rust 代码 崩溃（panic） 时，就能在 浏览器控制台 看到详细的错误信息，包括 Rust 堆栈回溯（stack trace）。

2. 添加日志调试

2.1 使用 `web_sys::console.log` 记录日志

WebAssembly 代码无法直接使用 println!()，但可以借助 web_sys 将日志输出到 浏览器控制台。

首先，在 Cargo.toml 文件中启用 web-sys 依赖：

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

然后，在 wasm-game-of-life/src/lib.rs 定义一个 log!() 宏，用于在 Rust 代码中方便地输出调试信息：

extern crate web_sys;

// 定义 `log!()` 宏，类似 `println!()`，但输出到 `console.log`
macro_rules! log {
    ( $( $t:tt )* ) => {
        web_sys::console::log_1(&format!( $( $t )* ).into());
    }
}

2.2 在 `tick()` 方法中记录细胞状态

我们可以在 tick() 方法中 记录每个细胞的状态变化：

impl Universe {
    pub fn tick(&mut self) {
        let mut next = self.cells.clone();

        for row in 0..self.height {
            for col in 0..self.width {
                let idx = self.get_index(row, col);
                let cell = self.cells[idx];
                let live_neighbors = self.live_neighbor_count(row, col);

                // 记录当前细胞的状态和活邻居数量
                log!(
                    "cell[{}, {}] is initially {:?} and has {} live neighbors",
                    row, col, cell, live_neighbors
                );

                let next_cell = match (cell, live_neighbors) {
                    (Cell::Alive, x) if x < 2 => Cell::Dead,  // 过少 -> 死亡
                    (Cell::Alive, 2) | (Cell::Alive, 3) => Cell::Alive,  // 繁衍 -> 存活
                    (Cell::Alive, x) if x > 3 => Cell::Dead,  // 过度拥挤 -> 死亡
                    (Cell::Dead, 3) => Cell::Alive,  // 复活
                    (otherwise, _) => otherwise,
                };

                // 记录细胞变化
                if next_cell != cell {
                    log!(
                        "    cell[{}, {}] transitioned from {:?} to {:?}",
                        row, col, cell, next_cell
                    );
                }

                next[idx] = next_cell;
            }
        }

        self.cells = next;
    }
}

3. 在 JavaScript 中使用 `debugger` 进行断点调试

3.1 在 `renderLoop()` 中设置断点

我们可以在 renderLoop() 中手动插入 debugger; 语句，让浏览器在每次 tick() 之前 暂停代码执行：

const renderLoop = () => {
  debugger;  // 断点调试，暂停执行

  universe.tick();
  drawGrid();
  drawCells();

  requestAnimationFrame(renderLoop);
};

3.2 调试步骤

在这里插入图片描述

打开开发者工具（F12 或右键 → Inspect）
进入 “Sources” 选项卡
执行 npm run start 运行游戏
游戏在 debugger; 处暂停，你可以：
- 逐步执行代码（Step Over）
- 观察变量的值
- 查看 WebAssembly 内存状态

4. 练习

练习 1：记录状态变化

任务：在 tick() 方法中，仅记录发生状态变化的细胞（从 Alive → Dead 或 Dead → Alive）。
实现：

if next_cell != cell {
    log!(
        "cell[{}, {}] transitioned from {:?} to {:?}",
        row, col, cell, next_cell
    );
}

练习 2：手动触发 Panic**

任务：在 new() 方法中 故意触发 panic，观察不同情况下的 浏览器堆栈追踪。
实现：

pub fn new() -> Universe {
    utils::set_panic_hook();
    
    panic!("Intentional panic for debugging!");  // 触发崩溃
}

步骤：

运行 npm run start
在控制台查看 panic!() 抛出的错误
尝试关闭 console_error_panic_hook 并重新测试
- 在 Cargo.toml 移除 console_error_panic_hook
- 运行 wasm-pack build
- 观察 错误信息变得难以理解，因为 Rust Panic 追踪信息消失了。

5. 总结

调试技巧	作用
`console_error_panic_hook`	让 Rust Panic 信息出现在浏览器控制台
`log!()` 宏	在 Rust 代码中使用 `console.log()` 输出日志
记录状态变化	仅在细胞状态改变时记录日志，减少无用信息
`debugger;` 断点	让浏览器暂停在 `tick()` 之前，手动调试
手动 `panic!()`	观察 Panic 追踪信息，学习如何优化错误信息